JavaScriptのスクロールライブラリを、1行のCSSに置き換えてください。scroll-behavior: smoothにより、パフォーマンスが向上し、Interaction to Next Paint (INP)が高速化します。

Core Web Vitalsとは？

GoogleのCore Web Vitalsは、ウェブサイトのユーザー体験を測定する3つの指標（Largest Contentful Paint、Interaction to Next Paint、Cumulative Layout Shift）です。これらの指標は、世界中のChromeブラウザから収集された実際のユーザーデータに基づいており、ユーザー体験における3つのフィールドの側面に焦点を当てています。

• Loading：ページコンテンツの読み込み速度
• インタラクティブ性：ブラウザがユーザーの入力に応答する速さ
• 視覚的安定性：ブラウザでの読み込み時におけるコンテンツの安定性

Core Web Vitalsは固定されたものではありません。Googleは継続的に指標を更新しています。直近では、2024年3月にInteraction to Next Paint (INP)が、応答性の指標としてFirst Input Delay (FID)に代わって導入されました。INPは最初の1回だけでなく、ページ上のすべてのインタラクションを測定するため、応答性のテストとしてはるかに厳しくなっています。

Core Web Vitalsの合格基準

Core Web Vitalsの各指標には、Googleが定めたしきい値に基づいて、Good、Needs Improvement、またはPoorの評価が割り当てられます。Core Web Vitalsに合格するには、Google CrUXデータセット of URLレベルにおいて、訪問者の少なくとも75%がLCP、INP、CLSで「good」スコアを獲得している必要があります。URLレベルのデータが利用できない場合、GoogleはURLグループやoriginレベルのデータにfallbackすることがあります。

なぜ75パーセンタイルなのか？

Googleは、ページがCore Web Vitalsに合格するかどうかを判定するために、実際のユーザーデータの75パーセンタイル (p75) を使用します。これは、合格するにはページアクセスの75%が「good」な体験である必要があるという意味です。75パーセンタイルが選ばれたのはバランスを考慮した結果です。中央値（遅い半数を無視する）とは異なり、大半のユーザーの体験を捉えつつ、低速なネットワークによる少数の例外的なアクセスによって不合格にならない程度の基準となっています。

実質的には、高速なデバイスや回線を使用しているユーザーだけでなく、大半の訪問者に対してサイトのパフォーマンスが優れている必要があるということです。

Core Web Vitalsの3つの指標

Largest Contentful Paint (LCP)：読み込み

Largest Contentful Paint (LCP)は、サイトの読み込み速度を表す指標です。

LCP要素自体は、画面の表示領域内に描画された、最大の単一の「contentful」（コンテンツを伴う）要素です。contentfulとは、どのような要素でもLCP候補になれるわけではないことを意味します。要素には意味のあるコンテンツが必要です。その定義はかなり厳格であり、対象となる LCP候補は、ユーザーが最初にページにアクセスした時点を基準として、viewport内に表示されている画像、テキストブロック、または動画です。

Largest Contentful Paint (LCP)の値は、ページのリクエストから、画面の表示領域（ファーストビュー）に最大のコンテンツ要素が表示されるまでのミリ秒単位の時間です。良好なLCPスコアは2.5秒未満です。2025 Web Almanacによると、良好なLCPを達成しているのはモバイルページのわずか62%であり、合格するのが最も難しいCore Web Vitalとなっています。

Largest Contentful Paint (LCP)が採用されているのは、訪問者のユーザー体験に焦点を当てているからです。LCPが発生すると、訪問者はページの読み込みが完了したと判断します（実際にはそうではない場合もあります）。LCPは、「ページのコンテンツはいつ表示されるのか？」という疑問に答えるために作成されました。

LCPを改善する最も効果的な方法には、LCP画像をプリロードしてfetchpriority="high"を指定することや、WebPやAVIFなどのモダンなフォーマットで画像ファイルサイズを最適化することが挙げられます。詳細については、Largest Contentful Paint最適化ガイドを参照してください。

Interaction to Next Paint (INP)：応答性

