PageSpeed改善で、ブログ画像の役割を分けることにした

Thu, 07 May 2026 22:30:00 +0900

点数は出たけど、何が起きたのかわからなかった

PageSpeed Insights は、GoogleがWebページの読み込み速度を100点満点で評価してくれる無料ツールです。スマホでの表示速度（モバイル）とパソコンでの表示速度（デスクトップ）を別々に測定してくれます。

昔々、ブックマークに入れていたものを掘り起こしたわけですね。

このブログのモバイル版を測定したら、こんな数字が出ました。

LCP（Largest Contentful Paint）は、ページを開いてから「一番大きなコンテンツ」が表示されるまでの時間です。175秒というのは、ほぼ「ページが完成しない」という意味になります。

パフォーマンス67という点数は見れば悪いとわかりますが、最初は何を直せばいいのかよくわかりませんでした。

調べてみると、原因はサーバーの遅さでも、JavaScriptのブロックでもありませんでした。トップページが大量の画像を読み込んでいたのが問題でした。

サーバー応答は速かったです。JavaScriptのブロックも致命的ではありませんでした。大きかったのは、ひたすら画像でした。

トップページには最新記事のカードが並んでいます。各カードには記事のアイキャッチ画像が表示されます。見た目は小さなサムネイルですが、裏では5MB前後のPNGファイルをそのまま読み込んでいました。カードが10枚あれば、それだけで50MB近くになります。

小さく表示しているから軽い、とは限らない。

ブラウザは width を小さく指定されても、画像ファイルのサイズは変わりません。表示を縮小しているだけで、5MBのPNGは5MBのまま読み込まれます。

最初に手をつけたのは、ヒーロー背景画像でした。

ヘッダーに使っている hero-background.jpg が約7.6〜7.9MBありました。見た目はきれいですが、7MBは明らかに過剰です。

これをWebP（ウェブピー）形式に変換しました。WebPはGoogleが開発した画像フォーマットで、JPEGやPNGより同じ見た目で大幅にファイルサイズを小さくできます。変換後は約283KBになりました。同じ見た目で、ファイルサイズが約1/27になる計算です。

background-image: url('/images/hero-background.webp');

背景画像の変換を含むいくつかの修正をまとめてデプロイしたあと、この段階で計測し直しました。

LCPは大きく改善しました。ただ、ペイロード（ページ読み込みに必要なデータの総量）はまだ32MBあります。トップページの記事カード画像がほぼそのまま残っていたからです。

背景画像の変換と並行して、記事カードのテンプレートに loading="lazy" と decoding="async" も加えました。

<img
  src="{{ .Permalink }}"
  loading="lazy"
  decoding="async"
  width="760"
  height="424"
/>

それぞれの意味はこうです。