LCP (Largest Contentful Paint) について

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

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

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

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

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

performance LCP

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
contact
無料ダウンロード中!
大好評の書籍はこちら
Pagetop