Interaction to Next Paint (INP)は、サイトの応答性を表します。この指標は、ウェブページとのインタラクションが発生した後に、ブラウザがどれだけ迅速にレイアウトを更新できるかを測定します。

INPは、クリック、タップ、キー入力といった個別のユーザーインタラクションを追跡します。スクロールやホバーなどの連続的なインタラクションは、INPでは測定されません。対象となる各インタラクションは、入力の瞬間からJavaScriptの処理を経て、画面上の最終的な表示更新までの時間が計測されます。

Interaction to Next Paintの値は、各ユーザーインタラクションからページ上の最終的な表示変更までの時間差です。すべてのインタラクションの中で最も遅いもの（or インタラクション数が多いページでは98パーセンタイル）によって、最終的なInteraction to Next Paint (INP)指標が決定されます。

INPは純粋なfield指標であり、実際のユーザー入力が必要なため、Lighthouseなどのlabツールでは測定できません。Lighthouseにおいては、Total Blocking Time指標がInteraction to Next Paintと強く相関します。INPは通常、Total Blocking Timeよりも（はるかに）低くなりますが、TBTを改善することでINPも向上します。最も効果的な戦略の1つは、重要ではないJavaScriptを非同期化（defer）して、ユーザーインタラクション中にmain threadをブロックしないようにすることです。

世界全体で、2025 Web Almanacによるとモバイルページの77%が良好なINPスコア（200ms未満）を達成しています。INPは2024年3月にFirst Input Delay (FID)に代わってCore Web Vitalsの対象となり、大幅に厳しい指標であることが証明されました。詳細なガイドは、Interaction to Next Paint最適化ガイドを参照してください。

Cumulative Layout Shift (CLS)：視覚的安定性

Cumulative Layout Shift (CLS)は、Core Web Vitalsの視覚的な安定性を表す部分です。Cumulative Layout Shift (CLS)は、コンテンツの描画中や新しいコンテンツの表示時に発生する、ページ上での要素の予期しない位置ずれを測定します。

CLSの値は2つの割合に基づいています。インパクト割合と、ディスタンス 割合です。要素が視覚的に不安定な場合、そのサイズが変化し、他のコンテンツが押し下げられて位置がずれます。距離はviewportに対するピクセル比率です。影響は、影響を受けた要素のviewportに対する比率です。

CLSの主な原因には、明示的なwidth属性およびheight属性を持たない画像、広告やクッキーバナーのように動的に挿入されるコンテンツ、およびfallbackとは異なるサイズで置き換わるウェブフォントがあります。適切なfont-display設定でフォントをセルフホストすることにより、フォント起因 of CLSを低減できます。世界全体で、2025 Web Almanacによるとモバイルページの81%が良好なCLSスコアを達成しており、最も合格率の高いCore Web Vitalとなっています。詳細なガイドは、Cumulative Layout Shift最適化ガイドを参照してください。

なぜCore Web Vitalsが重要なのか？

では、なぜCore Web Vitalsを最適化すべきなのでしょうか。

• ユーザー体験の向上。読み込みの高速化、迅速な応答、レイアウトのズレの低減。これらは訪問者が実際に実感できるものです。Core Web Vitalsに合格したサイトは、直帰率が低く、コンバージョン率が高くなります（ソース：Google）。
• 検索エンジン最適化 (SEO)。GoogleはCore Web Vitalsをランキング要因に設定しました。合格しただけで平凡なページが1位になるわけではありませんが、2つのページが同じキーワードで競合する場合、より高速なページが優位に立ちます。
• モバイルパフォーマンス。トラフィックの大部分はモバイル経由です。ユーザーの70%が購入前にスマートフォンで商品を調査し、62%はモバイルフレンドリーなサイトを提供する企業と取引する可能性が高くなります。
• 競合に対する優位性。ほとんどの競合他社はCore Web Vitalsの最適化を行っていません。これはチャンスです。2つのサイトが同じキーワードで競合しており、自社サイトの読み込みと応答が速ければ、Googleが上位に評価する理由になります。
• その他。上記のメリットに加えて、Core Web Vitalsは豊富にドキュメント化されています（これはGoogleの公表されているランキング要因としては極めて稀なことです）。Google広告を利用している場合、品質スコアが改善され、広告単価を抑えることができます。さらに、Core Web Vitalsの合格は、Googleのトップニュース枠に掲載されるための必須要件の1つです。

