メインコンテンツへスキップ
3分で読めます

Core Web Vitals

Zenovay は Google の Core Web Vitals(LCP・CLS・INP)と補助的な 2 指標(FCP・TTFB)を、すべての実訪問セッションから収集します。データは各ドメイン ダッシュボードの Performance タブに表示されます。

インストール不要。 Web Vitals 収集は標準の Zenovay トラッカーに含まれています。トラッキング スクリプトがすでに動作していれば、訪問者がページを開いた瞬間からデータが流れ始めます。


Web Vitals が測定するもの

Core Web Vitals は実ページ体験についての Google の安定指標です。Google Search Console に表示され、ランキング要因となり、直帰率やコンバージョン率と強く相関します。

指標計測内容良好改善が必要不良
LCP — Largest Contentful Paintメイン コンテンツが表示されるまでの時間≤ 2.5 秒≤ 4.0 秒> 4.0 秒
CLS — Cumulative Layout Shift可視コンテンツが予期せずどれだけ動くか≤ 0.1≤ 0.25> 0.25
INP — Interaction to Next Paintクリック / タップから次の描画までの最悪値≤ 200 ms≤ 500 ms> 500 ms
FCP — First Contentful Paint最初のテキスト / 画像が描画された時点≤ 1.8 秒≤ 3.0 秒> 3.0 秒
TTFB — Time to First Byteサーバーからの最初の 1 バイト到着時刻≤ 800 ms≤ 1.8 秒> 1.8 秒

しきい値は Google が公開している推奨値に従い、Zenovay ダッシュボードのカラーコード(緑 / 黄 / 赤)にそのまま反映されます。


Zenovay がデータを収集する仕組み

収集はブラウザ内のみで、標準 PerformanceObserver API と Navigation Timing エントリを利用します — サードパーティ ライブラリも追加スクリプトも使いません。

簡単な流れ:

  1. トラッカーの初期化と同時に、largest-contentful-paintlayout-shiftevent(INP 用)・paint(FCP 用)のオブザーバーを登録します。
  2. TTFB は performance.getEntriesByType('navigation')[0].responseStart から一度だけ読み取ります。
  3. 最終値は 1 つのペイロードにまとめられ、訪問者がページを離れたとき(visibilitychange → hidden、加えてモバイル bfcache 向けに pagehide)に POST /api/track/<トラッキングコード>/performance へ送信されます。
  4. API は各行に country_codedevice_typebrowser、および可能であれば connection_type を付与します。

ペイロードにはフォームの入力値も DOM の中身も含まれず、PII もアナリティクスのページビューに既に含まれている範囲(URL)を超えません。

1 ページのライフサイクルにつき 1 ビーコン。 Vitals は訪問者がページを離れるときにちょうど 1 回送信されます。クライアント側でルーティングする SPA は、ページ遷移ごとに新しいビーコンを送ります — ページビュー イベントと同じ振る舞いです。


データの確認場所

app.zenovay.com で任意のドメインを開き、Performance タブをクリックしてください。

表示内容:

  • 指標サイドバー:LCP / CLS / INP / FCP / TTFB それぞれの現在値、しきい値評価、パーセンタイル分布。
  • 詳細パネル:選択した指標の指定期間トレンドと、何が影響するかの文脈的な解説。
  • ルート別および国別の内訳:どのページ・地域が最も遅いか。
  • コントロール:
    • デバイス — すべて / デスクトップ / モバイル
    • パーセンタイル — P75 / P90 / P95 / P99(Google は既定で P75 を使用)
    • 期間 — プランごとに上限あり(後述)

パーセンタイルの選び方

Google は Search Console のランキング シグナルに 75 パーセンタイルの実ユーザー値を用います。より高いパーセンタイル(P90 / P95 / P99)は、最も遅い訪問者を浮き彫りにします — 特定のリグレッションや遅い端末の裾を調査するときに有用です。


プランごとの提供範囲と保持期間

Web Vitals の収集は Free を含む全プランに含まれます。期間アクセスはプランごとに段階的です:

