Core Web Vitals: 測定と改善でWebパフォーマンスを向上

高速なWebサイトを構築したのに、ユーザーからは遅いという苦情がまだ寄せられる。あるいは、Googleのアップデート後にSEOランキングが下落したかもしれない。原因はCore Web Vitals—Googleがユーザー体験を測る指標—にあるかもしれません。このガイドでは、Core Web Vitalsとは何か、リアルユーザーデータで測定する方法、そして改善するための実践的な手順を学びます。

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）はデバッグに役立ち、フィールドデータ（リアルユーザーモニタリング）は実際のパフォーマンスを示します。

1. Chrome UX Report (CrUX) を使う

CrUXは数百万のサイトについて集計されたリアルユーザーデータを提供します。PageSpeed InsightsやCrUXダッシュボードで表示できます。オリジンごとのLCP、FID、CLSの分布がわかります。

2. リアルユーザーモニタリング (RUM) を設定する

Google Analytics 4、Vercel Analytics、オープンソースライブラリ（web-vitals）などのツールを使って、実際の訪問者からCore 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);

このスニペットはweb-vitalsライブラリを使って指標を取得し、ページ読み込みに影響を与えずにsendBeaconで送信します。

3. ラボテストにはLighthouseを使う

Lighthouse（Chrome DevToolsまたはPageSpeed Insights内）はページ読み込みをシミュレートし、Core Web Vitalsと改善の機会を報告します。主要なページで実行し、時間の経過とともに変化を追跡しましょう。

LCPの改善

LCPはしばしば最も影響の大きい指標です。改善するには：

• 画像を最適化する：画像を圧縮し、モダンなフォーマット（WebP、AVIF）を使い、srcsetでレスポンシブサイズを提供します。
• 重要なリソースをプリロードする：LCP画像やフォントには<link rel="preload">を使います。
• サーバー応答時間を短縮する：CDN、キャッシュ、バックエンドクエリの最適化を使います。
• レンダリングをブロックするリソースを排除する：重要でないCSS/JSを遅延させ、クリティカルCSSをインライン化します。

例えば、ヒーロー画像をプリロードします：

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

FIDの改善

FIDは入力の応答性を測定します。改善するには：

• 長いタスクを分割する：setTimeoutやrequestIdleCallbackを使ってメインスレッドに制御を戻します。
• メインスレッドの作業を最小化する：JavaScriptの実行時間を減らし、大きなバンドルを避けます。
• 重い計算にはWebワーカーを使う。
• イベントハンドラを最適化する：頻繁なイベントをデバウンスまたはスロットルします。

また、2024年にFIDを置き換えるInteraction to Next Paint (INP) への移行も検討してください。INPはすべてのインタラクションを測定するため、同じ最適化が適用されます。

CLSの改善

CLSは視覚的な安定性に関するものです。一般的な原因と修正方法：

• サイズ指定のない画像：常にwidthとheight属性を設定するか、CSSのaspect-ratioを使います。
• 広告、埋め込み、iframe：プレースホルダーでスペースを確保するか、固定サイズを設定します。
• 動的コンテンツの挿入：ユーザー操作への応答でない限り、既存コンテンツの上にコンテンツを挿入しないようにします。
• Webフォント：font-display: swapを使い、フォントをプリロードして不可視テキストやレイアウトシフトを避けます。

例：画像のスペースを確保する：

<img src="#" width="800" height="600" alt="...">

Core Web Vitalsの比較

継続的なモニタリングのためのツール

Core Web Vitalsの改善は一度きりの作業ではありません。フィールドデータを追跡するダッシュボードを設定しましょう。使用するもの：

• Google Search Console：Core Web Vitalsレポートで注意が必要なURLグループを表示します。
• PageSpeed Insights：ラボデータとフィールドデータを組み合わせます。
• Web Vitals拡張機能：閲覧中にリアルタイムの指標を表示します。
• RUMツール：SpeedCurve、Calibre、またはオープンソースの代替品など。

定期的にサイトを監査し、特に大きな変更後には必ず行いましょう。

FAQ

Core Web Vitalsとは何で、なぜ重要なのですか？

Core Web VitalsはGoogleがユーザー体験を測定するために使う3つの指標（LCP、FID、CLS）です。SEOランキングに影響し、実際のユーザー満足度を反映するため重要です。

Core Web Vitalsはどのくらいの頻度で測定すべきですか？

リアルユーザーモニタリングで継続的に、また重要なコードやコンテンツの変更後には必ず測定します。ラボテストは開発中およびリリース前に実行すべきです。

開発者なしでCore Web Vitalsを改善できますか？

画像の圧縮や画像サイズの設定など、一部の修正はコンテンツ編集者が行えます。しかし、より深い最適化には開発者の関与が必要なことが多いです。

LCP向上のために画像を最適化する準備はできましたか？無料のImage Compressorを試して、品質を損なわずにファイルサイズを削減しましょう。