ワードプレスを使用して次世代形式で画像を提供する方法

最近ウェブサイトで Google ページスピード インサイト レポートを実行した場合は、おすすめとして「次世代形式で画像を配信する」という情報が表示されている可能性があります。 次世代の画像形式は、多くの場合、ウェブサイトの画像をより速く読み込むことを可能にする最新のブラウザに埋め込まれた圧縮情報を含むファイル形式です。 だから、どのようにそれをより速くするためにあなたのワードプレスのウェブサイト上でそれらを提供するのですか?

JPEG 2000、JPEG XR、WebP などの画像形式は、多くの場合、PNG や JPEG よりも圧縮率が高いため、ダウンロードが高速化され、データ消費量が少なくなります。 –次世代画像フォーマットのGoogleの説明。(本当に役に立ちましたね?

サイトで WordPress を CMS として使用している場合は、ほとんどの画像が JPEG、GIF、および PNG としてメディア セクションに保存されている可能性があります。 これは、次世代形式で画像を提供するために変更する必要はありません。 実際、多くのブラウザは WebP などの次世代形式を適切に読み込むことができず、ブラウザが次世代の画像形式をサポートしていない場合、Web サイトで JPEG などの標準の画像タイプを提供できるようにする必要があります。

ウェブサイトの速度

では、既存の画像をすべて現在と同じ形式に保つ必要がある場合は、WordPress で次世代の画像を提供するにはどうすればよいでしょうか。 あなたはあなたのためにこれをすべて行うプラグインをダウンロードすることができますか?

必ずしもそうとは限りませんが、ほとんど簡単です。

良いニュースは、これはコーディングを必要とせず(必要な場合を除く)、既存の画像を手動で置き換える必要がないということです。 プラグインをダウンロードするだけでは行えません。しかし、このプロジェクトを非常に簡単に行うための2つのプラグインがあります。

以下では、ワードプレスを使用して次世代形式で画像を提供する方法を紹介します。 それはあなたのサイトをより速くし、全体的なページスピードスコアを向上させながら、Pagespeed Insightsからの推奨事項を排除します。

以下のワードプレスで次世代画像を提供することに関する私のチュートリアルを見てください:

サイトで JPEG または PNG を使用している場合、次世代の画像形式を提供できますか?

私が示す方法で次世代の画像を提供することは、あなたのウェブサイト上の既存の画像ファイルを置き換えたり変更したりする必要はありません。 これは通常、ウェブマスターを混乱させ、多くのサイトが次世代の画像フォーマットを適切に提供しないようにします。 ほとんどの Web サイトは、JPEG や PNG などの一般的な画像形式に精通しています。 これらのファイル形式の両方は、彼らはこれらの新しいファイルの種類をサポートしているブラウザであなたのWordPressのウェブサイトを訪問したときに訪問者次世代画像形式を提供しながら、まだ使用することができます。

上記のビデオチュートリアルでは、あなたが知る必要があるすべてを説明する必要がありますが、あなたが私のように、方向を読む(またはすぐにスキップする)場合は、私は以下のテキストでWordPressのウェブサイト上で次世代の画像を提供するためのステップバイステップの指示を作成しました.

免責 事項: WordPress内の訪問者に次世代フォーマットを提供することについて行く複数の方法があります。しかし、これは私が複数のウェブサイトでテストを見た最も簡単な方法の一つです。 さらに、この戦略はゼロコーディングを必要とし、約30分で行うことができます。

これを行うには、次の操作を行う必要があります。

どのくらい時間がかかりますか?

  • セットアップに 30 分以内

ウェブサイトのサイズによっては画像が処理されるのに1~2時間かかる場合がありますが、これにはお手間がかからない場合があります。

このチュートリアルでは、次の種類の次世代画像の種類を示します。

  • WebP

WebP は、Google や他の多くのユーザーによって大きくサポートされているオープンソースの次世代画像形式です。 現時点では、最も人気のある次世代画像フォーマットとして宣伝されています。

1.次世代フォーマットと既存の画像フォーマットを提供するプラグインを追加

WebPエクスプレスプラグインは、それが得るのと同じくらい簡単です。 それはあなたのワードプレスのウェブサイトにコードの非常に簡単な行を追加します。 このコードは、サポートされているブラウザーで訪問者に WebP 画像を適切に提供し、そうでない場合は Web サイトの既定の画像 (JPEG など) を提供することに関するこの開発者のブログに基づいています。

ワードプレスで次世代形式のウェブプを提供する

これは、このブログを読んでいるすべての人には必要ないかもしれませんが、多くの WordPress サイトでは、WebP が正しく提供されていることを確認する必要があります。訪問者が WebP 形式をレンダリングできない場合に、既存のイメージが確実に提供されるようにします。

あなたがしなければならないのは、プラグインをダウンロードするか、ワードプレスの中でそれを検索することです。 その後、単にプラグインをアクティブにし、それはその目的を果たしています。 設定を構成する必要はありません。

  1. プラグインに移動
  2. [新規追加] を選択します。
  3. 「WebPエクスプレス」を検索
  4. [インストール] をクリックします。
  5. [アクティブ化]をクリックします。
  6. お前は終わりだ!

ワードプレスでウェブ画像を提供する

これには 5 分未満で、問題は発生しません。

これは最も簡単な手順であり、ウェブサイトや画像に変更を加えないでください。

2. 既存のすべての画像ファイルを所定の場所に保持しながら、WebPイメージを提供する

私は、多くのWordPressの出版社が現在次世代の画像フォーマットを提供していないトップの理由の1つは、既存の画像をすべて置き換えるか、手動で何らかの方法で変換し、時間を心配していると考えているからだと思います。努力し、そうするのが難しい。 幸いなことに、次世代画像が出版社のWordPressサイトに適切に実装されている場合、既存のメディアファイルや画像フォーマットを積極的に置き換える必要はありません。

これを行う最も簡単な方法の 1 つは、ShortPixel を使用することです。

短いピクセルでワードプレスで次世代の画像形式を提供する

ShortPixel は、ウェブマスター向けにいくつかの異なる種類のテクノロジを提供する画像圧縮および画像最適化会社です。 この例では、ShortPixel 画像最適化プラグインを利用します。

ShorPixel プラグインをダウンロードしてインストールします。 または、WordPress内のプラグインを見つけ、それをインストールし、それを有効にします。

ShortPixel プラグインを構成する前に、無料のShortPixel アカウント を作成することをお楽しめる必要があります。 無料でクレジットカードは必要ありません。しかし、私はこのプロジェクト全体からさらに大きな価値を得るために少額の投資を強くお勧めします。

アカウントを作成してログインしたら、取得する必要があるのはアカウントメニューの API キーです。

画像の最適化を使用してウェブサイトをスピードアップ

現在、サイト上に大きすぎる画像が多い場合や、サイトのすべての投稿やページに背景に透明度のない PNG が多い場合は、有料プランを検討する価値があります。 また、古くて多くの画像を含むサイトがある場合は、必要なすべての機能を確保するために最低限の投資が必要になる場合があります。 有料クレジットはかなり手頃な価格で、すでにサイズを変更し、適切なウェブ使用のためにそれらを保存している場合でも、画像を圧縮するのに役立ちます.

有料オプションは、ShortPixel を使用して画像を WebP として提供する場合は必要ありません。私はこれを行うときに常に有料オプションを使用していますが(すべての機能を確保するために最小限の投資を行う必要があるかもしれません)。

将来的には、圧縮だけでなく有料オプションで何ができるかについて、より多くのブログを書きますが、今のところはWordPressサイトで次世代の画像を提供することに焦点を当てます。

画像の短いピクセル

さて、それは私たちのプラグインを構成し、私たちのWebP画像の提供を開始する時間です!

アカウントを持っていて、上記の両方のプラグインをインストールしたら、サポートされている次世代画像(特にWebP)ですべての訪問者にサービスを提供するようにShortPixelを設定できます。 次に、WordPress 管理者の内部で次の手順に従います。

  1. [設定]>ショートピクセルに移動します。
  2. [全般] タブを選択します。
  3. [API キー] フィールドにアカウントの API キーを入力します。
  4. クリックし、下部にある[変更を保存]をクリックします。
  5. 今、上部にある「詳細設定」タブをクリックします
  6. [WebP イメージ] セクションまで下にスクロールし、[WebP バージョンのイメージも無料で作成する] を選択します。
  7. 次に、[WebP バージョンのイメージをフロントエンドに配信する] を選択します。
  8. 次に、3 つの異なるオプションがあります。
    • ShortPixel が 「ページコードを変更せずに (.htatcces 経由で)」を使用できることを示していない限り、「WordPress フック経由のみ」オプションを使用することをお勧めします。
    • 私はすべての構成に問題があった 除いて ある時点で「WordPressフックを介してのみ」ので、それはほとんどのサイトのための私の主な推奨事項です。
  9. 一番下までスクロールし、「保存して一括処理に移動」を選択します。

jpegsやpngsを取り除くことなく、ウェブサイトの訪問者にウェブプ画像を提供

私たちは基本的に今終わりました。

一括処理画面がそのウィンドウで実行されます。 有料クレジットを支払ったり、途中で他の画像最適化オプションを選択した場合は、すべての画像の処理に時間がかかることがあります。 ウィンドウが完成するまで、そのウィンドウをバックグラウンドで開いたままにしておく必要があります。

多数の画像を含むサイトがある場合は、完了までに数時間かかることがあります。 進行状況バーには、その進捗状況が表示されます。

ページスピードの洞察のために次世代形式で画像を提供する

あなたは今、訪問者に次世代の画像形式を提供しています

これらの手順をすべて実行した場合、WordPress の Web サイトは、サポートされているブラウザーですべての訪問者の WebP (次世代形式) 画像を提供する必要があります。 訪問者のブラウザが WebP をサポートしていない場合は、既存の JPEG、PNG、GIF 形式で提供する必要があります。 既存のすべての画像は、WordPress 管理者の [メディア] セクションにあった場所に保存する必要があります。

あなたが先に行って、途中で画像圧縮の他の形式を行うためにShortPixelを使用した場合、すべてのウェブサイトの訪問者は、何があっても、最速、最も最適な、SEOフレンドリーな方法で読み込まれた画像を持っている必要があります。

次世代イメージが正しくレンダリングされていることを確認する

1.)あなたのウェブサイトのキャッシュをクリアし、あなたのウェブサイトを表示します。

