TryQuickToolBox

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

Web2026-10-11TryQuickToolBox

ユーザーはせっかちです。ページの読み込みが遅すぎたり、読もうとしているときにコンテンツが動き回ったりすると、離脱してしまいます。Googleはこれを理解しており、ランキングアルゴリズムでCore Web Vitalsを使用して実際のユーザー体験を測定しています。しかし、SEOだけでなく、Core Web Vitalsはコンバージョン率やユーザー満足度に直接影響します。このガイドでは、各指標の意味、正確な測定方法、そして最も重要な、実践的なコードレベルの修正による改善方法を説明します。

Core Web Vitalsとは？

Core Web Vitalsは、ユーザー体験の重要な側面（読み込み、インタラクティブ性、視覚的安定性）を定量化する3つの指標のセットです。これらはGoogleのページエクスペリエンスシグナルの一部です。

これらの閾値は、ラボテストではなく実際のユーザーからのフィールドデータに基づいています。そのため、正確に測定することが重要です。

Core Web Vitalsの測定方法

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

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

ラボツール（合成テスト）

まずPageSpeed Insightsで概要を把握し、次にDevToolsで特定の問題をデバッグします。

LCPの改善：メインコンテンツの読み込みを高速化

LCPは多くの場合、修正するのに最も影響の大きい指標です。LCPが悪い一般的な原因には、遅いサーバー応答、レンダリングをブロックするリソース、最適化されていない画像があります。

  1. 画像を最適化する: 画像を圧縮し、WebPやAVIFなどの最新フォーマットを使用し、srcsetでレスポンシブ画像を提供します。Image Compressorなどのツールは、目に見える品質低下なしにファイルサイズを削減するのに役立ちます。
  2. LCP画像をプリロードする: ヒーロー画像に<link rel="preload">を追加して、より早く読み込みを開始します。
  3. サーバー応答時間を短縮する: CDNを使用し、キャッシュを有効にし、バックエンドクエリを最適化します。Nginxの場合は、fastcgi_cacheやproxy_cacheを検討してください。
  4. レンダリングをブロックするリソースを排除する: クリティカルCSSをインライン化し、非クリティカルなCSSとJavaScriptを遅延させます。
  5. コンテンツ配信ネットワーク（CDN）を使用する: ユーザーに近い場所からアセットを配信します。
<!-- Preload LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- Responsive images -->
<img src="#" srcset="hero-480.webp 480w, hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero">

INPの改善：インタラクションを瞬時に感じさせる

INPは2024年3月にFirst Input Delay (FID)を置き換えました。処理前の遅延だけでなく、インタラクションの全期間を測定します。INPを改善するには、JavaScriptの実行時間を減らし、長いタスクを避ける必要があります。

  1. 長いタスクを分割する: setTimeoutやrequestIdleCallbackを使用してメインスレッドに譲ります。
  2. イベントハンドラを最適化する: 高コストなハンドラをデバウンスまたはスロットルし、レイアウトスラッシングを避けます。
  3. JavaScriptバンドルサイズを削減する: コード分割、ツリーシェイキング、非クリティカルなスクリプトの遅延読み込みを行います。
  4. Web Workersを使用する: 重い計算をメインスレッドから移動します。
  5. サードパーティスクリプトを最小化する: これらはしばしばメインスレッドをブロックします。非同期で読み込むか遅延させます。

DevToolsのPerformanceパネルを使用してインタラクションを記録し、長いタスクを特定します。

CLSの改善：レイアウトを安定させる

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

  1. 画像と動画に常にwidthとheight属性を設定する: これによりブラウザがスペースを予約できます。
  2. 広告と埋め込みにスペースを予約する: CSSのaspect-ratioや固定サイズのコンテナを使用します。
  3. 既存のコンテンツの上にコンテンツを挿入しない: どうしても必要な場合は、ユーザーの操作に応じて行います。
  4. font-display: swapを慎重に使用する: フォントメトリクスが異なると、swapはレイアウトシフトを引き起こす可能性があります。font-display: optionalやフォントのプリロードを検討してください。
  5. アニメーションにはCSS transformsを使用する: これらはレイアウトシフトを引き起こしません。
<!-- Reserve space with aspect-ratio -->
<img src="#" width="800" height="600" alt="...">

Core Web Vitals指標の比較

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

モニタリングと継続的改善

Core Web Vitalsの改善は一度きりの作業ではありません。修正をデプロイした後、フィールドデータを監視して回帰が発生しないようにします。指標が閾値を超えたときにRUMツールでアラートを設定します。CIで定期的にLighthouseを実行して、パフォーマンスの回帰が本番環境に到達する前にキャッチします。

パフォーマンスは機能であることを忘れないでください。Core Web Vitalsを優先することで、ユーザーを引き付け、検索ランキングを向上させるより良い体験を提供できます。

FAQ

Core Web Vitalsの現在の閾値は？

LCPでは、良好は2.5秒未満、改善が必要は2.5～4.0秒、不良は4.0秒超です。INPでは、良好は200ミリ秒未満、改善が必要は200～500ミリ秒、不良は500ミリ秒超です。CLSでは、良好は0.1未満、改善が必要は0.1～0.25、不良は0.25超です。

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

CrUXのフィールドデータは毎日更新されますが、28日間の移動平均です。継続的に監視し、重要なコード変更のたびにラボテストを実行する必要があります。CI/CDパイプラインで自動化されたLighthouse実行を設定して、回帰を早期にキャッチしましょう。

開発者なしでCore Web Vitalsを改善できますか？

画像の圧縮やキャッシュの有効化など、一部の修正はプラグインやホスティング設定で行えます。ただし、コード分割やレンダリングをブロックするリソースの排除など、より深い最適化には通常開発者の関与が必要です。フィールドデータに基づいて、最も影響の大きい指標を優先してください。

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