Core Web Vitals：ウェブパフォーマンスの測定と改善
ユーザーはせっかちです。ページの読み込みに時間がかかったり、読もうとしているときにレイアウトが飛び回ったりすると、離脱してしまいます。Core Web Vitals（CWV）は、こうしたフラストレーションを数値化するGoogleの指標です。読み込み速度のLargest Contentful Paint（LCP）、応答性のInteraction to Next Paint（INP）、視覚的安定性のCumulative Layout Shift（CLS）があります。このガイドでは、これらの指標を測定する方法と、実際に効果のある改善策を適用する方法を学びます。
Core Web Vitalsとは？
Core Web Vitalsは、ユーザー体験を反映する一連の実世界の指標です。Googleのページエクスペリエンスシグナルの一部であり、ランキングにも使用されます。各指標には「良好」のしきい値があります：
- LCP: 2.5秒以下であるべきです。
- INP: 200ミリ秒以下であるべきです。
- CLS: 0.1以下であるべきです。
これらのしきい値はページ読み込みの75パーセンタイルで測定されます。つまり、訪問の75%が目標を満たす必要があります。
Core Web Vitalsの測定方法
ラボデータとフィールドデータの両方が必要です。ラボデータはデバッグに役立ち、フィールドデータは実際のユーザー体験を示します。
フィールドデータ（実ユーザー）
- Chrome User Experience Report（CrUX）: オリジンに対する集計された実ユーザーデータを提供します。PageSpeed InsightsまたはCrUXダッシュボードからアクセスできます。
- web-vitals JavaScriptライブラリ: この軽量スクリプトをサイトに追加して、指標をアナリティクスに送信します。
import {onLCP, onINP, onCLS} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
navigator.sendBeacon('/analytics', body);
}
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);ラボデータ（合成）
- Lighthouse: Chrome DevToolsに組み込まれており、パフォーマンスを監査してスコアを提供します。
- WebPageTest: ネットワークスロットリングを伴うより詳細な分析に使用します。
ラボデータを使用して迅速に反復しますが、常にフィールドデータで検証してください。
Largest Contentful Paint（LCP）の改善
LCPは、最大のコンテンツ要素（通常はヒーロー画像や見出し）が表示されるまでの時間を測定します。改善するには：
- 画像を最適化する: 画像を圧縮し、WebPやAVIFなどの最新形式を使用し、
srcsetでレスポンシブサイズを提供します。 - 重要なリソースをプリロードする: LCP画像と主要なフォントに
<link rel="preload">を使用します。 - レンダリングをブロックするリソースを排除する: 重要でないCSSとJavaScriptを遅延させます。クリティカルCSSをインライン化します。
- CDNを使用する: ユーザーに近い場所からアセットを配信します。
- テキスト圧縮を有効にする: テキストベースのアセットにBrotliまたはgzipを使用します。
画像圧縮には、Image Compressorのようなツールを使用して、品質を損なわずにファイルサイズを迅速に削減できます。
Interaction to Next Paint（INP）の改善
INPは、ユーザーのインタラクションに対するページの応答性を測定します。INPが高いということは、ブラウザがビジーで迅速に応答できないことを意味します。改善するには：
- 長いタスクを分割する:
setTimeoutまたはrequestIdleCallbackを使用して、JavaScriptの処理を小さなチャンクに分割します。 - イベントハンドラを最適化する: 高コストなハンドラをデバウンスまたはスロットルします。レイアウトスラッシングを避けます。
- JavaScriptを削減する: 未使用のコードを削除し、コード分割を行い、重要でないスクリプトを遅延させます。
- Web Workersを使用する: 重い計算をワーカースレッドにオフロードします。
また、サードパーティのスクリプトでメインスレッドをブロックしていないことを確認してください。定期的に監査しましょう。
Cumulative Layout Shift（CLS）の改善
CLSは予期しないレイアウトのシフトを測定します。低く保つには：
- サイズ属性を設定する: 画像や動画には常に
widthとheightを含めます。 - 動的コンテンツのスペースを確保する: 広告や埋め込みにはCSSの
aspect-ratioまたはプレースホルダーを使用します。 - 既存のコンテンツの上にコンテンツを挿入しない: ユーザーのインタラクションに応答する場合を除きます。
- transformアニメーションを使用する: アニメーションにはレイアウトをトリガーするプロパティではなく、
transformとopacityを優先します。
ツールとワークフロー
CWVを継続的に監視および改善するためのシンプルなワークフローを紹介します：
| ステップ | アクション | ツール |
|---|---|---|
| 1 | ベースライン監査 | PageSpeed Insights, Lighthouse |
| 2 | 問題の特定 | Chrome DevTools Performanceパネル |
| 3 | 修正の適用 | コード変更、画像最適化 |
| 4 | フィールドデータの監視 | web-vitals + アナリティクス, CrUX |
改善は時間をかけて実ユーザーデータで検証する必要があることを忘れないでください。
FAQ
Core Web Vitalsの現在のしきい値は？
LCP ≤ 2.5秒、INP ≤ 200ミリ秒、CLS ≤ 0.1で、ページ読み込みの75パーセンタイルで測定されます。
Core Web Vitalsはどのくらいの頻度で確認すべきですか？
フィールドデータを継続的に監視し、大きな変更後にラボ監査を実行します。月次レビューが良い習慣です。
サイトを再設計せずにCore Web Vitalsを改善できますか？
はい。画像最適化、スクリプトの遅延、サイズ属性の設定など、多くの改善は最小限のコード変更で行えます。
LCPを改善するために画像を最適化する準備はできましたか？無料のImage Compressorを試して、ファイルサイズを即座に削減しましょう。