サイトの表示速度を確認するために PageSpeed Insights を実行すると、以下のような指摘が表示されることがあります。
画像配信を改善する ー 推定される削減サイズ 16 KiB
画像のダウンロードサイズが大きいと、ページの読み込み時間が長くなり、LCPなどのパフォーマンス指標にも影響します。
今回は、実際に PageSpeed Insights で「画像配信を改善する」と指摘された画像について、原因を確認して改善してみました。
１．PageSpeed Insights で「画像配信を改善する」と表示される
PageSpeed Insightsでサイトを測定すると、以下のような結果が表示されました。
２．指摘の原因：画像サイズがあっていない
画像にもあるように、原因は該当の画像サイズがあっていないことです。
この画像ファイルは、表示サイズ（375×91）に必要なサイズ（856×207）より大きくなっています。画像のダウンロード サイズを小さくするには、レスポンシブ画像を使用します。
今回は、ブログのヘッダーに表示しているロゴの画像のサイズが合っていないとして指摘されました。
2-1. なぜ問題か？
今回のように、実際の表示サイズが小さい画像なのに、必要以上に大きな画像ファイルを読み込んでいる場合、以下のような流れになります。
大きな画像ファイルをサーバーからダウンロード
↓
ブラウザで小さく表示ブラウザでは小さく表示するにもかかわらず、ダウンロードするときには大きな画像を取得していますので、画像の容量が大きくなるほど、通信量も増えてしまい、結果パフォーマンスに影響が出ます。
特にスマートフォンの表示では、ページの読み込み速度に影響しやすいため、実際の表示サイズに合った画像を配置することが重要です。
３．解決法：画像サイズを合わせた形で再度アップロード
プラグインなどを利用するとwordpress内で画像編集もできるかもしれないですが、今回は画像のサイズを修正し、再アップロードすることにしました。
Windowsのペイントアプリを利用して画像を編集し、サイズを変更します。
3-1. 画像のサイズ変更手順
ペイントアプリで変更します。
・対象の画像（hogehoge.jpg など）を右クリックし、プログラムから開く > ペイント を選択し、ペイントアプリを開きます。
・上部の 「サイズ変更と傾斜」 をクリックします。
・「ピクセル」を選択して「水平」側の値を修正します。
今回は指摘通り 375 にします。
また、「垂直」側は自動的に入力されます。
※「垂直」側を手動で修正したい場合は、間にあるリンクのアイコンを押すと手動で入力できるようになります。
あとは保存し、再度サイトにアップロードすればOkです。
４．画像変更前後の PageSpeed Insight の比較
最後に画像の変更前後で PageSpeed Insight のスコアや指摘事項が変わるかどうかを確認してみます。
4-1. 画像変更前の PageSpeed Insight の評価
画像を変更する前の状態では以下のスコアでした。
また、 指摘箇所として「画像配信を改善する」も １．PageSpeed Insights で「画像配信を改善する」と表示される の画像のようになっており、画像のサイズがあっていないことに対して指摘されています。
4-2. 画像変更後の PageSpeed Insight の評価
次に画像変更後のスコアを確認します。
変更後のスコアは以下のようになりました。
※全体スコアが高かったのはたまたま気もします。
また、「画像配信を改善する」の指摘自体がなくなっていることが確認できました。
４．まとめ
PageSpeed Insights で、以下のように表示された場合は、画像が実際の表示サイズに対して大きすぎている可能性が高いです。
画像配信を改善する ー 推定される削減サイズ ○○ KiB
解決方法としては、対象の画像サイズをペイントアプリで修正し、再度アップロードすることが有効です。
こうすることで、PageSpeed Insights 「画像配信を改善する」の指摘事項がなくなります。