概要
このスコアカード ルールは、Web ページの読み込みが遅すぎる場合を特定し、ユーザー エクスペリエンスやビジネス パフォーマンスに直接影響を与えます。 Largest Contentful Paint（LCP）は、ページのメインコンテンツがユーザーに表示されるまでの時間を測定し、Google ではこれをユーザー満足度と検索ランキングの両方にとって重要な要素とみなしています。
このルールは、LCP 測定の 75 番目のパーセンタイルが 2.5 秒を超えるとトリガーされ、ユーザー エクスペリエンスのかなりの部分でページの読み込みが遅いことを示します。 このルールを使用すると、パフォーマンスの問題を積極的に特定し、それがユーザー ベースに与える影響を理解し、ページの読み込み速度を体系的に改善することができます。
LCPがビジネスにとって重要な理由
ユーザー体験への影響:
- LCP が良好なページ (2.5 秒以下) はユーザーのエンゲージメントを維持し、直帰率を低下させます。
- コンテンツの読み込みが遅いと、ユーザーの不満やセッションの放棄につながります。
- 高速LCPはコンバージョン率とユーザー満足度の向上に貢献します
SEOと可視性:
- Googleは検索結果のランキング要素としてLCPを使用している
- LCPスコアが低いとオーガニック検索の可視性に悪影響を与える可能性がある
- Core Web Vitalsへの準拠は、競争力のある検索パフォーマンスに不可欠です。
パフォーマンス測定:
- LCP は合成テストではなく、実際のユーザー体験を表します
- 実用的なインサイトをコンテンツ配信の最適化に提供
- フロントエンドのパフォーマンス向上のためのデータドリブンの決定を可能にします
ルール定義
このスコアカード ルールは、Google のCore Web Vitals値に基づいて、ブラウザーの最大コンテンツフル ペイント (LCP) 測定値の 75 番目のパーセンタイルが 2.5 秒を超えているかどうかを評価します。
LCP測定基準
Google の公式 LCP 閾値:
- 良好: ≤2.5秒
- 改善が必要: 2.5～4.0秒
- 悪い: >4.0秒
LCP の測定対象: LCP は、最初のページの読み込み時にビューポートに表示される最大のコンテンツ要素の読み込み時間を識別します。この要素は通常次のようになります。
- 画像（背景画像を含む）
- ビデオポスター画像
- ブロックレベルのテキスト要素
- テキストノードを含むインラインテキスト要素
測定タイミング：
- ユーザーがページナビゲーションを開始したときに開始されます
- 最大のコンテンツ要素のレンダリングが終了したら終了します
- 大きな要素が読み込まれると動的に更新されます
- ユーザーがページを操作すると測定を停止します
LCP最適化の理解
LCP を改善するには、ページのメインコンテンツの読み込みとレンダリングの速度を最適化する必要があります。次の主要領域に焦点を当てます。
リソース読み込みの最適化
- 重要なリソースの優先順位付け: LCP 要素がページライフサイクルの早い段階で読み込まれるようにする
- リソースのヒント:重要なリソースを高速化するには、preload、preconnect、dns-prefetch を使用します。
- 効率的なリソース配信: LCPに貢献する画像、フォント、その他のアセットを最適化します。
サーバー応答の最適化
- サーバーのレスポンスタイムを短縮:最初のバイトまでの時間 (TTFB) を 600 ミリ秒未満に短縮
- キャッシュ戦略を実装する: CDNとブラウザキャッシュを使用してコンテンツをより速く配信する
- データベースクエリの最適化:動的コンテンツのバックエンド処理時間を短縮
レンダリングの最適化
- レンダリングをブロックするリソースを排除する:コンテンツのレンダリングを遅らせるCSSとJavaScriptを最小限に抑える
- クリティカルレンダリングパスの最適化:スクロールせずに見えるコンテンツのレンダリングを優先する
- レイアウトシフトを削減: LCPタイミング精度を維持するために安定したレンダリングを確保します。
LCP パフォーマンスを向上させる方法
LCP スコアが読み込みパフォーマンスが低いことを示している場合は、次の最適化手順に従ってください。
1. LCP要素を特定する
- New Relicブラウザ監視を使用して、どの要素がさまざまなページ間でLCPの遅延を引き起こしているのかを特定します
- デバイスの種類、接続速度、地理的位置別にLCP パターンを分析する
- Chrome DevTools で、どの要素が LCP 候補として識別されているかを確認します。
- 最も LCP パフォーマンスが低いトラフィックの多いページを優先してすぐに対応します。
2. 画像とメディアを最適化する
画像の最適化:
- フォールバック付きの最新の画像フォーマット（WebP、AVIF）を使用する
- srcset 属性と sizes 属性を使用してレスポンシブ画像を実装する
- 画質を犠牲にせずに画像を圧縮する
- 不要な拡大縮小を避けるために適切な画像サイズを使用する
遅延読み込み戦略:
- LCP候補となる可能性のあるスクロールせずに見える画像の遅延読み込みを避ける
- スクロールしないコンテンツにはネイティブの遅延読み込みを使用する
- カスタム遅延読み込みソリューション用の交差オブザーバーを実装する
コンテンツ配信:
- CDNを使用して、より高速なグローバル画像配信を実現
- 画像最適化サービスを実装する（New Relic のパートナー ソリューションなど）
- 大きな画像にはプログレッシブJPEGを検討してください
- 動画ポスター画像とサムネイルを最適化する
3. サーバーとネットワークのパフォーマンスを最適化する
サーバー側の最適化:
- サーバーのパフォーマンスチューニングにより、最初のバイトまでの時間 (TTFB) を短縮します。
- 複数のレベルで効率的なキャッシュ戦略を実装する
- テキストベースのリソースには圧縮（gzip、Brotli）を使用する
- データベース書き込みとAPI応答時間を最適化する
ネットワーク最適化:
- 多重化を改善するには、HTTP/2 または HTTP/3 を使用します。
- フェッチ優先度ヒントを使用してリソースの優先順位付けを実装する
- コンテンツの読み込みを遅らせるリダイレクトを最小限に抑える
- 重要なリソースをホストする外部ドメインには事前接続を使用する
4. レンダリングを妨げるリソースを排除する
CSSの最適化:
- スクロールせずに見えるコンテンツのためのインラインの重要な CSS
- メディアクエリを使用して、重要でない CSS を非同期に読み込む
- CSSファイルを最小化して圧縮する
- 未使用のCSSルールを削除する
JavaScript の最適化:
- 重要でないJavaScriptの実行を延期する
- コード分割を使用して必要なスクリプトのみをロードする
- 適切なスクリプト読み込み戦略を実装する（非同期/遅延）
- 最初のページ読み込み時のJavaScript実行を最小限に抑える
5. パフォーマンス監視を実装する
リアルユーザー監視:
- New Relic Browserを使用して LCP パフォーマンスを継続的に追跡する
- LCP劣化のアラートを設定する
- さまざまなユーザーセグメントとデバイスにわたるLCPを監視
- LCP とビジネス メトリクスの相関関係を追跡する
パフォーマンステスト:
- CI/CDパイプラインに自動パフォーマンステストを実装
- 外形監視を使用してリグレッションを早期に発見する
- さまざまなデバイスとネットワーク条件でテストする
- A/Bテストで最適化を検証する
実装ガイダンス
LCP監視の設定
- Core Web Vitals収集を有効にしてNew Relicブラウザ監視を設定する
- 主要なページとユーザーセグメント全体でベースライン測定を確立する
- LCP ダッシュボードをセットアップしてパフォーマンスの傾向を追跡し、問題領域を特定します
- ユーザー体験の目標に合わせた LCP 劣化のアラートを作成する
実用的なアラートの作成
LCP パフォーマンスに関する意味のあるアラートを設定します。
- Good閾値： 75番目のパーセンタイルが2.5秒を超えた場合
- Poor 閾値: 75 パーセンタイルが 4.0 秒を超えた場合の重大なアラート
- 傾向監視:前週比の大幅な悪化に関する集計
- セグメント固有のアラート:モバイル、デスクトップ、および地理的なパフォーマンスを個別に監視
最適化ワークフローの構築
- 定期的なパフォーマンスレビュー: LCPデータの月次評価をスケジュールする
- 優先順位付けフレームワーク: LCPスコアが低いトラフィックの多いページに重点を置く
- テストプロトコル:最適化の変更のためのA/Bテストを実装する
- チーム間のコラボレーション:エンジニアリングのエスカレーションと解決のための明確なプロセスを確立する
重要な考慮事項
カスタム評価:これらのガイドラインは強固な基盤を提供しますが、Web サイトはそれぞれ異なります。LCP ターゲットを設定するときは、特定のユーザー ベース、コンテンツ タイプ、ビジネス目標を考慮してください。一般的なユーザーデバイス、ネットワーク状況、重要なユーザージャーニーを考慮します。
全体的な最適化: LCP は、包括的なパフォーマンス戦略の一部として使用すると最も効果的に機能します。LCP の改善と他のCore Web Vitals (CLS および INP) のバランスをとり、最適化が他のユーザー体験メトリクスに悪影響を及ぼさないようにします。
継続的な監視: Web パフォーマンスは動的です。ユーザーの行動、コンテンツの変更、外部依存関係は、時間の経過とともに LCP に影響を及ぼす可能性があります。継続的な監視を維持し、必要に応じて最適化戦略を調整する準備をしてください。
次のステップ
このスコアカード ルールを実装すると次のようになります。
- Cumulative Layout Shift (CLS) および インタラクションから Next Paint (INP) ルールを 実装してCore Web Vitals 監視を完了します
- JavaScript エラー追跡を調べて、ページの読み込みに影響する問題を特定します
- 包括的なフロントエンド監視のためのAJAX パフォーマンス監視の実装
- 体系的なデジタルエクスペリエンスの最適化のためのエクスペリエンス実装ロードマップを確認する