現実世界での影響：Vodafoneのケーススタディ

Core Web Vitalsのビジネスインパクトは机上の空論ではありません。Vodafone ItalyがLargest Contentful Paintを31%改善した際、売上高が8%増加、リード数が15%増加、カート遷移率が11%改善しました。表示が速いページは、売上を増やします（ソース：web.devケーススタディ）。

Field DataとLab Data

Field dataとlab dataは異なるものを測定します。これらを混同すると、誤った数値を最適化することになります。

Field data（Real User MonitoringまたはRUMデータとも呼ばれます）は、実際の環境でサイトを利用する訪問者から取得されます。これには、デバイスの性能、ネットワーク速度、位置情報、ブラウジング動作の違いが含まれます。GoogleのCrUXデータセットは、オプトインしたChromeユーザーからfield dataを収集しています。Core Web Vitalsは、field dataのみを使用して測定されます。

Lab dataは、固定された環境でシミュレートされたデバイスを用いて行われる、管理されたテストから得られます。LighthouseやWebPageTestなどのツールがlab dataを生成します。ラボテストは再現性があり、特定の課題を診断するのに適していますが、実際の多様なユーザー体験を反映することはできません。

なぜSEOにおいてField Dataが重要なのか？

Googleは検索順位の評価基準として、CrUXデータセットのfield dataを使用してCore Web Vitalsを測定します。Lighthouseで100点満点を獲得したからといって、Core Web Vitalsの合格が保証されるわけではありません。Lighthouseは単一のシミュレートされたアクセスしかテストしないからです。実際のユーザーは、より低速なデバイスや遠隔地のネットワークを利用していたり、Lighthouseでは再現できない方法でページを操作している可能性があります。

だからこそ、CoreDashのようなReal User Monitoringソリューションを用いてCore Web Vitalsを監視することが、サイトの実態を最も正確に把握する方法になります。RUMデータにより、デバイスタイプ、地域、ページテンプレート、さらには個別の要素ごとに課題を特定し、labツールでは得られない具体的なインサイトを導き出すことができます。

Core Web Vitalsを測定する

Core Web Vitalsはユーザー体験の3つのフィールド側面に焦点を当てているため、field dataでしか測定できません。Lighthouseのような合成テストやラボテストは、ページが遅い理由を分析する手がかりにはなりますが、Core Web Vitalsそのものを測定しているわけではありません。

測定ツールの比較

CrUXデータ

Core Web VitalsはGoogleによって測定され、CrUXデータセットに記録されます。CrUXはWeb Vitalsプログラムの公式データセットです。このデータセットにアクセスするには、いくつかの方法があります：

1. CrUXダッシュボードは、CrUXデータをクエリして対話型のダッシュボードに描画し、PDFレポートのエクスポートを可能にするData Studioダッシュボードです。
2. BigQuery上のCrUXは、CrUXが収集したすべてのオリジンレベルのデータを一般公開されたデータベースとして提供します。データが存在するすべてのオリジンの検索、CrUXの全指標の分析、利用可能なすべてのディメンションによる絞り込みが可能です。完全な指標のヒストグラムがBigQueryテーブルに保存されており、実験的指標を含むパフォーマンス分布を視覚化できます。
3. CrUX APIは、ページやオリジンごとのCrUXデータにプログラムからアクセスできるようにします。デバイスタイプ、通信接続タイプ、および指標による絞り込みも可能です。
4. PageSpeed Insightsは、CrUXデータを用いて実際のユーザーパフォーマンスを提示し、Lighthouseによる改善案を併せて表示します。

RUMデータ

