用語解説

LCPとは?HTML共有・AI生成サイトでの意味をやさしく解説

「ページが重い」という感覚を数値で表すGoogleの指標のひとつがLCPです。AI生成サイトを共有URLで配布する際、LCPが悪いとGoogleの評価が下がるだけでなく、受け取った相手の第一印象にも直結します。LCPの意味と、HTMLを共有する前に自分でできる改善確認を整理します。

ひとことで言うと

LCP(Largest Contentful Paint)とはページを開いてからビューポート内で最も大きい画像またはテキストブロックが描画されるまでの時間です。Googleはこの値が2.5秒以内を「良好」、4秒以上を「改善が必要」と定義しており、検索順位にも影響します。

AI生成サイトのLCPを測定するには、Chromeでページをシークレットモードで開き、DevToolsのLighthouseタブでPageSpeed診断を実行します。「Largest Contentful Paint」の数値と、どの要素がLCP要素かが表示されます。スコアが低い場合はその要素を改善対象として特定できます。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

HTML共有で関係する場面

ギガサイト便で公開したHTML紹介ページをGoogle Search Consoleで計測すると、LCPスコアが外部配布後に変わることがあります。原因はCDNのキャッシュ状態や閲覧者の回線速度など環境の差ですが、ファーストビューの画像をWebPに変換しpreloadを追加するだけでLCPが改善するケースが多いです。

パスワード付きURLで社内に共有したページのLCPが遅い場合、認証の確認時間がLCPに加算されることはありません。LCPはDOMコンテンツの描画速度を計測するため、ページのHTML自体の最適化が重要です。ロゴ画像や見出し部分のHTMLにpreloadを追加することが直接的な改善手段になります。

よくある誤解

「LCPはサーバーが速くないと改善できない」という誤解があります。静的HTMLを配布する場合、サーバー応答時間よりもHTML内のリソース最適化の方がLCPへの影響が大きいです。Cloudflareなどのグローバルなエッジサーバーを使うサービス上では、むしろHTML内の画像最適化と読み込み順の調整が主な改善手段です。

「LCPの対象はいつも画像」と思いがちですが、テキストブロックがLCP要素になることもあります。ファーストビューにヒーロー画像がなくて大きな見出しテキストが最初に描画される構成では、そのテキストのフォントが早く表示されるかどうかがLCPを決めます。

安全に使うための注意点

LCPを改善するためにファーストビューの画像を極端に小さくすると、視覚的な品質が下がって信頼感に欠ける印象になることがあります。LCPの数値改善と表示品質のバランスを取るため、WebP変換で画質を維持しながらサイズを下げる方法を選んでください。画像の解像度を下げることとファイル形式を変えることは別の施策です。

LighthouseでLCPをローカル測定した場合、ネットワーク状況がシミュレーションされるため実際の共有先の環境と異なることがあります。Lighthouseはデフォルトで「低速モバイル回線」をシミュレートしており、実際のPC閲覧より厳しい数値が出ます。測定結果は相対的な改善確認に使い、数値の絶対値にこだわりすぎないことが重要です。

よくある質問

LCPが4秒を超えているのに、自分のPCでは普通に速く開けます。なぜですか?

Lighthouseは低速モバイル回線をシミュレートするため、自分のPC閲覧より遅い数値が出ます。また一度開いたページはブラウザがキャッシュするため2回目以降は速く見えます。シークレットモードで初回アクセスをシミュレートすることで実態に近い確認ができます。

AI生成HTMLのどこを直せばLCPが改善しますか?最初に確認すべき箇所はどこですか?

LighthouseでLCP要素が画像と判定された場合、まずその画像をWebP化しheadにpreloadを追加します。LCP要素がテキストならGoogleフォントへのpreconnectとfont-display: swapの設定を確認するのが最初のステップです。

共有URLをGoogleのPageSpeed Insightsで計測したいのですが、パスワード付きURLは計測できますか?

パスワードで保護されたURLはPageSpeed Insightsの外部計測では認証が通らないため計測できません。パスワードなしの一時公開URLを作成するか、Lighthouseをローカルで実行することで代替計測が可能です。

関連記事

「用語解説」の記事をもっと見る →