LCP (Largest Contentful Paint) について

最終更新日:2022年06月09日公開日:2020年6月4日 2020年06月

1. LCPとは(最大コンテンツの描画とは)
2. LCP の確認の仕方
3. largest contentful paint 改善
- 3.1. なんだかんだ言っても画像
4. LCP FAQ
5. PageSpeed Insights 対策

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

PageSpeed Insights に出てくる Largest Contentful Paint
originsummary

解説ページである 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番目の「更新ボタン」を押すと計測が開始される．

performance

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

largest contentful paint 改善

どうすれば改善されるかだが，要は最大コンテンツの描画が終わるまでにかかる時間を早くすることである．

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

なんだかんだ言っても画像

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

あと，これは灯台下暗しなのだが，そもそもその最大コンテンツが画像だった場合，その画像のサイズを減らすことが一番簡単に LCP の秒数を減らす方法になる．
もちろん，この最大コンテンツの画像も LCP のマークの左側に来ているのですぐ分かるはずだ．

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

performance LCP

LCP FAQ

LCPとは何ですか？

ページに表示される最大のコンテンツ(エリア)のことです．

どうすれば LCP の数値を改善できますか？

方法は一つではないですが，画像のサイズ(バイト数)を減らすことが最も簡単です．

PageSpeed Insights 対策

PageSpeed Insights 対策の一覧．他の対策は以下を見てください．