RUMデータは、Real User Monitoringによって収集されます。RUMデータは、CrUXデータセットを補完する最高の手段です。CrUXデータセットは完全に匿名化されているため、詳細な要因分析には適していません。また、CrUXデータは28日間のローリング集計期間を持っています。そのため、多くのCore Web Vitalsの専門家はリアルユーザー指標に依存しています。CrUXデータと同様に、実際のユーザーデータがCore Web Vitalsの測定に使用されます。

CoreDashのようなRUMソリューションは、CrUXデータ単体に対して多くのメリットを提供します。これには、リアルタイムのレポート（28日間の集計遅延なし）、個々のページ、デバイスタイプ、国、ブラウザごとのフィルタリング機能、および問題の原因となっている具体的な要素を特定する詳細なアトリビューションデータが含まれます。これにより、RUMデータはCore Web Vitalsの課題を効率的に診断して修正するために不可欠な存在となっています。

Lighthouse

Lighthouseは強力なツールです。しかし、これだけは理解しておいてください。LighthouseはCore Web Vitalsを測定していません！Lighthouseはいわゆるlabツールです。Lighthouseは特定の固定された条件下で分析を実行します。ページ間を移動せず、リソースをキャッシュせず、ウェブサイトとインタラクションを行わず、実際のユーザー環境を再現することもしません。

それでも、Lighthouseは優れたツールです。正しく使用すれば、ページにおけるCore Web Vitalsの課題を数多く特定できます。

Lighthouse分析を行う最適な方法は、ブラウザからPageSpeed Insightsを使用するか、Lighthouseコマンドラインツールを利用することです。

実際のユーザーデータが示す事実

2025 Web Almanacは、ウェブ全体におけるCore Web Vitalsのパフォーマンスを幅広く調査しています。モバイルにおける各指標の世界的なパフォーマンスは以下の通りです。

注：TTFBとFCPは診断指標であり、Core Web Vitalsではありません。これらはLCPおよび読み込みパフォーマンス全体に大きな影響を与えるため、ここに掲載しています。詳細は、Time to First ByteガイドおよびFirst Contentful Paintガイドを参照してください。

Core Web Vitalsの改善方法

Core Web Vitalsは常に進化する指標であり、改善は一度限りの作業ではありません。優位性を保つには、開発プロセス自体にパフォーマンス改善を組み込む必要があります。具体的には、field指標を追跡し、デグレーションを迅速に修正し、毎回のリリースで小さな改善を重ねることです。

3つのCore Web Vitalsは互いに影響し合っており、1つの指標を改善することが、他の指標に対してプラスまたはマイナスの副作用をもたらすことがあります。以下のガイドラインは、それぞれのCore Web Vitalsを理解して改善を始めるための最適なスタート地点です：

• Largest Contentful Paintの改善
• Interaction to Next Paintの改善
• Cumulative Layout Shiftの改善

3つのCore Web Vitalsそのものに加えて、全体的なパフォーマンスにおいて2つの診断用指標が極めて重要な役割を果たします：

• Time to First Byte (TTFB)の最適化：TTFBは読み込みパフォーマンスの基盤です。TTFBが遅いと、良好なLCPスコアを達成することはほぼ不可能になります。まずはCDNを適切に設定することから始めてください。
• First Contentful Paint (FCP)の最適化：FCPは、最初のコンテンツが画面に表示されるまでの時間を測定します。これは体感の読み込み速度を示す初期のシグナルになります。

すべての最適化領域を網羅したステップバイステップのガイドは、当社のCore Web Vitalsチェックリストを使用してください。

GoogleのページエクスペリエンスとCore Web Vitals

Core Web Vitalsは、Googleのページエクスペリエンススコアの一部です。ページエクスペリエンスとは、モバイルおよびデスクトップデバイスにおいて、単なる情報としての価値を超え、ユーザーがウェブページを操作した際の体験をどのように感じたかを測定するシグナルの集まりです。

サイトのページエクスペリエンスデータおよびCore Web Vitalsデータは、Google Search Consoleアカウントの「体験」セクションで確認できます。