Web Vitals JavaScript 計測は web-vitals ライブラリで RUM データを取る

なぜこれを学ぶか

Search Console は 28 日ローリング集計で改善反映が遅い。 web-vitals JS で RUM 構築すれば、リアルタイムで施策効果を測定できる。

サイト速度を継続的に改善するすべての担当者で重要。

学ばないと起きること

学ぶメリット

• 改善効果の即時確認
• 自社独自の分析軸
• 商談で「web-vitals + RUM」を即答

仕組み

web-vitals ライブラリ

公式: https://github.com/GoogleChrome/web-vitals

npm install web-vitals

基本実装

import { onLCP, onINP, onCLS, onTTFB, onFCP } from 'web-vitals';

const sendToAnalytics = (metric) => {
  fetch('/api/analytics', {
    method: 'POST',
    body: JSON.stringify({
      name: metric.name,
      value: metric.value,
      rating: metric.rating,
      url: location.href,
      navigationType: metric.navigationType
    })
  });
};

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
onTTFB(sendToAnalytics);
onFCP(sendToAnalytics);

Google Analytics 4 連携

import { onLCP } from 'web-vitals';

onLCP((metric) => {
  gtag('event', metric.name, {
    value: Math.round(metric.value),
    metric_id: metric.id,
    metric_value: metric.value,
    metric_rating: metric.rating
  });
});

計測される指標

キー概念

Search Console との違い

送信先の選択肢

サンプリング

全イベント送信は重い:

• 10% サンプリング
• セッション開始時に判定
• 重要な不良値は全送信

const SAMPLE_RATE = 0.1;
if (Math.random() < SAMPLE_RATE) {
  onLCP(sendToAnalytics);
}

attribution ビルド

詳細な原因情報を取得:

import { onLCP } from 'web-vitals/attribution';

onLCP((metric) => {
  console.log(metric.attribution.element);  // 該当要素
  console.log(metric.attribution.url);  // リソース URL
  console.log(metric.attribution.timeToFirstByte);
});

よくある誤解

実務での適用

段階的実装

1. web-vitals npm install
2. 主要 5 指標を GA4 送信
3. ダッシュボード化
4. 月次でトレンド確認
5. 施策後の即時効果測定

attribution の活用

INP / LCP の不良時:

• どの要素が原因か
• どのスクリプトが原因か
• ユーザーセグメント別の傾向

トラブル別の対処

公式ソース

• web-vitals ライブラリ
• Field vs Lab データ
• Vercel Analytics

自己テスト

これらの内容を採点付きで挑戦したい場合は、本ドメインのプロ試験で 5 問形式で確認できる。