ページ表示速度のスコアをチェックするPageSpeed Insightsで、「次世代フォーマットでの画像の配信」を改善して、「合格した監査」にする方法について紹介します。
「次世代フォーマットでの画像の配信」というのは、画像ファイルのフォーマットに「JPEG 2000」「JPEG XR」「WebP」を使用することです。
これまでの画像ファイルのフォーマットといえば、「PNG 」や「JPEG」が一般的でした。
それに対して次世代画像フォーマットは、「PNG 」や「JPEG」よりも圧縮性能が高いので、画像の質を落とさずに画像ファイルのサイズを小さくすることができます。
そのため、ページを表示するときの画像の読み込み速度が速くなり、ページの表示スピードも上がります。
ワードプレスで作ったサイトであれば、すでに「PNG 」や「JPEG」で画像ファイルをアップロードしていても、簡単に一括で画像ファイルを次世代フォーマットの「WebP」にすることができます。
そして、PageSpeed Insightsの「次世代フォーマットでの画像の配信」にも合格します。
この記事では、ワードプレスで使用している画像ファイルのフォーマットを「PNG 」「JPEG」から「WebP」に簡単に変換して、「次世代フォーマットでの画像の配信」に合格する方法について解説します。
目次
プラグイン「EWWW Image Optimizer」をインストールする
ワードプレスで画像を次世代フォーマットのWebPに変換するために「EWWW Image Optimizer」というプラグインを使います。
ワードプレスでおすすめのプラグインは「WordPress（ワードプレス）初心者におすすめプラグイン７選」にまとめています。
ワードプレス管理ページの左メニューで「プラグイン」-「新規追加」をクリックします。
「プラグインの検索」に「EWWW Image Optimizer」と入力します。
「EWWW Image Optimizer」の「今すぐインストール」をクリックします。
「有効化」をクリックします。
これでワードプレスで「EWWW Image Optimizer」が使えるようになります。
「EWWW Image Optimizer」の設定
次に「EWWW Image Optimizer」で画像ファイルをWebPに変換できるように設定していきます。
ワードプレス管理ページの左メニューで「設定」-「EWWW Image Optimizer」をクリックします。
「Webp」をクリックします。
「ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。」をチェックして、「変更を保存」をクリックします。
「リライトルールを挿入する」をクリックします。
「ルールが正常に検証されました」と表示されて、右の画像が緑背景に白地のWEBPに変わります。
※SafariはWebpに対応していないので、画像は変わりません。FirefoxやChromeで確認してみてください。
「EWWW Image Optimizer」で画像ファイルをWebP形式に一括変換する
次に「EWWW Image Optimizer」で画像ファイルをWebP形式に一括変換します。
変換されるファイルは、ワードプレスのメディアライブラリにアップロードされているファイルになります。
※「EWWW Image Optimizer」の「上級者向け」の設定で、メディアライブラリ以外のフォルダにある画像を変換することもできます。
ワードプレス管理ページの左メニューで「メディア」-「一括最適化」をクリックします。
「圧縮をスキップし、WebP 変換のみを試みます。」にチェックを入れて、「最適化されていない画像をスキャンする」をクリックします。
画像ファイルの圧縮も行う場合は、「圧縮をスキップし、WebP 変換のみを試みます。」にチェックを入れる必要はないです。
今回はWebP変換のみ行うので、チェックを入れています。
最適化される画像数が表示されるので、「画像を最適化」をクリックします。
最適化の進捗状況が表示されます。
画像ファイルの最適化が終わると「完了」と表示されます。
画像ファイルのWebP変換は、元の画像を残したまま、WebP形式の画像ファイルが新たに作られます。
※画像の圧縮も行う場合は、元画像が圧縮された画像で上書きされます。
作成されるWebPファイルの拡張子は「.wbep」です。
例えば、「aaa.jpg」という画像ファイルがあれば、新しく「aaa.jpg.wbep」というファイルが作成されます。
「EWWW Image Optimizer」を使うことで、画像ファイルのWebP変換が一括で行えるので便利です。
次世代フォーマットでの画像の配信を確認する
画像ファイルをWebPに変換したら、きちんと画像が表示されているかを確認します。
確認にはFirefoxの開発ツールを使います。
ブラウザをFirefoxにして、画像を変換したサイトを開きます。
Firefox上部のメニューから「ツール」-「ウェブ開発」-「開発ツールを表示」をクリックします。
表示された開発ツールの「ネットワーク」をクリックします。
ファイルの「タイプ」が「webp」になっていることが確認できます。
もし一覧が表示されていない場合は、「再読み込み」をクリックします。
PageSpeed Lnsightsでチェックすると、WebP変換前は、
改善できる項目に「次世代フォーマットでの画像の配信」がありましたが、
WebP変換後は、
「合格した監査」に「次世代フォーマットでの画像の配信」が移りました。
まとめ
PageSpeed Insightsで「次世代フォーマットでの画像の配信」の項目を改善して監査に合格することは、「EWWW Image Optimizer」を使うことで簡単にできます。
画像フォーマットをWebPに変換して最適化することで、サイトの読み込みスピードも上がります。
ですので、ページの表示スピードが遅いことで、訪問ユーザーが離脱してしまうことも避けることができます。
画像ファイルが最適化されていないと、特にスマホからのアクセス時に表示が重くなりがちなので、今回の記事を参考にして次世代フォーマットでの画像の配信を試してみてください。
PageSpeed Insightsのスコアを改善するためにも、「次世代フォーマットでの画像の配信」の項目は対策しやすいです。
PageSpeed Insightsのその他の項目の改善については「サイトページの表示速度を改善した７つの方法」での対策が効果的なので読んでみてください。
コメントを残す