Core Web VitalsとLCPのための画像最適化

Webページの容量で最大の割合を占めるのは、たいてい画像です。表示速度はユーザー体験と検索順位の両方に直接影響するため、画像最適化はサイトで最も効果の大きい施策のひとつ。GoogleはこれをCore Web Vitalsで測定し、画像はそのうち2つの指標の中心にいます。

画像がCore Web Vitalsに与える影響

LCP(Largest Contentful Paint)は画面内で最大の要素が描画されるまでの時間です。多くのページでその要素はヒーロー画像や大きな写真なので、重く遅い画像はLCPをそのまま押し上げます。目標は2.5秒以内です。

CLS(Cumulative Layout Shift)は読み込み中にコンテンツが予期せず動く度合いです。画像にサイズ指定がないとブラウザが場所を確保できず、画像が届いた瞬間に周囲がずれます。どちらも数個のテクニックで解決できます。

JPEG・PNGをWebP・AVIFに替えると、同じ画質で容量を25〜50%削減できることが珍しくありません。ファイルが小さいほどダウンロードが速くなり、LCPが直接下がります。Scrunchのようにフォルダごと一括変換すれば、サイト全体へ最速で適用できます。

よくある失敗が、4000ピクセルの写真を800ピクセルの枠に表示することです。ブラウザは元のファイルを丸ごとダウンロードします。実際の表示サイズ程度(高密度・Retina用に約2倍まで)にリサイズすれば、削減効果は劇的です。

srcset属性を使うと、ブラウザが画面ごとに適切な画像を選びます。スマホにデスクトップ用ヒーロー画像をダウンロードさせてはいけません。数種類の幅を用意すれば小さい画面には小さいファイルが届き、モバイルのCore Web Vitalsに特に効きます。

スクロール下の画像にloading="lazy"を付ければ必要になるまで読み込みが延期され、帯域を節約できます。一方、ページ上部のLCP画像は即時読み込みすべきで、できればfetchpriority="high"で最速表示させましょう。

画像には必ずwidth・height属性(またはCSSのaspect-ratio)を指定してください。読み込み前に正しいスペースが確保され、CLSを悪化させるズレがなくなります。

形式とサイズが基本です。まずそこから。Scrunchは変換・圧縮の工程をブラウザ内で複数枚まとめて処理します。