Core Web Vitals：Webパフォーマンスの測定と改善
高速なウェブサイトを構築したのに、ユーザーからは遅いという苦情がまだ届く。あるいは、Googleのアップデート後にSEO順位が下がったかもしれない。原因はCore Web Vitals—Googleが提唱するユーザー体験の指標—にあるかもしれません。このガイドでは、Core Web Vitalsとは何か、その測定方法、そして各指標を改善するための具体的な手順を学びます。
Core Web Vitalsとは？
Core Web Vitalsは、ユーザー体験の重要な側面を数値化する3つの指標です：
- Largest Contentful Paint (LCP)：最大のコンテンツ要素（画像、動画、テキストブロック）が表示されるまでの時間。良好：≤2.5秒。
- Interaction to Next Paint (INP)：応答性を測定—ユーザーの操作（クリック、タップ、キー押下）から次のフレームが描画されるまでの時間。良好：≤200ms。
- Cumulative Layout Shift (CLS)：読み込み中の予期しないレイアウトシフトを数値化。良好：≤0.1。
これらの指標はGoogleのページエクスペリエンスシグナルの一部であり、SEOとユーザー満足度に直接影響します。
Core Web Vitalsの測定方法
ラボデータとフィールドデータの両方が必要です。ラボデータ（合成テスト）はデバッグに役立ち、フィールドデータ（リアルユーザーモニタリング）は実際の体験を反映します。
ラボツール
- Chrome DevToolsのLighthouse：監査を実行し、改善の機会とともにスコアを取得します。
- WebPageTest：フィルムストリップやウォーターフォールチャートを使った高度なテスト。
- PageSpeed Insights：CrUXからのラボデータとフィールドデータを組み合わせます。
フィールドツール
- Chrome User Experience Report (CrUX)：実ユーザー指標の公開データセット。
- web-vitals JavaScriptライブラリ：アナリティクス経由で実ユーザーから指標を収集します。
- Search Console：Core Web Vitalsレポートで注意が必要なURLグループを表示します。
web-vitalsライブラリを使って指標をアナリティクスに送信する方法は次のとおりです：
import {onLCP, onINP, onCLS} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// 利用可能な場合は navigator.sendBeacon を使用
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
LCPの改善
LCPはしばしば最も影響の大きい指標です。改善するには：
- LCP要素を最適化する：特定し（通常はヒーロー画像や見出し）、高速に読み込まれるようにします。
- 重要なリソースをプリロードする：画像、フォント、スタイルシートには
<link rel="preload">を使用します。 - モダンな画像フォーマットを使用する：WebPまたはAVIFをフォールバック付きで配信します。
- 遅延読み込みを慎重に実装する：LCP画像は遅延読み込みせず、優先します。
- サーバー応答時間を短縮する：CDN、キャッシュを使用し、バックエンドを最適化します。
- レンダリングをブロックするリソースを排除する：重要でないCSSとJavaScriptを遅延させます。
例：ヒーロー画像をプリロードする：
<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">
INPの改善
INPは応答性を測定します。INPが高い場合、多くの場合メインスレッドをブロックする長いタスクが原因です。
- 長いタスクを分割する：
setTimeout、requestIdleCallback、またはscheduler.yield()を使用してメインスレッドに制御を譲ります。 - イベントハンドラを最適化する：コストの高い操作をデバウンスまたはスロットルします。
- JavaScriptの実行を削減する：コード分割、ツリーシェイキング、重要でないスクリプトの遅延を行います。
- 大規模なDOM更新を避ける：DOMの変更をバッチ処理し、仮想DOMを賢く使用します。
- CPU負荷の高い処理にはWeb Workersを使用する。
例：scheduler.yield()（サポートされている場合）で制御を譲る：
async function handleClick() {
// 何らかの処理
await scheduler.yield();
// 制御を譲った後に続行
}
CLSの改善
CLSは視覚的な安定性に関するものです。予期しないシフトを防ぎます：
- 画像と動画には常にwidthとheight属性を含める。
- 広告や埋め込みにはCSSのaspect-ratioまたは固定サイズでスペースを確保する。
- ユーザー操作によってトリガーされない限り、既存のコンテンツの上にコンテンツを挿入しない。
- アニメーションにはレイアウトをトリガーするプロパティの代わりにCSS transformsを使用する。
- フォントをプリロードし、
font-display: swapを使用して不可視テキストのシフトを回避する。
例：aspect-ratioでスペースを確保する：
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
Core Web Vitalsの比較
| 指標 | 測定内容 | 良好な閾値 | 一般的な修正方法 |
|---|---|---|---|
| LCP | 読み込みパフォーマンス | ≤2.5秒 | 画像の最適化、プリロード、サーバー時間の短縮 |
| INP | 応答性 | ≤200ms | 長いタスクの分割、JSの最適化、ワーカーの使用 |
| CLS | 視覚的安定性 | ≤0.1 | サイズの設定、スペースの確保、動的挿入の回避 |
ツールとワークフロー
Core Web Vitalsのモニタリングを開発ワークフローに統合します：
- CIでLighthouseを実行してリグレッションを検出します。
- RUM（リアルユーザーモニタリング）を使用してフィールドデータを追跡します。
- パフォーマンスバジェットとアラートを設定します。
- サードパーティスクリプトを定期的に監査します—これらはしばしばINPとLCPに影響します。
サイトにアップロードする前の簡単な画像最適化には、Image Compressorをお試しください。品質を損なわずにファイルサイズを削減できます。
FAQ
Core Web Vitalsの現在の閾値は？
LCPは良好≤2.5秒、改善が必要≤4秒；INPは良好≤200ms、改善が必要≤500ms；CLSは良好≤0.1、改善が必要≤0.25です。
Core Web Vitalsはどのくらいの頻度で測定すべきですか？
フィールドデータでは継続的に、また重要なコード変更のたびにラボツールで測定します。リグレッションに対するアラートを設定しましょう。
サイトを再構築せずにCore Web Vitalsを改善できますか？
はい—画像の最適化、プリロード、スクリプトの遅延など、多くの修正は段階的に適用できます。