TryQuickToolBox

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

Web2026-10-16TryQuickToolBox

高速なウェブサイトを構築したのに、ユーザーからは遅いという不満がまだ寄せられる。あるいは、Googleのアップデート後にSEO順位が下落したかもしれない。原因はCore Web Vitalsかもしれません。これはGoogleが実際のユーザー体験を測定するために使用する指標群です。これを無視すると、ユーザー満足度と検索での可視性の両方が損なわれる可能性があります。

このガイドでは、Core Web Vitalsとは何か、正確に測定する方法、そして各指標を改善するための実践的な手順を学びます。現在の3つの指標に焦点を当てます：Largest Contentful Paint（LCP）、Interaction to Next Paint（INP）、Cumulative Layout Shift（CLS）です。

Core Web Vitalsとは？

Core Web Vitalsは、Googleが優れたユーザー体験を提供するために不可欠と考えるWeb Vitalsのサブセットです。コンテンツがどれだけ速く読み込まれるか、ページがインタラクションにどれだけ応答するか、視覚的にどれだけ安定しているかを定量化します。

Googleはこれらの指標をランキングシグナルとして使用していますが、さらに重要なのは、これらが実際のユーザーの痛点を反映していることです。LCPが遅いと、コンテンツを待つユーザーをイライラさせます。INPが高いと、ページがもたつく感じを与えます。CLSが高いと、誤クリックや不快感を引き起こします。

3つのCore Web Vitals

これらのしきい値は、ラボテストではなく実際のユーザーからのフィールドデータに基づいています。Googleはページ読み込みの75パーセンタイルで評価します。つまり、ユーザー体験の75%が「良好」なしきい値を満たす必要があります。

Core Web Vitalsの測定方法

ラボデータとフィールドデータの両方が必要です。ラボツールは制御された条件下で単一のページ読み込みをシミュレートしますが、フィールドデータ（Real User Monitoring、RUM）はデバイスやネットワーク全体にわたる実際のユーザー体験を捉えます。

ラボツール

フィールドツール

web-vitalsライブラリを使用して指標をコンソールに記録する方法は次のとおりです：

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // navigator.sendBeacon() または fetch() を使用してデータを送信
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
  fetch('/analytics', {body, method: 'POST', keepalive: true});
}

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

コーディングせずに簡単に確認するには、パフォーマンスデータを解析するオンラインツールを使用できます。たとえば、サーバーログがある場合、Nginx Log AnalyzerがLCPに影響を与える可能性のある遅いレスポンスを特定するのに役立ちます。

Largest Contentful Paint（LCP）の改善

LCPは多くの場合、最適化するのに最も影響の大きい指標です。サーバー応答時間、リソース読み込み時間、クライアントサイドレンダリングに影響されます。

サーバー応答の最適化

リソースの最適化

レンダリングブロッキングリソースの排除

<head>内のCSSとJavaScriptはレンダリングをブロックします。クリティカルCSSをインライン化し、残りを非同期で読み込みます。JavaScriptにはdeferまたはasyncを使用します。

Interaction to Next Paint（INP）の改善

INPは、ユーザーのインタラクションから次のペイントまでの時間を測定します。JavaScriptの実行、イベント処理、レンダリング作業に影響されます。

JavaScript実行時間の削減

イベント処理の最適化

レンダリングパフォーマンスの改善

Cumulative Layout Shift（CLS）の改善

CLSは予期しないレイアウトシフトを測定します。これは、読み込み中に要素の位置が変わることによって発生し、多くの場合、寸法のない画像、広告、動的に挿入されたコンテンツが原因です。

常にサイズ属性を含める

画像と動画には、widthとheight属性を設定するか、CSSのaspect-ratioを使用します。これによりスペースが確保され、シフトが防止されます。

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

動的コンテンツのスペースを確保する

font-display: swapの使用

カスタムフォントは、読み込み時にテキストが非表示になったり（FOIT）、レイアウトシフトを引き起こしたりする可能性があります。font-display: swapを使用してフォールバックテキストをすぐに表示し、フォントをプリロードしてスワップ時間を短縮します。

まとめ：実践的なワークフロー

  1. 測定： PageSpeed Insightsから始めて、ラボとフィールドの両方のデータを取得します。改善が必要な指標を特定します。
  2. 診断： LighthouseとChrome DevToolsのPerformanceパネルを使用してボトルネックを見つけます。ウォーターフォール、メインスレッドのアクティビティ、レイアウトシフトを確認します。
  3. 最適化： 上記のテクニックを適用し、最も悪い指標に影響を与える変更を優先します。
  4. テスト： ラボテストを再実行して改善を確認します。ステージング環境にデプロイし、RUMを使用してフィールドデータを監視します。
  5. 監視： web-vitalsライブラリで継続的なRUMを設定し、リグレッションをアラートします。Search Consoleを使用してCore Web Vitalsのステータスを追跡します。

最適化にはトレードオフがあることを覚えておいてください。たとえば、画像の遅延読み込みは初期読み込みを改善しますが、LCP画像が遅延読み込みされるとLCPを悪化させる可能性があります。常に実際のユーザーでテストしてください。

FAQ

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

LCPでは、良好は≤2.5秒、改善が必要は≤4.0秒、不良は>4.0秒です。INPでは、良好は≤200ms、改善が必要は≤500ms、不良は>500msです。CLSでは、良好は≤0.1、改善が必要は≤0.25、不良は>0.25です。これらのしきい値は、ページ読み込みの75パーセンタイルで評価されます。

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

RUMでフィールドデータを継続的に監視します。Search Consoleで月に一度全体的な傾向を確認します。主要なコード変更やデプロイ後にラボテストを実行します。Core Web Vitalsはサイトの更新やサードパーティスクリプトによって変化する可能性があります。

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

プラグインや設定によっていくつかの改善は可能です（例：キャッシュの有効化、画像の最適化）。しかし、大幅な改善には、クリティカルCSSのインライン化、JavaScriptの遅延、リソース読み込み方法の再構築などのコード変更が必要なことがよくあります。INPや高度なLCP最適化には、通常開発者の助けが必要です。

サーバーパフォーマンスを分析する準備はできましたか？Nginx Log Analyzerを試して、Core Web Vitalsに影響を与える可能性のある遅いリクエストを特定しましょう。