Core Web Vitals ↗ は、ウェブサイトとウェブアプリケーションの体感パフォーマンスを測るための、上位レベルの指標です。
測定するコアの Web Vitals 指標は 3 つです。Largest Contentful Paint、Interaction to Next Paint、Cumulative Layout Shift です。各指標には、Google が定義したしきい値に基づき、Good、Needs Improvement、Poor のいずれかの評価が自動で付きます。
Core Web Vitals では、ウェブページのどの要素が閲覧中のユーザー体験に影響しているかを、視覚的に特定できます。Core Web Vitals を開く手順は次のとおりです。
-
Cloudflare ダッシュボードで Web Analytics ページを開きます。
Web analytics を開く ↗ -
ウェブサイトを選び、Core Web Vitals を選びます。
Core Web Vitals は 3 つの主なセクションに分かれます。それぞれ、ユーザー体験に影響する特定の要素の情報を示します。
- Largest Contentful Paint（LCP） ↗: ユーザーが感じる読み込み速度を測ります。ページの主要コンテンツが読み込まれるまでの時間です。
- Interaction to Next Paint（INP） ↗: ユーザーインターフェースの応答性を測ります。クリック、タップ、キー入力などの操作に対して、サイトがどれだけ速く反応するかです。
- Cumulative Layout Shift（CLS） ↗: 視覚的な安定性を測ります。ページ読み込み中および読み込み後に、予期しないレイアウトのずれがどの程度起きるかを示します。
各指標はユーザー体験への影響を表し、Web Analytics がその影響を数値化して評価します。
Cloudflare Web Analytics の Core Web Vitals では、URL、Browser、Operating System、Country、Element などでデータを絞り込めます。
各グラフの下にある Debug View セクションには、各指標に悪影響を与えている上位 5 件の要素が表示されます。データテーブルの要素を選ぶと、詳細を確認できます。
LCP、INP、CLS の各テーブルでは、これらの要素の 75 パーセンタイル（P75）のパフォーマンスも一目で確認できます。テーブルの各行を選ぶと要素が展開され、P50、P90、P99 の指標を含む詳細情報を確認できます。
これらの数値は、その要素がページ上のほかの要素と比べてどうかを示します。たとえば、読み込みに 3,900 ms かかり、75 パーセンタイルにある要素は、ページ上の要素の 75% より読み込みが遅いということです。
Web Analytics は、軽量な JavaScript ビーコンで Vitals Explorer が使う情報を収集します。利用指標の収集に、Cookie や localStorage などのクライアントサイドの状態は使いません。Vitals Explorer は、IP アドレス、User Agent 文字列、その他のデータによる個人のフィンガープリントも行いません。
DOM ノードを表す CSS セレクターです。この文字列を使い、ブラウザーの開発者コンソールで document.querySelector(<element_name>) を実行すると、スコア／値に悪影響を与えている DOM ノードを特定できます。
Core Web Vitals を取得した時点の URL パスです。
各 Core Web Vitals の 指標値 ↗ です。LCP と INP はミリ秒、CLS はスコアです。
ソース URL（画像、テキスト、Web フォントなど）です。
ソースオブジェクトのサイズ（バイト）です。
レイアウト情報は JSON 値で、width、height、x 軸位置、y 軸位置、left、right、top、bottom を含みます。これらの値は、ページ上で起きたレイアウトシフトを表します。
ページ上のシフト後に、面積が最大の DOM 要素のレイアウト情報を取得します。この JSON 値は Debug View セクションで Current として表示されます。確認するには、Cumulative Layout Shifts (CLS) グラフ > Debug View までスクロールします。テーブルの要素を選び、Layout Shifts セクションを開くと Current があります。
ページ上のシフト前に、面積が最大の DOM 要素のレイアウト情報を取得します。この JSON 値は Debug View セクションで Previous として表示されます。確認するには、Cumulative Layout Shifts (CLS) グラフ > Debug View までスクロールします。テーブルの要素を選び、Layout Shifts セクションを開くと Previous があります。