LCP(Largest Contentful Paint)
よみ: エルシーピー
Google が提唱する Web サイトの重要指標(Core Web Vitals)の一つです。ページの中で「最も面積の大きい要素(メイン画像や大きな見出しなど)」が、画面に表示され終わるまでの時間を測ります。これが遅いと、ユーザーは「ページがなかなか開かない(重い)」と体感し、離脱率の悪化に直結します。
判定基準(モバイル・PC 共通)
- 2.5 秒以内:良好(Good)
- 2.5 秒〜4.0 秒:改善が必要
- 4.0 秒以上:不良
実務における改善アプローチ
Web 担当者は自らコードを直すのではなく、以下の観点で制作会社や保守業者に改善を依頼・確認するのが現実的です。
- 画像の最適化:画像を次世代フォーマット(WebPなど)にして軽くする、画面サイズに応じた画像を出し分ける。
- サーバー周りの改善:サーバーのスペックを上げる、CDN(コンテンツ配信ネットワーク)を導入する、キャッシュを活用する。
- 読み込み順の最適化:外部ツール(アクセス解析やチャットツールなど)のプログラムを後回しにして読み込ませる。
よくある落とし穴(注意点)
- ファーストビューへの罠:画面に最初に出る一番大きな画像に「遅延読み込み(Lazy-load)」を設定してしまい、逆に LCP を遅らせてしまう。
- テストツールの影響:A/B テストツールなどを導入したことで、ページの描画がブロックされて表示が遅くなる。
- 数値の乖離:開発時のテスト数値(Lighthouse等のラボデータ)は良いのに、実際のユーザーの通信環境(CrUX という実データ)では遅いままになっている。
- 他指標の無視:LCP だけに気を取られ、他の重要指標(INP:操作への反応速度、CLS:レイアウトのズレ)を見落としてしまう。
言葉をよく利用する人
- コーダー / フロントエンドエンジニア
- インフラエンジニア
- SEO 担当者
- Web 担当者(発注側)
- デザイナー
会話上での使用例
業者から表示速度の改善提案を受ける場面
-
業者ディレクター
メインビジュアルの表示完了、いわゆる LCP が 4.2 秒です。CDN の導入と画像の WebP 化をおすすめします。
-
Web 担当者
画像の WebP 化はすぐ着手してください。CDN は月額と構築費の見積もりをいただけますか。導入後は二ヶ月ほど様子を見て、Search Console の実ユーザー値で 3 秒以内まで持っていく目標でいきましょう。
-
業者ディレクター
承知しました。まず画像から進めて、CDN の見積もりを今週中にお出しします。
メインビジュアルに動画を使いたいというデザイナーと相談する場面
-
デザイナー
トップのメインビジュアルに動画を使いたいんですが。
-
Web 担当者
そうすると LCP が悪化します。動画のファーストビューは離脱率も上がりがちなので、CV を優先するなら一枚目は静止画で、動画は後追いで再生する構成にしませんか。動画を見送るのも選択肢の一つとして並べて検討しましょう。
-
デザイナー
わかりました、静止画ベースで動画は後から、で詰めてみます。