TryQuickToolBox

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

Web2026-10-31TryQuickToolBox

高速なウェブサイトを構築したのに、ユーザーからは遅いという苦情がまだ届く。あるいは、Googleのアップデート後にSEOの順位が下がったかもしれない。原因はCore Web Vitalsかもしれません。これはGoogleがユーザー体験を測る指標です。このガイドでは、Core Web Vitalsとは何か、測定方法、そして具体的な改善手順を学びます。

Core Web Vitalsとは？

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

Googleは診断用としてTime to First Byte (TTFB)やFirst Contentful Paint (FCP)などの他の指標も使用しますが、コアとなる3つはLCP、FID、CLSです。

Core Web Vitalsの測定方法

これらの指標は、ラボ（合成テスト）とフィールド（実際のユーザー監視）の2つの方法で測定できます。どちらも価値があります。

ラボ測定

Lighthouse（Chrome DevToolsに組み込み）やWebPageTestなどのツールは、ページの読み込みをシミュレートしスコアを提供します。詳細な診断情報が得られるため、デバッグに最適です。

// Chrome DevToolsでLighthouseを実行：DevToolsを開く → Lighthouseタブ → レポートを生成。
// またはCLIを使用：
// npm install -g lighthouse
// lighthouse https://example.com --view

フィールド測定

実際のユーザー指標は実際の訪問者から得られます。Chrome User Experience Report (CrUX)は公開サイトの匿名化されたデータを提供します。JavaScript APIを使用して独自のフィールドデータを収集することもできます。

// 例：web-vitalsライブラリを使用して指標を記録
import {onLCP, onFID, onCLS} from 'web-vitals';

onLCP(console.log);
onFID(console.log);
onCLS(console.log);

これらの指標を分析エンドポイントに送信して、時間の経過とともにパフォーマンスを追跡します。

LCPの改善

LCPはしばしば最も影響の大きい指標です。改善するには、最大の要素（通常はヒーロー画像や見出し）に焦点を当てます。

  1. 画像を最適化： 画像を圧縮し、WebPやAVIFなどの最新形式を使用し、レイアウトシフトを避けるために寸法を指定します。画像圧縮ツールは品質を損なわずにファイルサイズを削減するのに役立ちます。
  2. 重要なリソースをプリロード： LCP画像やフォントには<link rel="preload">を使用します。
  3. サーバー応答時間を短縮： CDNを使用し、キャッシュを有効にし、バックエンドコードを最適化します。TTFBはLCPの構成要素です。
  4. レンダリングをブロックするリソースを排除： 重要でないCSSとJavaScriptを遅延させます。

例：ヒーロー画像をプリロード：

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

FIDの改善

FIDは応答性を測定します。FIDが高い場合、ユーザーが操作しようとしたときにメインスレッドがビジー状態であることを意味します。

  1. 長いタスクを分割： setTimeoutやrequestIdleCallbackを使用してJavaScriptを小さなチャンクに分割します。
  2. イベントハンドラを最適化： コストの高い操作をデバウンスまたはスロットルします。
  3. JavaScriptの実行時間を削減： 未使用のコードを削除し、コード分割を行い、重要でないスクリプトを遅延させます。
  4. Web Workersを使用： 重い計算をワーカースレッドにオフロードします。

例：重要でないJavaScriptを遅延：

<script src="#" defer></script>

CLSの改善

CLSは視覚的安定性に関するものです。予期しないシフトはユーザーを苛立たせ、誤クリックを引き起こします。

  1. 画像と動画には常にwidthとheight属性を含める。
  2. 広告や埋め込み用のスペースを確保： CSSのaspect-ratioまたは固定サイズのコンテナを使用します。
  3. ユーザー操作に応じない限り、既存のコンテンツの上にコンテンツを挿入しない。
  4. アニメーションにはレイアウトをトリガーするプロパティではなく、CSSトランスフォームを使用する。

例：画像用のスペースを確保：

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

ツールとワークフロー

ラボツールで問題を特定し、フィールドデータで検証します。シンプルなワークフローは次のとおりです。

  1. Chrome DevToolsでLighthouseを実行してベースラインを取得します。
  2. 最も影響の大きい問題（通常はLCP）を修正します。
  3. 変更をデプロイし、CrUXまたは独自のRUMでフィールドデータを監視します。
  4. 繰り返します。パフォーマンスは継続的な取り組みです。

簡単なチェックには、ラボとフィールドのデータを組み合わせたPageSpeed Insightsなどのオンラインツールを使用します。

FAQ

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

現在、GoogleはLCP ≤ 2.5秒、FID ≤ 100ミリ秒、CLS ≤ 0.1を「良好」と見なしています。これらのしきい値は進化する可能性があるため、最新情報についてはGoogleの公式ドキュメントを確認してください。

Core Web VitalsはSEOランキングに直接影響しますか？

はい、これらはGoogleのページエクスペリエンスシグナルの一部です。ただし、関連性と高品質なコンテンツの方が重要です。Core Web Vitalsは、他のシグナルが同等の場合のタイブレーカーまたは要因となります。

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

大きな変更後に測定し、フィールドデータを継続的に監視します。ラボテストは迅速ですが、フィールドデータはデバイスやネットワーク全体の実際のユーザー体験を反映します。

LCPを改善するために画像を最適化する準備はできましたか？無料の画像圧縮ツールを試して、品質を犠牲にせずにファイルサイズを削減しましょう。