コア Web バイタルを監視する方法: Web チーム向け完全ガイド

Core Web Vitals は、Web ページの実際のユーザー エクスペリエンスを評価するために Google によって確立されたユーザー中心のパフォーマンス指標の標準化されたセットです。

この包括的なガイドでは、エンジニアリング、DevOps、SEO チームが合成ラボ環境と実際のユーザーのフィールド データセット全体で Core Web Vitals の自動継続モニタリングを設定する方法について説明します。

回答優先のまとめ

Core Web Vitals をモニタリングするには、合成 Lighthouse ラボ監査 (CI/CD 中の再現可能な回帰テスト用) と、Chrome UX レポート (CrUX) からの実ユーザー フィールド データを組み合わせて、実デバイス全体の 75 パーセンタイル評価を行う必要があります。3 つの指標は、最大コンテンツフル ペイント ($\le 2.5\text {s} $)、次のペイントへのインタラクション ($\le 200\text {ms} $)、および累積レイアウト シフト ($\le 0.1$) です。SimpleOps のような自動化されたプラットフォームは、ラボとフィールドの両方のメトリクスを追跡し、75 パーセンタイルのメトリクスがパフォーマンス バジェットを超えた場合に、Slack、Telegram、または Webhook 経由でアラートを送信します。

3 つの主要な Web Vitals 指標の説明

Google は、次の 3 つの主要な指標に基づいてウェブサイトのパフォーマンスを評価します。

1. 最大コンテンツフル ペイント (LCP): メイン ヒーロー コンテンツまたは最大の画像/テキスト ブロックがビューポートでレンダリングを終了するタイミングによって、知覚されるページの読み込み速度を測定します。ターゲット: $\le 2.5\text {s} $。
2. Interaction to Next Paint (INP): ページ訪問中のユーザーのクリック、タップ、およびキー入力の待ち時間を追跡することにより、インターフェイス全体の応答性を測定します。ターゲット: $\le 200\text {ms} $。
3. 累積レイアウト シフト (CLS): ページのレンダリング中に予期しないレイアウトの動きを計算することで、視覚的な安定性を測定します。ターゲット: $\le 0.1$。

ラボ データとフィールド データ: デュアルエンジン アプローチ

効果的な Core Web Vitals モニタリングには、ラボ (合成) データと現場 (実際のユーザー) データの両方が必要です。

1. 合成ラボデータ (Lighthouse Audits)

ラボ データは、エミュレートされたモバイル ネットワークと CPU スロットルを備えた制御された環境で収集されます。ラボ テストでは、総ブロッキング時間 (TBT) や速度指数などの再現可能な診断メトリクスが提供されるため、運用前の CI/CD 回帰テストに最適です。

2. 実際のユーザーのフィールドデータ (CrUX 統合)

フィールド データは、何千ものハードウェア デバイス、オペレーティング システム、ネットワーク接続にわたる実際のユーザー エクスペリエンスを測定します。Google は、75 パーセンタイルの CrUX フィールド データを使用して、検索エンジンのランキング シグナルを決定します。

各指標の詳細な内訳

1. 最大のコンテンツフル ペイント (LCP)

LCP は、初期ビューポート内の最大の表示要素が画面上にペイントされるまでに必要な時間を評価します。対象となる要素には、 <img> タグ、 <svg> 画像ラッパー、ビデオ ポスター フレーム、CSS url() 経由でロードされた背景画像、およびブロックレベルのテキスト コンテナーが含まれます。LCP レイテンシは 4 つのサブ部分で構成されます。

• 最初のバイトまでの時間 (TTFB): サーバー処理とネットワーク配信期間。
• リソース読み込み遅延: ブラウザーが LCP 画像 URL を検出するまでの経過時間。
• リソース読み込み期間: LCP アセットのネットワーク ダウンロード期間。
• 要素のレンダリング遅延: レイアウト計算とピクセル ペイントに必要な時間。

2. 次のペイントへのインタラクション (INP)

INP は、セッション中のすべての個別のユーザー操作 (マウスのクリック、タッチスクリーンのタップ、キーボードの押下) にわたる UI の応答性を測定します。INP レイテンシは 3 つのフェーズで構成されます。

• 入力遅延: イベント リスナーが実行される前に、メインスレッド CPU タスクがクリアされるのを待機する遅延。
• 処理時間: JavaScript イベント ハンドラーの実行時間。
• プレゼンテーション遅延: フレーム計算、スタイルの再計算、およびディスプレイ ハードウェア ペイントの継続時間。

3. 累積レイアウトシフト (CLS)

CLS は、ページ読み込み中の予期しないレイアウトの変化を追跡することで、視覚的な安定性を測定します。レイアウトのシフトは、事前のユーザー操作なしに、表示されている DOM 要素があるフレームから次のフレームに開始位置を変更するたびに発生します。CLS スコアは、衝撃率と距離率を乗算して計算されます。

よくある落とし穴と診断のトラブルシューティング

エンジニアリング チームは、フロントエンド実装の微妙な問題によって引き起こされるパフォーマンスの低下に頻繁に遭遇します。

1. ヒーロー画像の遅延読み込み: loading="lazy" をヒーロー バナー画像に適用すると、リソースの検出が遅れ、LCP が悪化します。代わりに、LCP アセットでは常に fetchpriority="high" を使用してください。
2. サイズ変更されていない動的画像と広告: 明示的な width および height CSS 属性を指定せずに動的バナー広告または Web 画像を挿入すると、レイアウトが変更され、CLS スコアが上昇します。
3. 重い同期イベント リスナー: scroll または keyup リスナー内で負荷の高い計算を実行すると、メイン スレッドがブロックされ、INP が低下します。

段階的な実装ワークフロー

アプリケーションの自動 Web Vitals 監視を確立するには、次の手順を実行します。

1. ベースライン目標の定義: 最大許容しきい値を設定します (例: LCP $\le 2.2\text {s} $、INP $\le 180\text {ms} $、CLS $\le 0.05$)。
2. 合成監査の構成: グローバル ワーカー ノードから SimpleOps で自動化された 1 時間ごとの Lighthouse 監査をスケジュールします。
3. CrUX フィールド同期を接続: 登録されたドメイン プロファイルの毎日の CrUX フィールド データセット同期を有効にします。
4. マルチチャネル アラートの設定: 75 パーセンタイル メトリクスがパフォーマンス バジェットを超過した場合、アラートを Slack、Telegram、または Webhook にルーティングします。
5. CI/CD パフォーマンス ゲートの確立: プル リクエスト パイプラインで自動合成監査を実行し、マージ前に回帰を防止します。

SimpleOps による自動 Web Vitals モニタリング

SimpleOps は、合成ラボ監査と CrUX フィールド データセットの追跡を 1 つの直観的なダッシュボードに統合し、75 パーセンタイルのユーザー指標がパフォーマンス バジェットを違反するたびにチームに警告を発し、検索ランキングとコンバージョン率を保護します。