Core Web Vitals: Webパフォーマンスの測定と改善

Core Web Vitalsがウェブサイトにとって重要な理由

Core Web Vitals（CWV）について聞いたことがあるでしょう。これはGoogleがユーザーエクスペリエンスを測る指標です。しかし、あなたのサイトが遅い、またはカクつくと感じているなら、それはあなただけではありません。多くの開発者がCWVスコアを具体的な修正に結びつけるのに苦労しています。このガイドでは、各指標を測定し改善するための実践的な手順とコードスニペットを紹介します。

Core Web Vitalsは3つの特定の指標です：読み込みパフォーマンスのLargest Contentful Paint（LCP）、インタラクティブ性のFirst Input Delay（FID）、視覚的安定性のCumulative Layout Shift（CLS）。Googleはこれらをランキングシグナルとして使用しているため、最適化することはユーザーとSEOの両方に利益をもたらします。

3つのCore Web Vitalsを理解する

修正に飛び込む前に、各指標が何を測定し、良いスコアの閾値が何かを明確にしましょう。

注：FIDは2024年3月にInteraction to Next Paint（INP）に置き換えられますが、最適化の原則は同様です。ここではFIDに焦点を当てます。まだ広く参照されているためです。

Core Web Vitalsの測定方法

完全な全体像を得るには、ラボデータとフィールドデータの両方が必要です。ラボデータ（合成テスト）はデバッグに役立ち、フィールドデータ（リアルユーザーモニタリング）は実際のユーザーエクスペリエンスを示します。

ラボツール

• Chrome DevToolsのLighthouse：Lighthouseタブで監査を実行します。
• PageSpeed Insights：URLのラボデータとフィールドデータの両方を提供します。
• WebPageTest：カスタムネットワーク条件での高度なテスト。

フィールドツール

• Chrome User Experience Report (CrUX)：実ユーザー指標の公開データセット。
• Google Search Console：Core Web Vitalsレポートでグループパフォーマンスを表示します。
• web-vitals JavaScriptライブラリ：アナリティクスで実ユーザーから指標を収集します。

フィールドデータを収集するには、web-vitalsライブラリを含め、指標をアナリティクスエンドポイントに送信します：

<script type="module">
import {onLCP, onFID, onCLS} from 'https://unpkg.com/web-vitals@3?module';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);
</script>

これにより、ラボテストを補完する実際のデータが得られます。

Largest Contentful Paint (LCP)の改善

LCPは、最大のコンテンツ要素（画像、テキストブロック、またはビデオ）が表示されるまでの時間を測定します。改善するには、サーバー応答時間、リソースの読み込み、レンダリングブロックリソースに焦点を当てます。

1. サーバー応答時間の最適化

• CDNを使用してユーザーに近い場所からコンテンツを配信します。
• キャッシュを有効にします（HTTPキャッシュヘッダー、サーバーサイドキャッシュ）。
• TTFB（Time to First Byte）が常に高い場合は、ホスティングをアップグレードします。

2. 画像の最適化

• 画像を圧縮し、WebPやAVIFなどのモダンなフォーマットを使用します。
• srcsetとsizesを使用したレスポンシブ画像を使用します。
• フォールド以下の画像は遅延読み込みしますが、LCP画像の遅延読み込みは避けます。

簡単な画像圧縮には、Image Compressorをお試しください。

3. レンダリングブロックリソースの排除

• クリティカルCSSをインライン化し、非クリティカルCSSを遅延させます。
• JavaScriptにはasyncまたはdeferを使用します。
• CSSとJavaScriptを縮小化します。

4. 重要なリソースのプリロード

フォントやヒーロー画像などの主要アセットには<link rel="preload">を使用します：

<link rel="preload" href="/hero.webp" as="image">

First Input Delay (FID)の改善

FIDは、ユーザーがページと最初にインタラクションしてからブラウザが応答できるまでの時間を測定します。長いJavaScriptタスクはメインスレッドをブロックし、遅延を引き起こします。

1. 長いタスクの分割

長時間実行されるJavaScriptをsetTimeoutやrequestIdleCallbackを使用して小さなチャンクに分割します。例えば：

function processItems(items) {
  if (items.length === 0) return;
  const item = items.pop();
  // Process item
  setTimeout(() => processItems(items), 0);
}

2. イベントハンドラの最適化

• 入力ハンドラをデバウンスまたはスロットルします。
• イベントリスナー内での複雑な計算を避け、Web Workersにオフロードします。

3. JavaScript実行時間の削減

• 動的インポートでコード分割します。
• 未使用のJavaScriptを削除します（ツリーシェイキング）。
• 非クリティカルなiframeにはloading="lazy"を使用します。

4. 重いタスクにはWeb Workersを使用

CPU集約的な作業をメインスレッドから移動します：

const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => { /* handle result */ };

Cumulative Layout Shift (CLS)の改善

CLSは予期しないレイアウトシフトを測定します。一般的な原因には、寸法のない画像、広告、埋め込み、Webフォントがあります。

1. メディアに常に幅と高さを設定

画像やビデオにwidthとheight属性を含めるか、CSSのaspect-ratioを使用します：

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

2. 動的コンテンツのスペースを確保

広告や埋め込みの場合、プレースホルダー要素でスペースを確保するか、固定サイズを設定します。

3. 既存コンテンツの上にコンテンツを挿入しない

バナーを挿入する必要がある場合は、レイアウトをシフトしないトランスフォームアニメーションまたはオーバーレイを使用します。

4. font-display: swapの使用

Webフォントによる不可視テキストとレイアウトシフトを防ぎます：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

モニタリングと継続的改善

Core Web Vitalsの最適化は一度きりのタスクではありません。以下のようなツールで継続的なモニタリングを設定します：

• Google Search Console：CWVの低下に対するアラート。
• Lighthouse CI：プルリクエストごとに監査を実行。
• Real User Monitoring (RUM)：New Relic、Datadog、またはカスタムアナリティクスなどのツール。

定期的にフィールドデータを確認し、修正を繰り返します。最もスコアの悪い指標を最初に優先します。

FAQ

Core Web Vitalsとは何ですか？

Core Web Vitalsは、Googleがユーザーエクスペリエンスを測定するために使用する指標セットです：LCP（読み込み）、FID（インタラクティブ性）、CLS（視覚的安定性）。

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

Search ConsoleまたはRUMを介してフィールドデータを継続的に監視します。大きな変更後と少なくとも月に一度はラボテストを実行します。

Core Web Vitalsの改善はSEOに影響しますか？

はい、Core Web Vitalsはランキングシグナルです。スコアが向上すると、検索での可視性とユーザー満足度が向上する可能性があります。

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