Webサイトの表示速度を測る指標の中でも、ユーザー体験に直結するのが「LCP（Largest Contentful Paint）」です。
本記事では、現状を正しく測定・把握し、LCPを改善するための具体的な手順を解説します。
LCPの問題の概要については、以下の記事をご覧ください。
主要AIプラットフォームの仕組みの違いを整理したうえで、AIOの現実的な目標設計、SEOとの両立戦略、そしてAI時代の「目的検索」に対応するための情報戦略とコンテンツ設計の具体策を解説します。【無料】
LCP の確認方法
LCPを確認するには、Googleが提供する無料ツール「PageSpeed Insights」にアクセスして計測対象のURLを入力します。
弊社が運営するレンタサイクル事業「RIDEAWAY」のサイトを例に見てみましょう。
まず注目すべきは、ページ上部に表示される「実際のユーザーの環境で評価した結果」です。
LCP の確認方法
LCPを確認するには、Googleが提供する無料ツール「PageSpeed Insights」にアクセスして計測対象のURLを入力します。
弊社が運営するレンタサイクル事業「RIDEAWAY」のサイトを例に見てみましょう。
まず注目すべきは、ページ上部に表示される「実際のユーザーの環境で評価した結果」です。
2.5秒以内が「良好」とされるため、現在はギリギリ合格ラインにいることがわかります。
Googleの評価基準である「2.5秒以下」をクリアしていれば、その時点でSEOとしての足切りラインは突破しています。1.5秒を1.2秒にするために数日間の工数をかけることは無理に必要ありません。
逆に、「4.0秒（不良）」を超えている場合は、「ユーザーが情報を得る前に離脱してしまうサイト」になっている証拠です。SEO以前に「使いにくいサイト」になっているため、早急な対策しましょう。
LCP要素の正体を特定する
次に、ページをスクロールして「診断」セクションにある「最大コンテンツの描画要素」を確認します。ここでは、Googleが「このページのLCP」として認識している要素が表示されます。
今回の例では、ファーストビューの背景にあるスライダー画像がLCP要素として特定されました。まずは「何がLCPになっているか」を正しく認識することが改善の第一歩です。
LCPを改善する5つのステップ
PageSpeed InsightsでLCPの原因を特定したら、以下の5つのアプローチで改善を図ります。特に最初の3つは、最小の工数で効果が期待できる対策です。
画像サイズの調整とAVIF形式への変換
最大コンテンツが画像の場合は、削減する余地がないか検討してみましょう。素材そのままの異常にサイズが大きい画像が使われているケースなどがあるためです。以下の2つの項目をチェックしましょう。
適切なリサイズをする
モバイルユーザーにPC用の巨大な画像を表示させないよう、表示サイズに合わせた画像を配信します。
AVIF/WebPの採用する
従来のJPEGから次世代形式のAVIFに変更するだけで、画質を維持したまま容量を50%以上削減できるケースが多々あります。
リソースの優先度を最適化する（fetchpriority）
画像は軽いはずなのに表示が遅い場合、ブラウザの「順番待ち」が原因です。その場合は、サイトを構成するHTMLコードに fetchpriority 属性を追記することで、そのリソースの優先度を上げることができます。
具体的には、LCPの対象となる画像のimg要素（画像タグ）に、以下のように記述します。
<img src="/path/to/hero-image.webp" fetchpriority="high" alt="メインビジュアル">このようにLCP要素に fetchpriority=”high” を追加することで、「この画像は最優先でダウンロードして！」とブラウザに伝えることができます。その結果、読み込み開始までの空白時間が大幅に短縮され、スコアの改善が期待できます。
メイン画像の「遅延読み込み（Lazy Load）」を解除
画面に映るまで画像の読み込みを待つ「Lazy Load（レイジーロード）」という機能が使われている場合があります。
ページを開いて一番最初に目に入る「メイン画像」にまでこの設定がついていると、ブラウザが「あ、この画像も後でいいんだな」と勘違いして、表示がワンテンポ遅れてしまいます。
そのため、メイン画像のHTMLから loading=”lazy” という文字を消すと、これだけで、ブラウザが即座に表示を開始してくれます。
ウェブフォントの表示遅延をなくす
おしゃれな「ウェブフォント」を使っている場合、そのフォントデータが届くまで、画面上の文字が一時的に「透明」になって消えてしまうことがあります。
文字が消えている間は「まだ表示されていない」と判定され、スコアが悪くなります。
対策として、CSSに font-display: swap と書き加えます。こうするとフォントの読み込み中も代替フォントでテキストを即座に表示させ、画面に何も出ない時間をゼロにできます。
レンダリングブロック（描画の邪魔）を排除する
LCP要素（メインコンテンツ）の描画が始まる前に、ブラウザが「読み込みを一時停止」してしまう状態をレンダリングブロックと呼びます。主に、LCP要素より前に記述されているJavaScriptやCSSが原因です。
以下の手法で読み込みのタイミングを制御し、初期描画を優先させる対策が一般的です。
JavaScriptの非同期読み込み（defer 属性）
HTML内のスクリプトにdefer属性を付与すると、HTML解析後に実行されるため、パース処理をブロックしません。
レンダリングブロックを招くCSSの整理
初回表示に必要なCSS（クリティカルCSS）のみを優先し、不要なCSSは分割・遅延読み込みすることで、ブラウザが早く描画できる環境を整えます。
HTMLソース全体を確認し、メインコンテンツの表示を邪魔している記述がないか精査することが、スコアを改善する鍵となります。
まとめ
LCPの改善は、単なるスコアアップではなく、ユーザーが「パッと表示される」と感じる心地よさにつながります。まずはPageSpeed Insightsで自社のLCP要素が何か、そしてどのフェーズがボトルネックになっているかを確認してみましょう。
弊社ではサーチコンソールとGA4データを1つにまとめて分析ができる「Webサイト分析ツール アナトミー」を提供しております。運用しているサイトのSEOチェックを行うのに必要な機能が揃ったダッシュボードプランは全て無料でずっとご利用いただけます。是非、アナトミーに無料登録してサイトのSEOチェックをしてみてください。
