Trusted by market leaders
Metric Breakdown Dashboard を理解する
LCP や INP のような複合メトリクスは、複数の異なるタイミングイベントを集約したものです。総合スコアを最適化するには、これらの構成要素を分離する必要があります。Metric Breakdown Dashboard は、パフォーマンスを詳細なフェーズに分解し、特定のボトルネックを特定します。
このツールは、広範で曖昧な最適化を、精密なエンジニアリング目標へと置き換えます。レイテンシの原因がサーバー、ネットワーク、クライアントの実行のいずれにあるかを特定します。
Breakdown Dashboard の構造
このダッシュボードは、レイテンシの根本原因を分離するために、同期された3つのビューを提供します：
- Contribution Donut: 各サブパーツの相対的な比重を可視化します。「最大の要因は何か？」という問いに答えます。もし `Time to First Byte` がチャートの70%を占めているなら、問題はバックエンドに関連していることがわかります。
- 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（DNS）ルックアップの所要時間。
- Connection: TCP 接続の確立に要した時間。
- Request: HTTP リクエストヘッダーの送信に要した時間。
INP コンポーネント (Interaction to Next Paint)
INP はインタラクティビティを測定します。インタラクションのライフサイクルをセグメント化し、メインスレッドのブロッキング箇所を特定します：
- Input Delay: ユーザーのインタラクションからイベントハンドラの実行までの時間。Input Delay が高い場合、メインスレッドがビジー状態であることを意味します。
- Processing: イベントコールバックの実行に要する時間。これは JavaScript ロジックの効率性を表します。
- Presentation: ブラウザがレイアウトを計算し、次のフレームを描画するのに要する時間です。
診断ワークフロー
回帰（リグレッション）を診断するには、以下の手順に従ってください：
- ボトルネックを定量化する: Donut チャートを見て、支配的なサブパーツを見つけます。もし `TTFB` が高い場合はサーバーを確認してください。もし `Resource Load Delay` が高い場合はアセットの優先順位を確認してください。
- 因果関係を確立する: Timeline を確認し、スパイク（急上昇）を特定のデプロイメントやコンテンツ更新と関連付けます。
- コンテキストを分離する: Data Table を使用して、このパターンがすべてのページに当てはまるか、特定のテンプレートに固有のものかを確認します。パターンの発見は、スケーラブルな修正を展開するための鍵となります。
Core Web Vitals の最適化
これらの内訳を使用して、チケットを適切なエンジニアリングチームに振り分けます。TTFB の問題はバックエンドに割り当てます。Load Delay と Render Delay はフロントエンドに割り当てます。DNS/Connection のレイテンシはインフラストラクチャに割り当てます。この合理化されたトリアージプロセスにより、調査時間が短縮され、解決が加速します。
