Core Web Vitals：Webパフォーマンスを測定・改善する方法
モダンなWebアプリを構築したのに、ユーザーから遅いと不満が届く。検索順位が下がる。コードを確認しても明らかな問題は見当たらない。原因はCore Web Vitals（CWV）かもしれません。これはGoogleが提唱するユーザー体験の指標です。このガイドでは、CWVを測定し改善する実践的な方法を紹介します。
Core Web Vitalsとは？
Core Web Vitalsは、実際のユーザー体験を数値化する3つの指標です：
- Largest Contentful Paint（LCP）：メインコンテンツが表示されるまでの時間。目標は2.5秒以下。
- First Input Delay（FID）：最初のユーザー操作から応答までの時間。目標は100ミリ秒以下。
- Cumulative Layout Shift（CLS）：視覚的な安定性——要素が予期せず動く量。目標は0.1以下。
これらの指標はGoogleのページ体験シグナルの一部であり、SEOに直接影響します。しかしそれ以上に、実際のユーザーのフラストレーションを反映しています。
Core Web Vitalsの測定方法
ラボデータとフィールドデータの両方が必要です。ラボデータはデバッグに役立ち、フィールドデータは実際のユーザーを反映します。
ラボツール
- Lighthouse（Chrome DevToolsまたはオンライン） – スコアと改善機会を含む迅速な監査。
- WebPageTest – 高度なウォーターフォール分析とフィルムストリップ。
- Chrome DevTools Performanceパネル – ランタイムの詳細分析。
フィールドツール
- Chrome User Experience Report（CrUX） – 実ユーザー指標の公開データセット。
- PageSpeed Insights – ラボデータとフィールドデータを組み合わせ。
- Search Console Core Web Vitalsレポート – URLをステータス別にグループ化。
- web-vitals JavaScriptライブラリ – 独自のフィールドデータを収集。
まずPageSpeed Insightsでベースラインを取得します。次にweb-vitalsライブラリを使用してサイトを計測し、指標をアナリティクスに送信します。
import {onLCP, onFID, onCLS} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
navigator.sendBeacon('/analytics', body);
}
onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);
LCPの改善
LCPはしばしば最大の原因です。クリティカルパスを最適化しましょう：
- LCP要素を特定する – 通常はヒーロー画像、見出し、動画ポスター。
- 画像を最適化する – 圧縮し、モダンなフォーマット（WebP/AVIF）を使用し、明示的なサイズを設定。
- LCPリソースをプリロードする – 画像やフォントに
<link rel="preload">を使用。 - サーバー応答時間を短縮する – キャッシュ、CDN、効率的なバックエンドを使用。
- レンダリングブロックリソースを排除する – 非クリティカルなCSS/JSを遅延。
画像の場合、Image Compressorのようなツールが品質を損なわずにファイルを縮小するのに役立ちます。
FIDの改善
FIDは入力の応答性を測定します。長いJavaScriptタスクはメインスレッドをブロックします。
- 長いタスクを分割する –
setTimeoutやrequestIdleCallbackを使用して譲る。 - コード分割 – 必要なJSのみを読み込む。
- イベントハンドラを最適化する – 高コストな操作をデバウンスまたはスロットル。
- Web Workerを使用する – CPU集約的な処理に。
// 例：メインスレッドに譲る
function yieldToMain() {
return new Promise(resolve => {
setTimeout(resolve, 0);
});
}
async function processItems(items) {
for (const item of items) {
// アイテムを処理
await yieldToMain();
}
}
CLSの改善
レイアウトシフトはユーザーを苛立たせます。スペースを確保して防ぎましょう：
- 画像と動画に幅/高さを設定する – またはCSSの
aspect-ratioを使用。 - 既存コンテンツの上にコンテンツを挿入しない – ユーザー操作への応答を除く。
- トランスフォームアニメーションを使用する – レイアウトをトリガーするプロパティの代わりに。
- フォントをプリロードする – そして
font-display: swapを使用して不可視テキストを回避。
指標とツールの比較
| 指標 | 測定内容 | 目標 | 主要ツール |
|---|---|---|---|
| LCP | 読み込みパフォーマンス | ≤2.5s | Lighthouse, PageSpeed Insights, WebPageTest |
| FID | インタラクティブ性 | ≤100ms | Lighthouse（TBTプロキシ）, web-vitalsライブラリ |
| CLS | 視覚的安定性 | ≤0.1 | Lighthouse, Chrome DevTools, web-vitals |
実践的なワークフロー
- 測定する – 主要ページでPageSpeed Insightsを実行。フィールドデータ（あれば）とラボスコアを記録。
- 優先順位を付ける – 悪く、最も多くのユーザーに影響する指標に焦点を当てる。
- 修正する – 上記のテクニックを適用し、最大の効果（例：画像最適化）から始める。
- 検証する – ラボテストを再実行し、web-vitalsでフィールドデータを監視。
- 反復する – パフォーマンスは継続的。予算を設定し、リグレッションを監視。
覚えておいてください：フィールドデータが真実です。ラボツールはデバッグに役立ちますが、実際のユーザー条件を反映しない場合があります。
FAQ
Core Web Vitalsはどのくらいの頻度で測定すべきですか？
本番環境でweb-vitalsライブラリを使用して継続的に監視します。主要なリリース前と定期的（例：毎月）に主要ページのラボ監査を実行します。
Core Web Vitalsの改善は本当にSEOに影響しますか？
はい、ページ体験はランキングシグナルですが、コンテンツの関連性が依然として最重要です。良好なCWVはユーザー体験を向上させ、間接的にSEOに役立ちます。
ラボデータとフィールドデータの違いは何ですか？
ラボデータはシミュレートされた条件で制御された環境で収集され、フィールドデータはさまざまなデバイスやネットワーク上の実際のユーザーから得られます。両方を使用しましょう：デバッグにはラボ、真実にはフィールド。
LCPを改善するために画像を最適化する準備はできましたか？無料のImage Compressorを試して、品質を犠牲にせずにファイルサイズを削減しましょう。