TryQuickToolBox

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

Web2026-10-14TryQuickToolBox

モダンなWebアプリを構築したのに、ユーザーから遅いと言われる。検索順位も下がっている。原因がわからない。その原因は、Core Web Vitalsの不良かもしれません。Core Web Vitalsは、Googleがユーザー体験を評価するための指標です。このガイドでは、Core Web Vitalsとは何か、測定方法、そして最も重要な改善方法を実践的なステップとともに解説します。

Core Web Vitalsとは？

Core Web Vitalsは、GoogleがWebページのユーザー体験を評価するために使用する特定の指標群です。これらは読み込み、インタラクティブ性、視覚的安定性に焦点を当てています：

これらの指標はGoogleのページ体験シグナルの一部であり、検索順位に影響を与える可能性があります。しかし、それ以上に重要なのは、実際のユーザー満足度を反映していることです。

Core Web Vitalsの測定方法

完全な全体像を得るには、ラボデータとフィールドデータの両方が必要です。ラボデータ（合成）は問題のデバッグに役立ち、フィールドデータ（リアルユーザーモニタリング）は実際のパフォーマンスを示します。

ラボツール

フィールドツール

web-vitalsライブラリを使用してメトリクスを記録する方法は次のとおりです：

import {getLCP, getFID, getCLS} from 'web-vitals';

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

getLCP(sendToAnalytics);
getFID(sendToAnalytics);
getCLS(sendToAnalytics);

LCPの改善

LCPはしばしば最も困難な指標です。以下の領域に焦点を当ててください：

  1. 画像を最適化する: 画像を圧縮し、WebPやAVIFなどのモダンなフォーマットを使用し、srcsetでレスポンシブ画像を配信します。画面外の画像は遅延読み込みします。
  2. 重要なリソースをプリロードする: ヒーロー画像、フォント、主要なCSSには<link rel="preload">を使用します。
  3. サーバー応答時間を短縮する: CDNを使用し、キャッシュを有効にし、バックエンドコードを最適化します。
  4. レンダリングをブロックするリソースを排除する: クリティカルCSSをインライン化し、非クリティカルなJSを遅延させ、大きなCSSファイルを避けます。
  5. CDNを使用する: ユーザーに近いエッジロケーションからアセットを配信します。

FIDの改善

FIDは応答性に関する指標です。長いタスクがメインスレッドをブロックし、インタラクティブ性を遅延させます。

  1. 長いタスクを分割する: setTimeoutやrequestIdleCallbackを使用してメインスレッドに制御を戻します。
  2. JavaScriptを最適化する: コード分割、ツリーシェイキング、非クリティカルなスクリプトの遅延読み込みを行います。
  3. Web Workersを使用する: 重い計算をメインスレッドから移動します。
  4. サードパーティの影響を減らす: サードパーティスクリプトを監査し、制限します。

CLSの改善

CLSは読み込み中に要素がシフトすることで発生します。以下の方法で防止します：

  1. 画像と動画には常にwidthとheight属性を含める。 これによりスペースが確保されます。
  2. 広告や埋め込み用のスペースを確保する: CSSのaspect-ratioや固定コンテナを使用します。
  3. 既存のコンテンツの上にコンテンツを挿入しない: ユーザー操作への応答を除きます。
  4. アニメーションにはCSS transformsを使用する: レイアウトをトリガーするプロパティの代わりに使用します。
  5. フォントをプリロードする: font-display: swapを使用して、非表示テキストやレイアウトシフトを避けます。

Core Web Vitals指標の比較

指標測定内容良好な閾値主な最適化
LCP読み込みパフォーマンス≤ 2.5秒画像最適化、プリロード、CDN
FIDインタラクティブ性≤ 100ミリ秒JS削減、長いタスクの分割
CLS視覚的安定性≤ 0.1寸法設定、スペース確保

Core Web Vitalsを改善する実践的ワークフロー

以下のステップバイステップのプロセスに従ってください：

  1. 測定: PageSpeed Insightsを使用して、ラボデータとフィールドデータの両方のベースラインを取得します。
  2. 問題の特定: Lighthouseの改善機会と診断を確認します。
  3. 優先順位付け: 最もスコアが悪い指標に最初に焦点を当てます。
  4. 修正の実装: 上記の最適化を適用します。
  5. テスト: Lighthouseを再実行し、デプロイ後にフィールドデータを確認します。
  6. 監視: web-vitalsライブラリでリアルユーザーモニタリングを設定し、経時的に追跡します。

FAQ

Core Web Vitalsの現在の閾値は？

LCPの場合、良好は≤2.5秒、改善が必要は≤4秒、不良は>4秒です。FIDの場合、良好は≤100ミリ秒、改善が必要は≤300ミリ秒、不良は>300ミリ秒です。CLSの場合、良好は≤0.1、改善が必要は≤0.25、不良は>0.25です。

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

フィールドデータを継続的に監視し、重要な変更後にラボテストを実行します。GoogleはCrUXデータを毎月更新するので、Search Consoleを定期的に確認してください。

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

画像圧縮のようないくつかの修正はツールで可能ですが、多くはコード変更が必要です。WordPressのようなCMSを使用している場合は、パフォーマンス最適化プラグインの使用を検討してください。

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