Core Web Vitals：測定と改善でウェブパフォーマンスを向上

Web2026-11-03TryQuickToolBox

高速なウェブサイトを構築したのに、ユーザーからは遅いという苦情がまだ寄せられる。あるいは、Google Search ConsoleでページのCore Web Vitalsが「不良」と表示されているかもしれない。あなただけではありません。多くの開発者が、パフォーマンス指標を実際の改善に結びつけるのに苦労しています。Core Web Vitalsは、読み込み、インタラクティブ性、視覚的安定性を数値化するGoogleのユーザー中心の指標です。これらを無視すると、検索ランキングやユーザー満足度に悪影響を及ぼす可能性があります。このガイドでは、各Vitalを測定し改善するための実践的な手順を説明します。

Core Web Vitalsとは？

Core Web Vitalsは、Googleがユーザー体験を評価するために使用する3つの指標のセットです：

Largest Contentful Paint (LCP)：読み込みパフォーマンスを測定します。最大のコンテンツ要素（画像、テキストブロック、動画）が表示されるまでの時間を示します。LCPは2.5秒未満を目指しましょう。
First Input Delay (FID)：インタラクティブ性を測定します。ユーザーが最初に操作（リンクのクリックなど）してからブラウザが応答するまでの時間を記録します。FIDは100ミリ秒未満を目指しましょう。
Cumulative Layout Shift (CLS)：視覚的安定性を測定します。ページ読み込み中の予期しないレイアウトシフトを数値化します。CLSは0.1未満を目指しましょう。

これらの指標はGoogleのページエクスペリエンスシグナルの一部であり、SEOに直接影響します。しかしそれ以上に、これらは実際のユーザーの不満—遅い読み込み、もたつく操作、飛び回るコンテンツ—を反映しています。

Core Web Vitalsの測定方法

測定しなければ改善はできません。主なアプローチは2つあります：ラボデータ（合成テスト）とフィールドデータ（リアルユーザーモニタリング）です。

ラボツール

Lighthouse：Chrome DevToolsに組み込まれており、パフォーマンスを監査し、LCP、FID（TBTとして）、CLSのスコアを提供します。拡張機能が結果を歪めないように、シークレットモードで実行してください。
WebPageTest：詳細なフィルムストリップとウォーターフォールチャートを提供し、LCPのボトルネックを診断するのに役立ちます。
PageSpeed Insights：ラボデータとフィールドデータを組み合わせ、LighthouseスコアとChrome User Experience Report（CrUX）からの実ユーザー指標の両方を表示します。

フィールドツール

Chrome UX Report (CrUX)：数百万のサイトの実ユーザー指標の公開データセット。PageSpeed InsightsまたはBigQuery経由でアクセスできます。
Google Search Console：「Core Web Vitals」レポートで、URLをステータス（不良、改善が必要、良好）別にグループ化します。
Web Vitals JavaScriptライブラリ：このスニペットをサイトに追加して、Google Analyticsまたは独自のエンドポイント経由で指標を収集します。

import {onLCP, onFID, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  // Replace with your analytics endpoint
  console.log(metric.name, metric.value);
}

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);

まずフィールドデータで問題のあるページを特定し、次にラボツールで原因を掘り下げます。

Largest Contentful Paint (LCP)の改善

LCPはしばしば修正が最も難しいVitalです。最大の要素は通常、ヒーロー画像または大きなテキストブロックです。最適化する方法は次のとおりです：

画像を最適化する：WebPやAVIFなどの最新フォーマットを使用して画像を圧縮します。srcsetとsizesを備えたレスポンシブ画像を使用して、適切なサイズの画像を配信します。スクロールせずに見えない画像は遅延読み込みしますが、LCP画像は絶対に遅延読み込みしないでください。
重要なリソースをプリロードする：LCP画像やフォントに<link rel="preload">を追加します。例：<link rel="preload" as="image" href="#">。
レンダリングをブロックするリソースを排除する：重要でないCSSとJavaScriptを遅延させます。クリティカルCSSをインライン化し、残りを非同期で読み込みます。
CDNを使用する：コンテンツ配信ネットワークからアセットを配信してレイテンシを削減します。
サーバー応答時間を短縮する：バックエンドクエリを最適化し、キャッシュを使用し、エッジレンダリングを検討します。

詳細については、web.devのLCPガイドをご覧ください。

First Input Delay (FID)の改善

FIDは応答性を測定します。FIDが高いということは、ブラウザのメインスレッドがビジーで、ユーザー入力に迅速に応答できないことを意味します。FIDを改善するには：

長いタスクを分割する：setTimeoutやrequestIdleCallbackを使用してJavaScriptを小さなチャンクに分割します。
メインスレッドの作業を最小化する：コード分割、ツリーシェイキング、未使用のポリフィルの削除によってJavaScriptの実行時間を削減します。
Web Workersを重い計算に使用する。
大きなJavaScriptバンドルを避ける：webpack-bundle-analyzerで監査し、重要でないスクリプトの遅延読み込みを検討します。

注：FIDは2024年3月にInteraction to Next Paint (INP)に置き換えられます。INPを改善する戦略も同様です—メインスレッドのブロッキングを減らすことに焦点を当ててください。

Cumulative Layout Shift (CLS)の改善

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

画像と動画には常にwidthとheight属性を含める。これによりブラウザがスペースを予約できます。
広告と埋め込み用のスペースを予約する：CSSのaspect-ratioまたはプレースホルダー要素を使用します。
ユーザー操作に応じた場合を除き、既存のコンテンツの上にコンテンツを挿入しない。
ウェブフォントにはfont-display: swapを使用すると、テキストが非表示になる（FOIT）のを防げますが、フォールバックフォントのメトリクスが異なる場合、swapがレイアウトシフトを引き起こす可能性があることに注意してください。size-adjustまたはfont-display: optionalの使用を検討してください。

Chrome DevToolsのLayout Instability APIでテストして、シフトを特定します。

継続的モニタリングのためのツールとワークフロー

パフォーマンスは一度の修正ではありません。ワークフローを設定しましょう：

ベースライン：主要ページでLighthouseを実行し、スコアを記録します。
フィールドデータを監視する：web-vitalsライブラリを使用して指標を分析プラットフォームに送信します。リグレッションのアラートを設定します。
CIに統合する：Lighthouse CIを使用して、パフォーマンス予算を超えた場合にビルドを失敗させます。
定期的な監査：Search ConsoleでCore Web Vitalsの月次レビューをスケジュールします。

改善は指標主導ではなく、ユーザー中心であるべきです。高速なサイトはユーザーを喜ばせ、SEOを向上させます。

FAQ

Core Web Vitalsの現在のしきい値は？

LCP：良好 ≤ 2.5秒、改善が必要 ≤ 4秒、不良 > 4秒。FID：良好 ≤ 100ms、改善が必要 ≤ 300ms、不良 > 300ms。CLS：良好 ≤ 0.1、改善が必要 ≤ 0.25、不良 > 0.25。

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

Search Consoleのフィールドデータは毎日更新されますが、意味のある傾向を把握するには数週間かかります。分析を通じて継続的に監視し、月次でレビューします。大きなコード変更後にはラボテストを実行します。

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

はい、Googleはページエクスペリエンスをランキングシグナルとして使用しています。コンテンツが依然として主要ですが、良好なCore Web Vitalsは、特に競争の激しい分野で優位に立つことができます。

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