コアウェブバイタル
コアウェブバイタル ↗は、ユーザーエクスペリエンスを捉えるためにGoogleによって設計された高レベルの指標です。コアウェブバイタルの指標は、Largest Contentful Paint、First Input Delay、Cumulative Layout Shiftの3つが測定されます。これらの指標は、Googleによって設計された業界標準の方法論とテストに基づいて、自動的にGood、Needs Improvement、Poorの評価が付けられます。ページの読み込み時間の統計は、First PaintおよびFirst Contentful Paintによって補完されます。
バイタルエクスプローラーは、ウェブサイトを閲覧中のユーザーエクスペリエンスに影響を与えているページ内の要素を視覚的に特定するのを容易にします。 バイタルエクスプローラーを見つけるには：
- Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
- Analytics & Logsのドロップダウンを選択し、Web Analyticsを選びます。
- ウェブサイトを選択し、Core Web Vitalsを選択します。
バイタルエクスプローラーは、ユーザーエクスペリエンスに影響を与える特定の機能に関する情報を持つ3つの主要セクションに分かれています：
- Largest Contentful Paint (LCP) ↗: ユーザーによる認識された読み込み速度を測定します。ページの主要コンテンツが読み込まれるまでの時間を返します。
- Interaction to Next Paint (INP) ↗: ユーザーインターフェースの応答性を測定します。ウェブサイトがクリックやキー入力などのユーザーインタラクションにどれだけ迅速に応答するかを示します。
- First Input Delay (FID) ↗: ウェブサイトが最初のユーザー入力にどれだけ速く応答するかを測定します。
- Cumulative Layout Shift (CLS) ↗: 視覚的安定性を測定します。さまざまな要素が表示される際にページレイアウトにシフトがあるかどうかを示します。
これらの指標はすべて、ユーザーエクスペリエンスに対する影響を表しており、ウェブアナリティクスによって定量化され、評価されます。
Cloudflare Web Analyticsは、国、ホスト、パス、リファラー、デバイスタイプ、ブラウザ、オペレーティングシステムでデータをフィルタリングし、最も影響を受けているユーザーを特定することで、コアウェブバイタルのインタラクティブな探索を提供します。
各グラフの下には、各指標に対して負の影響を与えている上位5つの要素が表示されるDebug Viewセクションがあります。データテーブルに表示されている要素を選択すると、詳細情報が得られます。
各テーブル — LCP、FID、CLS — では、これらの要素の75パーセンタイル（P75）のパフォーマンスも一目で確認できます。テーブルの各行を選択すると、要素を展開して、P50、P90、P99の指標を含む詳細情報にアクセスできます。
これらの数値は、要素がページ内の他の要素に対してどのようにパフォーマンスを発揮しているかを示します。たとえば、ある要素が3,900 msで読み込まれ、75パーセンタイルに位置している場合、これはその要素がページ内の75%の要素よりも遅く読み込まれることを意味します。
ウェブアナリティクスは、バイタルエクスプローラーが使用する情報を収集するために軽量のJavaScriptビーコンを使用します。使用状況メトリックを収集するために、クライアントサイドの状態（クッキーやlocalStorageなど）は使用しません。バイタルエクスプローラーは、IPアドレス、ユーザーエージェント文字列、またはその他のデータを介して個人をフィンガープリンティングすることもありません。
DOMノードを表すCSSセレクタ。この文字列を使用して、ブラウザの開発者コンソールでdocument.querySelector(<element_name>)を実行することで、スコア/値に負の影響を与えているDOMノードを特定できます。
コアウェブバイタルがキャプチャされる時点でのURLパス。
各コアウェブバイタルのメトリック値 ↗。この値は、LCPまたはFIDの場合はミリ秒、CLSの場合はスコアです。
ソースURL（画像、テキスト、ウェブフォントなど）。
ソースオブジェクトのサイズ（バイト単位）。
キャプチャされたイベントのタイプ（mousedown、keydown、pointerdownなど）。
レイアウト情報は、幅、高さ、x軸位置、y軸位置、左、右、上、下を含むJSON値です。これらの値は、ページ上で発生するレイアウトシフトを表します。
ページのシフトが発生した後に、最大面積を持つ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が表示されます。