LCP (Largest Contentful Paint) について

最終更新日:2020年11月18日 公開日:2020年6月4日 2020年06月

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

largest contentful paint 改善

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

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

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

performance LCP

 タグ: ,  
 

Contact

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

 
Apache Chrome 拡張機能 CSS Git javascript Page Speed Insights python SEO Windows WordPress アナリティクス エディタ サーチコンソール サーバー管理 タグマネージャ テレワーク デザイン データベース ネットワーク マーケティング ログ解析 ローカル環境構築 営業
contact
無料ダウンロード中!
大好評の書籍はこちら
Pagetop