LCP (Largest Contentful Paint) について

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

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

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秒以内であるべきだということである．

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