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

Web2026-10-24TryQuickToolBox

ユーザーは高速でスムーズな体験を期待しています。サイトが遅いとユーザーは離れてしまい、検索エンジンもそれを認識します。Core Web Vitalsは、実際のユーザー体験を定量化する指標です。読み込み速度、インタラクティブ性、視覚的安定性を測ります。このガイドでは、その測定方法と実践的な改善方法を紹介します。

Core Web Vitalsとは？

Core Web Vitalsは、Googleがユーザー体験の重要な側面を捉えるために定義した3つの指標のセットです。

Largest Contentful Paint (LCP): 読み込みパフォーマンスを測定します。最大のコンテンツ要素（多くの場合、ヒーロー画像や見出し）が表示されるまでの時間を示します。目標はLCPを2.5秒未満にすることです。
Interaction to Next Paint (INP): 応答性を測定します。ユーザーの操作（クリック、タップ、キー押下）から次の視覚的更新までの時間を記録します。目標はINPを200ミリ秒未満にすることです。
Cumulative Layout Shift (CLS): 視覚的安定性を測定します。読み込み中の予期しないレイアウトシフトを定量化します。目標はCLSを0.1未満にすることです。

これらのしきい値は、実際のユーザーからのフィールドデータ（75パーセンタイル）に基づいています。ラボデータは問題の診断に役立ちますが、フィールドデータは実際の体験を反映します。

Core Web Vitalsの測定方法

フィールドデータとラボデータの両方が必要です。フィールドデータは実際のユーザーのパフォーマンスを示し、ラボデータはデバッグや変更のテストに役立ちます。

フィールドデータツール

Chrome UX Report (CrUX): 数百万のサイトの実際のユーザーデータを集約したものです。PageSpeed Insights、Search Console、またはCrUX APIからアクセスできます。
web-vitals JavaScriptライブラリ: 指標をアナリティクスエンドポイントに送信して、独自のフィールドデータを収集します。

ラボデータツール

Lighthouse: Chrome DevToolsに組み込まれており、監査を実行し、改善の機会を提供します。
WebPageTest: ネットワークスロットリングとフィルムストリップを備えた高度なテストが可能です。
Chrome DevTools Performanceパネル: ランタイムパフォーマンスを深く分析します。

まずPageSpeed Insightsから始めましょう。URLのフィールドデータとラボデータの両方が表示されます。その後、ローカルでLighthouseを使用して反復作業を行います。

LCPの改善

LCPは多くの場合、修正するのが最も効果的な指標です。最大の要素は通常、画像またはテキストブロックです。以下の領域を最適化します。

LCP画像を最適化する: 圧縮し、WebPやAVIFなどのモダンなフォーマットで配信し、明示的な寸法を設定します。
LCPリソースをプリロードする: ファーストビューで使用される画像やフォントには<link rel="preload">を使用します。
レンダリングをブロックするリソースを排除する: クリティカルCSSをインライン化し、非クリティカルなCSSとJavaScriptを遅延させます。
CDNを使用する: ユーザーに近い場所からアセットを配信します。
サーバー応答時間を短縮する: バックエンドを最適化し、キャッシュを使用し、エッジレンダリングを検討します。

例: ヒーロー画像をプリロードする:

<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は応答性を測定します。長いタスクはメインスレッドをブロックし、視覚的フィードバックを遅らせます。一般的な修正方法:

長いタスクを分割する: setTimeoutやscheduler.yield()を使用してメインスレッドに制御を戻します。
イベントハンドラを最適化する: 頻繁なイベントをデバウンスまたはスロットルし、重い同期処理を避けます。
JavaScriptを削減する: コード分割、ツリーシェイキング、非クリティカルなスクリプトの遅延を行います。
Web Workersを使用する: CPU負荷の高いタスクに使用します。
大規模なDOM更新を避ける: DOMの変更をバッチ処理し、requestAnimationFrameを使用します。

web-vitalsライブラリでINPを測定し、Performanceパネルで遅いインタラクションを特定します。

CLSの改善

レイアウトシフトは、要素が予期せず位置を変えたときに発生します。以下の方法で防ぎます。

画像や動画にサイズ属性を設定する（widthとheight）。
広告や埋め込み用のスペースを確保する: CSSのaspect-ratioや固定コンテナを使用します。
ユーザーの操作に応じない限り、既存のコンテンツの上にコンテンツを挿入しない。
font-display: swapを使用し、フォントをプリロードしてFOIT/FOUTによるシフトを最小限に抑えます。
レイアウトをトリガーするプロパティではなくtransformでアニメーションする。

クイック比較: 指標と目標値

指標	測定内容	良好な目標値	一般的な修正方法
LCP	読み込みパフォーマンス	≤ 2.5秒	画像の最適化、プリロード、CDN
INP	応答性	≤ 200ミリ秒	長いタスクの分割、JSの削減
CLS	視覚的安定性	≤ 0.1	寸法の設定、スペースの確保

監視と反復

パフォーマンスは一度の修正で終わるものではありません。継続的な監視を設定します。

web-vitalsライブラリを使用して指標をアナリティクスに送信します。
Lighthouse CIを使用してCI/CDパイプラインでリグレッションのアラートを設定します。
Search Consoleで定期的にフィールドデータを確認します。

改善はラボスコアだけでなく、実際のユーザーデータで検証することを忘れないでください。

FAQ

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

Core Web Vitalsは、読み込み、インタラクティブ性、視覚的安定性を測定するユーザー中心のパフォーマンス指標（LCP、INP、CLS）です。ユーザー体験と相関し、Googleのランキングシグナルとして使用されるため重要です。

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

フィールドデータは毎月、および主要なリリース後に確認してください。開発中はラボツールを使用してリグレッションを早期に発見します。実際のユーザー指標による継続的な監視が理想的です。

サイトを再構築せずにCore Web Vitalsを改善できますか？

はい。画像の最適化、主要リソースのプリロード、スクリプトの遅延、要素の寸法設定など、多くの改善は完全なリデザインなしで段階的に適用できます。

LCPを改善するために画像をすばやく圧縮する必要がありますか？無料のImage Compressorを試して、品質を損なわずにファイルサイズを削減しましょう。