LCP: ビッグビジュアル

画像最適化における LCP の焦点

多くのサイトでは、通常、LCP 要素がメイン画像 (ヒーロー画像) です。この画像の読み込みが遅い場合は、Google の目から見てサイトの速度が遅いことを意味します。 LCP スコアの改善は、ユーザー エクスペリエンスと検索ランキングの両方に直接影響します。

LCP 改善戦略

• プリロード: を使用して、メインの LCP 画像をブラウザに早期に宣言します。
• 最新の形式: 代わりに WebP または AVIF を使用することで、品質を損なうことなく 50 ～ 70% を節約できます。 JPG
• レスポンシブ画像:srcset と sizes を使用して、モバイル ユーザーへの巨大なデスクトップ画像の送信を停止します。
• CDN の使用: エッジ サーバーから画像を提供することで、物理的な距離によって生じる遅延を軽減します。

優先フェッチ機能

HTML5 に付属する fetchpriority="high" 属性を LCP 画像に追加すると、ブラウザがこのリソースを優先するようになります。この機能は Chrome 101 以降のバージョンでサポートされています。

遅延読み込みに関する注意

loading="lazy" を LCP イメージに追加しないでください。これにより、画像の読み込みが遅れ、LCP スコアが悪化します。遅延読み込みは、スクロールせずに見える画像にのみ使用してください。