リソース · 39
フィールドデータでコアWebバイタルを診断する
修正前に、LCP、INP、CLSを実際の要素とインタラクションに結び付ける。
更新済み · 3 min
このガイドが達成するのに役立つこと
- 比較可能なセグメントを選択する
- 要素またはアクションを特定する
- 再現する
- 変更を確認する
クイックチェック
- 信号は現場からのものか、ラボからのものか？
- 測定対象となるデバイスとページはどれか？
- LCPはどの要素か？
- INPに寄与するアクションはどれか？
- レイアウトを変更する追加要素はどれか？
手順
- 1
母集団を定義する
比較前にページ、テンプレート、デバイス、期間、ジャーニーを分離する。 トラフィックまたはコンテンツの範囲と変更を記録する。
成果物：測定範囲と制限。
- 2
主要な症状を特定する
LCP、INP、CLSをそれぞれ異なるエクスペリエンスとして扱います。 サイト全体の平均値ではなく、それぞれの分布を検証します。
成果物：優先順位付けされた影響を受けるセグメント。
- 3
実際のコンテンツと関連付けます。
LCPについては、要素とネットワークまたはレンダリングの遅延を特定します。 CLSについては、要素のシフトを特定します。 INPについては、インタラクションとメインスレッドの処理を特定します。
成果物：トレース付きの要素とアクション。
- 4
ラボで再現します。
影響を受ける状況に近いシナリオを構築します。 ラボの出力を現場の証拠として扱わずに、開発者ツールを使用して仮説を検証します。
成果物：再現手順と考えられる原因。
- 5
原因を修正します。
証拠に基づいて、リソースの優先順位付け、ディメンションの確保、またはブロッキング作業の削減を行います。 機能およびアクセシビリティの回帰テストも実施します。
成果物：対象を絞った変更とローカル比較。
- 6
リリース後のフォローアップ
同一ページ、デバイス、適切な期間を比較する。 サンプル制限と母集団の変化を文書化する。
成果物：現場でのフォローアップと次の決定事項
管理指標
| 指標 | 測定対象 | 最初のアクション |
|---|---|---|
| LCP | 実際の移動における主要要素の表示 | 負荷とレンダリングの検査 |
| INP | 実際のインタラクションへの応答 | ブロッキング作業の削減 |
| CLS | レイアウトの安定性 | スペースの確保 |
| 網羅性 | 解釈可能なサンプルを含むセグメント | 測定範囲の拡張 |
よくある間違い
- 1つのLighthouseスコアから現場の経験を推測する
- モバイルとデスクトップの混在
- 要素の位置を特定せずに平均値を最適化する
- トラフィックの変化に関わらず修正をクレジットする
よくある質問
ラボと現場の結果が異なるのはなぜか？
ネットワーク、デバイス、キャッシュ、コンテンツ、および実際の動作は、テストシナリオと異なる場合があります。
優れたLCPは優れたINPを保証するのでしょうか？
いいえ。読み込みとインタラクションの応答性は、異なる時点を測定します。
修正はいつ確認されますか？
ボリュームやその他の変化を考慮し、同等のセグメントで十分な比較を行った後。
公式参照文献
参照文献はメソッドを裏付けるものです。 チェックは状況に合わせて調整してください。 これらは認証ではありません。 元の参照文献のタイトルやソース文書は別の言語で書かれている場合があります。
