Trusted by market leaders · Client results
メトリクス内訳ダッシュボードを理解する
LCPやINPのような複合メトリクスは、複数の異なるタイミングイベントを集約している。総合スコアを最適化するには、これらの基礎となるコンポーネントを分離する必要がある。メトリクス内訳ダッシュボードは、パフォーマンスを詳細なフェーズに分解し、特定のボトルネックを特定する。
このツールは、広範な最適化を正確なエンジニアリング目標に置き換える。レイテンシをサーバー、ネットワーク、またはクライアントの実行に起因するものとして特定する。
内訳ダッシュボードの構造
ダッシュボードは、レイテンシの根本原因を特定するために同期された3つのビューを提供する：
- Contribution Donut: 各サブパートの相対的な重みを視覚化する。「最大の要因は何か？」という問いに答えるものである。チャートの70%を`Time to First Byte`が占めている場合、バックエンドに関連する問題であることがわかる。
- Historical Timeline: 各コンポーネントの絶対値の経時的な傾向を示す。これを使用して、パフォーマンスの変動をデプロイメントなどの特定のイベントと関連付ける。
- Segmented Data Table: メトリクスをディメンション（URL、デバイスなど）ごとに分類する。各行には、そのセグメントの固有のプロファイルを示す分布バーが含まれており、外れ値の特定に役立つ。
LCPコンポーネント (Largest Contentful Paint)
LCPはロードパフォーマンスを測定する。このメトリクスは4つのフェーズに分割される：
- TTFB (Time to First Byte): サーバーの応答時間。TTFBが高い場合、データベースクエリが遅いか、エッジキャッシュが不足していることを示す。
- Load Delay: 最初のHTML応答とLCPリソースのダウンロード開始との間のギャップ。これはリソース発見のレイテンシを測定する。
- Load Time: ネットワーク経由でLCPアセット（画像やフォント）をダウンロードするのに必要な時間。これはファイルサイズと帯域幅に相関する。
- Render Delay: リソースのダウンロードが完了してから画面にペイントされるまでの時間。Render Delayが高い場合、多くはJavaScriptによるメインスレッドのブロックを示している。
TTFBコンポーネント (Time to First Byte)
TTFBはサーバーの応答性の指標として機能する。この内訳はネットワーク接続のフェーズを分離する：
- Waiting: ブラウザがサーバーからの応答生成を待機する時間（バックエンド処理）。
- Cache: ローカルキャッシュまたは中間キャッシュの確認に費やされた時間。
- DNS: Domain Name Systemのルックアップにかかる時間。
- Connection: TCP接続の確立にかかる時間。
- Request: HTTPリクエストヘッダーの送信にかかる時間。
INPコンポーネント (Interaction to Next Paint)
INPはインタラクティビティを測定する。メインスレッドのブロックを正確に特定するために、インタラクションのライフサイクルをセグメント化する：
- Input Delay: ユーザーのインタラクションからイベントハンドラーの実行までの時間。Input Delayが高い場合、メインスレッドがビジーであったことを意味する。
- Processing: イベントコールバックの実行にかかる時間。これはJavaScriptロジックの効率性を表している。
- Presentation: ブラウザがレイアウトを計算し、次のフレームをペイントするのにかかる時間。
診断ワークフロー
リグレッションを診断するには、以下の手順に従う：
- ボトルネックの定量化: ドーナツチャートを見て、主要なサブパートを見つける。`TTFB`が高い場合は、サーバーを確認する。`Resource Load Delay`が高い場合は、アセットの優先度を確認する。
- 因果関係の確立: タイムラインを確認し、スパイクを特定のデプロイメントやコンテンツの更新と関連付ける。
- コンテキストの分離: データテーブルを使用して、このパターンがすべてのページで当てはまるか、特定のテンプレートに特有のものかを確認する。パターンを見つけることが、スケーラブルな修正を展開する鍵となる。
Core Web Vitalsの最適化
これらの内訳を使用して、チケットを適切なエンジニアリングチームにルーティングする。TTFBの問題はバックエンドに割り当てる。Load DelayとRender Delayはフロントエンドに割り当てる。DNS/Connectionのレイテンシはインフラストラクチャに割り当てる。この合理化されたトリアージプロセスにより、調査時間を短縮し、解決を加速させることができる。
