LCP (Largest Contentful Paint) について

Page Speed Insights 対策の一環．他の対策は以下を見てください．

• Youtube の動画を複数埋め込みしたページの高速化
• オフスクリーン画像の遅延読み込み
• ウェブフォント読み込み中の全テキストの表示
• 次世代フォーマットでの画像の配信
• 「第三者コードの影響を抑えてください」と言われたとき
• CLS (Cumulative Layout Shift) について

LCPとは(最大コンテンツの描画とは)

Page Speed Insights に出てくる Largest Contentful Paint

解説ページである Web Vitals を見てみると

Largest Contentful Paint は同じページの下に日本語訳が表示されているが，「最大コンテンツの描画」のこと．

Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

要は「ページが最初にロードを開始してから 2.5秒以内にLCPが発生する必要があります。」ということ．

LCP の確認の仕方

Chrome の開発者ツールで LCP が発生するタイミングとその LCP として選ばれた要素が確認が出来るようになっている．

開発者ツールにある「Performance」タブを選択し，左から2番目の「更新ボタン」を押すと計測が開始される．

LCP の部分をクリックするとどの要素だったかが分かる．下のページの場合は上部のバナーの部分となる．
これが表示されるまでにどれだけかかったか(図では550msぐらい)であり，この時間が2.5秒以内であるべきだということである．

largest contentful paint 改善

LCP の先(左)に来ているものをもっと左にやって並列で読み込ませるか，もしくは後ろ(右)に持っていくかして，LCP の場所を左に移せば LCP の数字は下がることになる．

最も簡単なのはLCPの左側で読み込んでいる画像のサイズを減らすことである．
画質を落とすとか画像を使わないようにする．

javascript は後ろで読み込んでよいものは後ろに回すとよい．