TryQuickToolBox

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

Web2026-10-13TryQuickToolBox

ユーザーはせっかちです。サイトの読み込みに数秒以上かかると、離れてしまいます。検索エンジンも同様で、Core Web Vitalsはランキングシグナルです。しかし、改善しようとすると、指標やツールの迷路のように感じられます。このガイドでは、混乱を取り除きます。各指標の意味、正確な測定方法、そして改善するための具体的な手順を学べます。

Core Web Vitalsとは？

Core Web Vitalsは、実際のユーザー体験を定量化する3つの指標です：

これらの指標は、実際のユーザーセッション（フィールドデータ）と合成テスト（ラボデータ）から測定されます。ランキングで重要なのはフィールドデータです。

Core Web Vitalsの測定方法

ラボデータとフィールドデータの両方が必要です。ラボデータはデバッグに役立ち、フィールドデータは実際のユーザー体験を反映します。

ラボツール

フィールドツール

フィールドデータを収集するには、web-vitalsライブラリをサイトに追加します：

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

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

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

これにより、実ユーザー指標の継続的なストリームが得られます。

LCPの改善

LCPは通常、最大の画像、動画、またはテキストブロックです。改善するには、クリティカルパスに焦点を当てます。

  1. 画像を最適化する：画像を圧縮し、WebPやAVIFなどのモダンなフォーマットを使用し、明示的な幅と高さを設定します。Image Compressorのようなツールは、目に見える品質低下なしにファイルサイズを削減するのに役立ちます。
  2. LCPリソースをプリロードする：ヒーロー画像やフォントに<link rel="preload">を追加します。
  3. サーバー応答時間を短縮する：CDNを使用し、キャッシュを有効にし、バックエンドクエリを最適化します。
  4. レンダリングをブロックするリソースを排除する：クリティカルCSSをインライン化し、非クリティカルなJavaScriptを遅延させます。
  5. レスポンシブ画像を使用する：srcsetで適切なサイズの画像を配信します。

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

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

INPの改善

INPは応答性を測定します。長いタスクはメインスレッドをブロックし、視覚的なフィードバックを遅らせます。

メインスレッドに譲る例：

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

CLSの改善

CLSは、要素が予期せず移動したときに発生します。一般的な原因：サイズ未指定の画像、広告、埋め込み、動的に挿入されるコンテンツ。

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

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

ツールとワークフロー

パフォーマンスチェックを開発ワークフローに統合します：

指標と目標の比較

指標測定内容良好な目標
LCP読み込みパフォーマンス< 2.5 s
INP応答性< 200 ms
CLS視覚的安定性< 0.1

FAQ

Core Web Vitalsとは何ですか？

Core Web Vitalsは、LCP、INP、CLSの3つの指標で、読み込み、インタラクティブ性、視覚的安定性を測定します。Googleがランキングシグナルとして使用しています。

Core Web Vitalsを測定するにはどうすればよいですか？

デバッグにはLighthouseなどのラボツールを、実ユーザーデータにはweb-vitalsライブラリやCrUXなどのフィールドツールを使用します。両方が重要です。

良好なLCPスコアとは？

良好なLCPは2.5秒未満です。4秒を超えると不良です。画像を最適化し、クリティカルリソースをプリロードし、サーバー応答時間を短縮します。

サイトを高速化する準備はできましたか？まずは無料のImage Compressorで画像を圧縮して、LCPをすぐに改善しましょう。