画像はたいていページ上で最も重いバイト数なので、その最適化は最大のLCP改善策です。3つのレバーがあります。モダンフォーマット、レスポンシブなサイズ指定、読み込みの優先度です。
モダンフォーマット: AVIF / WebP
AVIFとWebPは、同じ品質でJPEG/PNGよりはるかに小さく圧縮します（AVIFはしばしばJPEGより50%小さい）。古いブラウザでも動くようフォールバック付きで配信します:
html
画像はたいていページ上で最も重いバイト数なので、その最適化は最大のLCP改善策です。3つのレバーがあります。モダンフォーマット、レスポンシブなサイズ指定、読み込みの優先度です。
AVIFとWebPは、同じ品質でJPEG/PNGよりはるかに小さく圧縮します（AVIFはしばしばJPEGより50%小さい）。古いブラウザでも動くようフォールバック付きで配信します:
2000pxの画像を400pxのスマホに送ってはいけません。srcset により、ブラウザがデバイスに合った適切なサイズを選べます:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes は画像がどれだけの幅で描画されるかをブラウザに伝え、十分な中で最も小さいソースを選べるようにします。
fetchpriority="high"、loading="eager"、そして preload の検討。loading="lazy" で、必要になるまで取得されないようにします。CLSを防ぐため、width/height は常に付けてください。
遅いLCPは、たいてい単に大きすぎるヒーロー画像です。フォーマット（AVIF/WebP）、適切な解像度のための srcset、正しい優先度 — そしてLCP画像を遅延読み込みしないこと — を知っていることは、面接官が期待する実践的な道具立てであり、実際のサイトではたいてい最も効果の高い単一の変更です。
ジュニアからシニアまで、詳細な回答付きのIT面接質問ライブラリ。
寄付する