まず、すべての画像が正しく表示されることを確認します。 ShortPixel を使用して画像に他の形式の圧縮を適用した場合は、ウェブサイトのテーマとコアレイアウトコンポーネントが変更されていないことを確認する必要があります。

次世代の画像処理

テーマの特定の画像または要素が問題である場合は、メディア セクションに移動して、そのイメージの元のバージョンを復元できます。 上記を参照してください。

それでもすべてが何らかの理由で本当に狂っているように見える場合は、いつでも一括処理画面に戻り、ボタンをクリックしてすべての画像を元の形式に復元できます。 いつでも一括アップロードをやり直し、プラグインの除外ルールを使用して、サイトのテーマに必要な特定の画像が処理されないようにすることができます。

2.) ツールを使用して、サイトがすべてのブラウザで正常に表示されていることを確認します。

最初のテストが完了します。 次に、すべての訪問者がウェブサイトを正しく表示しているかどうかを理解する必要があります。

複数のブラウザのスクリーン ショット

1 回限りの使用では、 crossbrowsertesting.comを使用することをお勧めします。 このツールを使用すると、多数の異なるブラウザー、デバイスの種類、およびバージョンをすべて一度に自動的にテストできます。 数ページの「スクリーンショット」機能を使用して、訪問者が最もよく使用するブラウザやデバイスでページが画像を正しく表示していることを確認します。