プランPerformance 期間
Free直近 7 日間
Pro直近 30 日間
Scale直近 90 日間
Enterprise最長 1 年

これらの上限はアナリティクス全般の保持階層と同一です — 詳細は料金とプラン上限を参照してください。


特定サイトで Web Vitals を無効化する

Vitals は既定で有効です。トラッキング対象の特定サイトでオプトアウトするには、そのサイト設定で feature flag を設定します:

{
  "feature_flags": {
    "enable_core_web_vitals": false
  }
}

flag が false のとき:

  • トラッカーはオブザーバー登録自体をスキップします(ブラウザ側コストはゼロ)。
  • API エンドポイントはビーコンを受け取りますが、保存はしません(進行中リクエストに対する静かな no-op)。

再度有効化するには flag を true に戻すか、エントリを削除してください(既定で有効)。


よくある質問

Safari で INP が見当たらないのはなぜですか?

Safari は PerformanceObserverevent エントリ タイプに interactionId を実装したのが最近です。古い Safari バージョンでは Zenovay は LCP・CLS・FCP・TTFB を報告し、そのセッションの INP は null のままにします。Safari のカバレッジが追いつくまで、ダッシュボードでは INP のサンプル数が少なく見える程度で、特別な対応は不要です。

SPA でルート変更ごとにビーコンは送信されますか?

はい。トラッカーは追跡されるページ遷移ごとにオブザーバーをリセットします(pushStatereplaceState を発火する SPA ルートを含む)。1 ページビューにつき 1 行のパフォーマンス データが残り、1 ブラウザ セッションごとではありません。

Vitals 収集はサイトのパフォーマンスに影響しますか?

PerformanceObserver はまさにこの用途のために設計された受動的なブラウザ API です。オブザーバーは既存のブラウザ イベントで発火するだけで、ポーリングもメインスレッドの追加作業もありません。ページ アンロード時の単一ビーコンは fetchkeepalive: true で送信されるため、ナビゲーションをブロックしません。

Google の CrUX データと数字が合わないのはなぜですか?

通常の理由が 2 つあります:

  1. サンプル母集団。 Zenovay はサイトを開いたすべての実訪問者を計測します。CrUX は URL 匿名化に同意した Chrome ユーザーのみを計測する厳密な部分集合です。
  2. 時間ウィンドウ。 CrUX は Chrome のみ・ローリング 28 日間のウィンドウです。Zenovay では期間を自分で選び、デバイス・パーセンタイル・ルート・国で絞り込めます。

どちらも妥当な信号ですが、答える問いが少し違います。CrUX はランキング用、Zenovay はデバッグ用と考えてください。

コード上のしきい値はどこにありますか?

フロントエンド定数は app-zenovay/lib/api/performance.ts にあり、Google 公表のしきい値を反映しています。変更にはコード更新が必要です — 「良好」「改善が必要」「不良」のラベルが製品全体で比較可能であり続けるよう、意図的にクライアント側で設定できないようにしています。


ダッシュボードが空のときの対処

Performance タブが空状態(「No performance data yet」)を表示するとき:

  1. トラッカーが発火しているか確認。 Install Health 診断を開いてください。ページビューが流れていなければ、vitals も流れません。
  2. feature flag を確認。 サイト設定で feature_flags.enable_core_web_vitals が明示的に false になっていないか確認してください。
  3. トラフィックを少し待つ。 Vitals のビーコンはページ アンロード時に発火します。トラフィックが非常に少ないサイトや、キャッシュをクリアしたあなた自身しか見ていないサイトでは、数値が出るまで数セッション要することがあります。
  4. 期間を広げて開く。 Free プランの新規サイトは既定で直近 7 日間です — インストール直後はプランの最大期間に広げてみてください。
  5. ブラウザ DevTools → Network。 Performance フィルターで、/api/track/<code>/performance への POST を探します。レスポンスは success: true を含む小さな JSON です。

リクエストは飛んでいるのにデータが出ない場合は、トラッキング コードとともに [email protected] までご連絡ください — サイト単位のオプトアウト フラグがあるため、未設定であることをこちらで確認します。


関連項目

このページは役に立ちましたか?