Web Vitalsのパフォーマンス監視ツール
Core Web Vitalsの測定と監視のためのツールガイド。PageSpeed Insights、Lighthouse、Chrome DevTools、CrUX、Search Console、WebPageTest、web-vitalsライブラリをカバー。
Tools & Workflow
詳細な説明
Core Web Vitalsの測定ツール
効果的なパフォーマンス最適化には正確な測定が必要です。ラボデータ（合成、制御されたテスト）とフィールドデータ（本番環境の実ユーザー）の2種類があります。
ラボデータ vs フィールドデータ
| 側面 | ラボデータ | フィールドデータ |
|---|---|---|
| 環境 | 制御（固定ネットワーク、CPU） | 実ユーザー（条件は様々） |
| 指標 | TBT、LCP、CLS、FCP、TTFB | INP、LCP、CLS、FCP、TTFB |
| タイミング | デプロイ前 | デプロイ後 |
web-vitals JavaScriptライブラリ
import { onCLS, onINP, onLCP, onFCP, onTTFB } from 'web-vitals';
function sendToAnalytics(metric) {
navigator.sendBeacon('/api/vitals', JSON.stringify({
name: metric.name,
value: metric.value,
rating: metric.rating,
}));
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
Google Search Console
Core Web Vitalsレポートでは以下を表示：
- ステータス別のURLレベルパフォーマンス
- 28日間のトレンドデータ
- モバイルとデスクトップの個別表示
ユースケース
パフォーマンス監視は、ユーザーエクスペリエンスとSEOを重視するすべてのチームに不可欠です。web-vitalsライブラリで実ユーザーからフィールドデータを収集し、デプロイメントパイプラインでLighthouse CIを使用してリグレッションを検出し、Google Search ConsoleでCore Web Vitalsのステータスを監視します。