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

Web2026-11-05TryQuickToolBox

高速なウェブサイトを構築したのに、ユーザーからはまだ遅いという苦情が寄せられる。あるいは、Googleのアップデート後にSEOの順位が下がったかもしれない。Core Web Vitals（CWV）が原因である可能性が高いです。これらの指標は実際のユーザー体験を測定し、検索順位やコンバージョン率に直接影響します。このガイドでは、CWVとは何か、正確に測定する方法、そしてそれぞれを改善するための実践的な手順を学びます。

Core Web Vitalsとは？

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

Largest Contentful Paint（LCP）： 読み込みパフォーマンスを測定します。最大のコンテンツ要素（画像、テキストブロック、動画）が表示されるまでの時間を示します。良好なLCPは2.5秒以下です。
Interaction to Next Paint（INP）： 応答性を測定します。すべてのインタラクション（クリック、タップ、キー押下）のレイテンシを記録し、最悪のもの（インタラクションが多いページではほぼ最悪のもの）を報告します。良好なINPは200ミリ秒以下です。
Content Layout Shift（CLS）： 視覚的安定性を測定します。ページ読み込み中の予期しないレイアウトシフトを定量化します。良好なCLSは0.1以下です。

これらのしきい値は、モバイルとデスクトップに分けられたページ読み込みの75パーセンタイルに基づいています。したがって、ユーザーの75%が良好な値を経験するようにする必要があります。

Core Web Vitalsの測定方法

CWVは2つの方法で測定できます：ラボ（合成テスト）とフィールド（リアルユーザーモニタリング）。どちらも価値がありますが、Googleがランキングに使用するのはフィールドデータです。

フィールドデータ：リアルユーザーモニタリング（RUM）

フィールドデータは実際のユーザーから得られます。最良のソースはChrome User Experience Report（CrUX）で、Google Search ConsoleのCore Web Vitalsレポートを支えています。web-vitalsライブラリを使用して独自のRUMデータを収集し、分析エンドポイントに送信することもできます。

サイトのCrUXデータを表示するには、PageSpeed InsightsまたはCrUX APIを使用します。これらはオリジンに対するLCP、INP、CLSの分布を示します。

ラボデータ：合成テスト

ラボツールは制御された環境でページ読み込みをシミュレートします。デバッグやCI/CD統合に最適です。人気のオプション：

Lighthouse： Chrome DevToolsに組み込まれています。AuditsタブまたはCLIで実行します。
WebPageTest： フィルムストリップとウォーターフォールチャートを備えた高度なテスト。
PageSpeed Insights： ラボデータとフィールドデータを組み合わせます。

覚えておいてください：ラボデータには実際の変動性が含まれないため、診断用として使用し、ランキングの予測因子としては使用しないでください。

Largest Contentful Paint（LCP）の改善

LCPは通常、修正するのに最も影響の大きい指標です。最大の要素は多くの場合、ヒーロー画像、見出し、または動画のポスターです。LCPを改善するには：

画像を最適化する： 画像を圧縮し、WebPやAVIFなどの最新形式を使用し、srcsetでレスポンシブサイズを提供します。Image Compressorのようなツールは、品質を損なわずにファイルサイズを削減するのに役立ちます。
LCPリソースをプリロードする： ヒーロー画像やフォントに<link rel="preload">を追加して、読み込みを早く開始します。
レンダリングブロックリソースを排除する： クリティカルCSSをインライン化し、非クリティカルCSSを遅延させ、JavaScriptを非同期で読み込みます。
CDNを使用する： コンテンツデリバリネットワークからアセットを配信してレイテンシを削減します。
積極的にキャッシュする： 静的アセットにCache-Controlヘッダーで長いキャッシュ寿命を設定します。

LCP画像をプリロードする例：

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

Interaction to Next Paint（INP）の改善

INPはページがユーザー入力にどれだけ迅速に応答するかを測定します。高いINPは、メインスレッドをブロックする長いJavaScriptタスクから生じることがよくあります。INPを改善するには：

長いタスクを分割する： setTimeout、requestIdleCallback、またはScheduler APIを使用してメインスレッドに譲ります。
イベントハンドラを最適化する： 高コストのハンドラをデバウンスまたはスロットルし、レイアウトスラッシングを避けます。
JavaScriptのサイズを削減する： コード分割、ツリーシェイキング、非クリティカルスクリプトの遅延を行います。
Webワーカーを使用する： 重い計算をワーカースレッドにオフロードします。
サードパーティスクリプトを最小化する： サードパーティスクリプトは長いタスクを引き起こすことがよくあります。非同期で読み込み、影響を監査します。

web-vitalsライブラリを使用してフィールドでINPを測定できます：

import {onINP} from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value);
  // Send to your analytics endpoint
});

Content Layout Shift（CLS）の改善

CLSは、読み込み中に要素が予期せず移動するときに発生します。一般的な原因：寸法のない画像、広告、埋め込み、FOIT/FOUTを引き起こすWebフォント。CLSを改善するには：

画像と動画に常にwidthとheight属性を設定する。これによりスペースが確保されます。
動的コンテンツ（広告、埋め込み）のスペースを確保するには、CSSのmin-heightまたはアスペクト比ボックスを使用します。
font-display: swapを使用するか、フォントをプリロードして、非表示テキストやレイアウトシフトを避けます。
ユーザーインタラクションに応答する場合を除き、既存コンテンツの上にコンテンツを挿入しない。

CSSのアスペクト比でスペースを確保する例：

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.video-container iframe {
  width: 100%;
  height: 100%;
}

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

CWVの改善は一度きりのタスクではありません。継続的なモニタリングを設定しましょう：

Lighthouse CI： CI/CDパイプラインでLighthouseを実行し、スコアが下がったらビルドを失敗させます。
リアルユーザーモニタリング： web-vitalsライブラリを使用して、指標を分析プラットフォーム（Google Analytics 4、カスタムエンドポイントなど）に送信します。
Search Console： Core Web Vitalsレポートを監視してリグレッションを確認します。
アラート： フィールドデータがしきい値を超えたときにアラートを設定します。

簡単なチェックには、HTML to Imageツールを使用して、ページのさまざまな段階での視覚的スナップショットをキャプチャし、レイアウトシフトを手動で発見するのに役立てます。

FAQ

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

良好：LCP ≤ 2.5秒、INP ≤ 200ミリ秒、CLS ≤ 0.1。改善が必要：LCP ≤ 4秒、INP ≤ 500ミリ秒、CLS ≤ 0.25。不良：それ以上の値。

CrUXデータはどのくらいの頻度で更新されますか？

CrUXデータは毎日更新されますが、28日間のローリングウィンドウのため、変更が反映されるまでには時間がかかります。より迅速なフィードバックには、独自のRUMを使用してください。

デザインを変更せずにCore Web Vitalsを改善できますか？

はい。多くの改善は技術的です：画像圧縮、プリロード、スクリプトの遅延、スペースの確保。これらはしばしば視覚的な影響を与えません。

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