CWVのLCP最適化、あなたの対策は間違ってる！？

CWVのLCP最適化、あなたの対策は間違ってる！？【SEO情報まとめ】[Web担当者Forum]

「LCP（Largest Contentful Paint、CWVの要素の1つ）を改善する主な方法は画像の最適化（サイズの削減）である」

こうした従来からの考え方にグーグルの開発者向けブログが疑問を呈した。画像の最適化は確かに有効だが、Chromeユーザーエクスペリエンスのフィールドデータによると、画像のダウンロード時間がLCPパフォーマンスのボトルネックになることはほとんどないそうなのだ。

記事では、LCPの次の4つのサブパートについて分析した結果を示している：

●サーバーからのデータ受け取り開始遅延 ―― ブラウザがHTMLドキュメントの最初のバイトを受信するまでにかかる時間。いわゆるTime to First Byte（TTFB）
●リソース読み込みの遅延 ―― LCPリソースの読み込み開始の前の時間（HTML解釈＋外部スタイルシートの読み込みなど）
●リソースのダウンロード時間 ―― LCPリソース（画像など）の読み込みにかかる時間（要は画像ダウンロード）
●要素レンダリングの遅延 ―― LCPリソース（画像など）をブラウザが読み込んで内容を解釈し、表示できるようにするまでの時間

次のような発見があったという：

●リソースのダウンロード時間 ―― 一般的なアドバイスとは異なり、画像リソースのダウンロード時間（サーバーからブラウザへの転送にかかる時間）がLCPのボトルネックにはなることは、めったにない。LCPの悪いサイトであっても、画像のダウンロードにかかっている時間はLCP時間の10%未満。

●Time to First Byte (TTFB) ―― 「LCPが良好なサイト」と「LCPが良くないサイト」の間で大きな違いがあったのは、TTFBだった。つまり、ページ自体のHTMLをサーバーが返す時間のほうが、LCPへの影響が大きかったのだ。

LCPが良くないサイトでは、中央値75パーセンタイルのTTFBが2,270ミリ秒であり、これだけでLCPのパフォーマンスが悪くなることがほぼ確実だった。

●リソース読み込みの遅延 ―― LCPが良くない場合に見過ごされがちな原因の1つとして、この遅延もあった。ページ全体のJavaScriptやCSSを読み込んで処理するのに時間がかかりすぎていると、LCPに影響が大きいということだ。

LCPの悪いサイトの中央値は、LCP画像のダウンロードを開始するまでの待機時間が、実際のダウンロード時間の約4倍も長くなっていた。

●要素レンダリングの遅延 ―― 典型的なサイトでは最適化の余地をさほど示していないが、他のサブパートを最適化する際に意図せず発生することがある。

分析に基づいて、LCPの改善策として次の対応を提案している：

●TTFBの削減 ―― TTFBは、ネットワーク遅延やサーバー応答時間などの要因に影響されるが、改善する価値が大きい（LCPスコアが良いサイトと悪いサイトとの間でTTFBがいかに違うかを見れば、その重要性がわかる）。

TTFBの短縮に役立つ手法としては、CDNの活用、サーバーの強化、サーバー側でのキャッシュ強化などがある。

●リソース読み込み遅延の最小化 ―― リソース読み込みの遅延、つまりブラウザがLCP画像のダウンロードを開始する前に無駄になる時間は、しばしば見過ごされている。この遅延は、依存関係の連鎖やリソースの優先順位付けの非効率性によって引き起こされる可能性がある。

この遅延を最小限に抑えるのに役立つ手法としては、LCP画像のプリロードや、LCP画像にHTML上でfetchpriority=”high”属性を付けるなどがある。LCP画像はlazyloadしないという選択も有用だ。

●要素レンダリング遅延の回避 ―― レンダリング遅延、つまりLCP画像の準備ができてから表示されるまでの時間は、通常は大きな問題ではない。しかし、最適化の努力によって、意図せずレンダリングの遅延が生じることがある。

サーバーサイドレンダリングや静的HTMLは、この問題を軽減する上で有利になる場合がある。
画像の最適化は有効だが、LCPを改善するための唯一の解決策ではない。最適なパフォーマンスを実現するためには、すべてのサブパートを考慮したLCP最適化への総合的なアプローチが不可欠だ。

LCPを要素とするコアウェブバイタルは、最近は語られる機会が減ってきたように思えるが、ユーザー体験の改善には依然として重要な指標だ。引き続き改善に取り組もう。

SEOコンサルタントのまとめ

【LCP最適化】[Web担当者Forum]
画像リソースのダウンロード時間（サーバーからブラウザへの転送にかかる時間）がLCPのボトルネックにはなることは、めったにない。LCPの悪いサイトであっても、画像のダウンロードにかかっている時間はLCP時間の10%未満。

【LCPの改善策】[Web担当者Forum]
●TTFBの削減
●リソース読み込み遅延の最小化
●要素レンダリング遅延の回避