適切なサイズの画像を配信する方法〜PageSpeed Insights〜

PageSpeed Insight でサイトを分析すると、「改善できる項目」に「適切なサイズの画像を配信して、モバイルデータ量を節約し読み込み時間を短縮してください。」と表示された場合の対処方法をご紹介します。

本記事の最後にご紹介する他の項目も改善する前提で、パソコンでは最大 97 点、モバイルでは最大 68 点までスコアをアップできました。

現状・条件

• レンタルサーバ環境 ( ブログを始めるなら国内シェアNo.1のエックスサーバー )
• WordPress バージョン：5.3
• WordPress のテーマ：Cocoon 2.0.0.3

• 画像最適化プラグインは reSmush.it を利用しています。
• Regenerate Thumbnails でサムネールを管理しています。
• WordPress のメデイア設定は下記の通りです。

最適化の対象は主に アイキャッチ 画像で、実際に配信される画像サイズは下記の通りです。

• パソコン：640×360 px の画像
• モバイル：240×135 px の画像

該当記事を公開した後、PageSpeed Insights での分析結果次第、上記のサイズの画像の最適化が必要です。

以下、新しい記事の作成時に行うアイキャッチ画像の入手から配信までの流れです。

アイキャッチ画像を用意する

無料の画像ファイルをダウンドードできるサイトから記事の内容に合った画像を入手します。
当サイトでは Pixabay をよく利用していますが、各自の方法で用意しても問題ありません。

画像を最適化する

当サイトでは既に、reSmush.it を適用していましたが、サイトのパフォーマンスはよくならず、GIMP で画像を圧縮し、TinyPNG でさらに圧縮した後、画像を WordPress にアップする方法で画像のサイズを抑えてきましたが、Google の Squoosh でより簡単且つ効率よく画像をリサイズ＆圧縮することができました。

以下、Squoosh を使用して加工する方法です。

Cache 系プラグインを使用中であれば、Cache を削除します。

画像の最適化を確認する

PageSpeed Insight でサイトを分析します。

その結果画面の「改善できる項目」に「適切なサイズの画像」項目が表示されているか確認します。表示されなければそれで OK です。

記事を公開後サイトのパフォーマンスを測定し改善点を洗い出す

もし、「適切なサイズの画像」項目が表示されたら再度最適化を行います。以下は例です。

下記の対象画像のURLを右クリックし適宜保存してください。

対処する

Squoosh へアクセスし、保存したファイルをドラッグ＆ドロップします。
画像を減らせるデータ量 ( 36KB 以下 ) のサイズに圧縮して保存します。( 48 – 36 = 12KB まで下げると品質が悪すぎる )

「適切なサイズの画像」項目のURLを見て、該当画像の保存場所を確認します。
例：https://www.jacepark.com/wp-content/uploads/2019/11/lost-places-4596469_1920-640×360.jpg

確認した WordPress の保存場所に画像をアップロードして切り替えます。
XServer の場合、「InfoPanel」> 「サーバー」> 「ファイル管理」> 保存場所(public_html/wp-content/uploads/2019/11/)まで移動します。

サイトのパフォーマンスを再度測定

Cache 系プラグインを使用中であれば、Cache を削除します。

再度 PageSpeed Insights でサイトを分析し、「改善てきる項目」か「合格した監査」の「適切なサイズの画像」に該当ファイルがあるか確認します。なければOKです。

サイトのスコアがよくなるまで他の画像も同じく対処して見てください。

さいごに

サイトのパフォーマンスの分析は、スクロールせず見えるファーストページのロード時間を測定するため、「画像の最適化」は新しい記事を公開する度に行うべき作業だと思います。

---