クロスブラウザテストは有料ツール/サービスですが、クレジットカードなしで無料の7日間のトライアルを使用することができます。 プロジェクトが成功した場合は、アカウントを設定し、試用版を使用してスクリーンショットを実行し、ツールへの長期的なコミットメントを回避できます。

訪問者が一般的に使用しているブラウザやデバイスが気になる場合は、Google アナリティクスを使用して確認できます。

グーグルウェブサイトの速度

これは、ページスピードインサイトから「次世代形式で画像を提供する」を取り除きます

これで、Google のページスピードインサイトを通じて WordPress のウェブサイトをもう一度実行できるようになったし、次世代形式で画像を配信する推奨事項がなくなったはずです。

さらに、これはまた、「効率的に画像をエンコードする」ことを求める追加の推奨事項の大部分を取り除く必要があります。

これが解決していない可能性がある唯一の画像の最適化は、 「オフスクリーン画像を延期する」。 これは、ここで詳しく説明したものです。

最後に、レポート内の CSS に関するページスピードインサイトの推奨事項を取り除くことに興味がある場合は、CSS配信の最適化に関するブログをこちらで読むことができます。 上記の情報を遅延読み込み画像に関するブログと組み合わせることで、CSSを最適化することで、すべてのWordPressサイトがGoogleの人気ツールの中にはるかに高速なウェブサイトの速度スコアを表示できるようにする必要があります。

このプロセスに関する問題やご質問がある場合は、以下の場合にお任せください。 私は、道に沿って他の誰かがあなたが経験した洞察や課題から学ぶことができると確信しており、私は将来の読者が学ぶためのコメントでそれらに対処したいと思います。

Share via
Copy link