TryQuickToolBox

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

Web2026-11-06TryQuickToolBox

ユーザーはページが瞬時に読み込まれ、遅延なく応答し、視覚的に安定していることを期待しています。GoogleのCore Web Vitals (CWV) はこれらの期待を数値化します。Largest Contentful Paint (LCP) は読み込みを、Interaction to Next Paint (INP) はインタラクティブ性を、Cumulative Layout Shift (CLS) は視覚的安定性を測定します。CWVスコアが悪いとユーザー体験が損なわれ、検索ランキングに影響を与える可能性があります。このガイドでは、各指標を測定し、開発者に優しい実践的なステップで改善する方法を紹介します。

Core Web Vitalsとは？

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

これらのしきい値は、モバイルとデスクトップに分けて、ページ読み込みの75パーセンタイルに基づいています。

Core Web Vitalsの測定方法

ラボデータとフィールドデータの両方が必要です。ラボツールは条件をシミュレートし、フィールドデータは実際のユーザーから得られます。

ラボツール

フィールドツール

web-vitalsライブラリをnpm経由でインストールするか、CDNから含めてから、指標をログに記録します：

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);

アンロードをブロックしないようにsendBeaconを使用してください。時間をかけてデータを収集し、傾向を確認します。

Largest Contentful Paint (LCP) の改善

LCPは多くの場合、ヒーロー画像またはメイン見出しです。クリティカルパスを最適化します：

  1. LCPリソースを優先する: LCP画像にfetchpriority="high"を追加するか、プリロードします。
  2. サーバー応答時間を短縮する: キャッシング、CDN、効率的なバックエンドクエリを使用します。
  3. レンダリングをブロックするリソースを排除する: 重要でないCSS/JSを遅延させ、クリティカルCSSをインライン化します。
  4. 画像を最適化する: 圧縮し、モダンなフォーマット（WebP/AVIF）を使用し、寸法を設定します。
  5. CDNを使用することで、ユーザーに近い場所からアセットを配信します。

例：LCP画像をプリロードし、fetchpriorityを設定します：

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">

画像圧縮には、Image Compressorを試して、目に見える品質低下なしでファイルサイズを削減してください。

Interaction to Next Paint (INP) の改善

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

  1. 長いタスクを分割する: setTimeout、requestIdleCallback、またはscheduler.yield()を使用してブラウザに制御を譲ります。
  2. イベントハンドラを最適化する: 入力をデバウンスし、クリックハンドラで重い処理を避けます。
  3. JavaScriptを削減する: コード分割、ツリーシェイキング、重要でないスクリプトの遅延を行います。
  4. Web Workersを使用することで、CPU集約的な処理を行います。
  5. 大規模なDOM更新を避ける: DOMの変更をバッチ処理し、長いリストには仮想化を使用します。

web-vitalsライブラリでフィールドのINPを測定し、Performanceパネルを使用してインタラクション中の長いタスクを特定します。

Cumulative Layout Shift (CLS) の改善

CLSは要素が予期せず移動するときに発生します。一般的な原因：寸法のない画像、スペースが確保されていない広告/埋め込み、遅れて読み込まれるフォント。

  1. 画像と動画には常に幅と高さを設定するか、CSSのaspect-ratioを使用します。
  2. 動的コンテンツ（広告、埋め込み）のスペースを確保するにはmin-heightを使用します。
  3. font-display: swapを使用すると、主要なフォントをプリロードして、不可視テキストやレイアウトシフトを避けます。
  4. ユーザーインタラクションによってトリガーされない限り、既存のコンテンツの上にコンテンツを挿入しないようにします。

例：レスポンシブ画像のアスペクト比を設定します：

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

Core Web Vitalsの比較

指標測定内容良好なしきい値主な最適化
LCP読み込みパフォーマンス≤2.5秒画像、サーバー、クリティカルCSSの最適化
INPインタラクティブ性≤200msJSの削減、長いタスクの分割
CLS視覚的安定性≤0.1寸法の設定、スペースの確保

CWVを改善する実践的なワークフロー

  1. ベースラインを測定する: Lighthouseを実行し、web-vitalsでフィールドデータを収集します。
  2. ボトルネックを特定する: Performanceパネルとネットワークウォーターフォールを使用します。
  3. 修正を優先する: 最もスコアが悪い指標に焦点を当てます。
  4. 変更を実装する: 画像を最適化し、スクリプトを遅延させ、寸法を設定します。
  5. テストと監視: ラボテストを再実行し、時間をかけてフィールドデータを追跡します。

CWVはフィールド指標であることを忘れないでください。ラボツールは診断に役立ちますが、実際のユーザーデータが真実の源です。

よくある質問

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

良好: LCP ≤2.5秒、INP ≤200ms、CLS ≤0.1。改善が必要: LCP ≤4秒、INP ≤500ms、CLS ≤0.25。不良: これらの値を超える場合。これらはページ読み込みの75パーセンタイルで評価されます。

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

フィールドデータを継続的に監視し、大きな変更後にラボ監査を実行します。少なくとも、Search ConsoleのCore Web Vitalsレポートを月に一度、およびフロントエンドパフォーマンスに影響するデプロイ後に確認してください。

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

はい。多くの改善は技術的なものです：画像を圧縮し、幅/高さ属性を設定し、重要でないJavaScriptを遅延させ、長いタスクを分割します。これらの変更は、視覚的な再設計なしで大幅な改善をもたらすことがよくあります。

より良いLCPのために画像を最適化する準備はできましたか？無料のImage Compressorを使用して、品質を維持しながら画像を縮小し、Core Web Vitalsスコアを向上させましょう。