Core Web Vitals とは
Core Web Vitals について知っておくべきすべてのこと。高速化して差をつけましょう！
Core Web Vitals - 概要
Core Web Vitals は、単なるオプションの便利な指標ではありません。Google がウェブサイトの読み込み、インタラクティビティ、視覚的安定性のパフォーマンスを判断するために使用するゴールドスタンダードです。Core Web Vitals を構成する3つの指標は、Largest Contentful Paint（LCP）、 Interaction to Next Paint（INP）、Cumulative Layout Shift（CLS）です。Google はサイトの Core Web Vitals を Good（良好）、Needs Improvement（改善が必要）、Poor（不良）で評価します。
これらに合格するかどうかが、成功と平凡の分かれ目になるかもしれません。なぜなら、これらの最適化を怠ることは、ユーザーのオンライン体験を気にしていないと伝えているのと同じだからです。
学び、高速化し、差をつける準備はできましたか？これらの指標をマスターしていきましょう。
Core Web Vitals とは？
Google の Core Web Vitals は、ウェブサイトの user experience を測定する3つの常に進化する指標（Largest Contentful、Interaction to Next Paint、Cumulative Layout Shift）です。これらの指標は、user experience の3つの実際の（フィールド）側面に焦点を当てています：
- 読み込み：ページコンテンツがどれだけ速く読み込まれるか
- インタラクティビティ：ブラウザがユーザーの入力にどれだけ速く応答できるか
- 安定性：ブラウザでコンテンツが読み込まれる際に、コンテンツがどれだけ（不）安定であるか
Table of Contents!
Core Web Vitals に合格する
Core Web Vitals の各指標には、Google が設定した閾値に基づいて Good（良好）、Needs Improvement（改善が必要）、Poor（不良）の評価が割り当てられます。Core Web Vitals に合格するには、Google CrUX データセットにおいて、URL レベルで少なくとも75%の訪問者が「good」の LCP、INP、CLS スコアを持つ必要があります。URL レベルのデータが利用できない場合、Google は URL グループまたはオリジンレベルのデータにフォールバックする場合があります。
| Good | Needs Improvement | Poor | |
|---|---|---|---|
| Largest Contentful Paint | < 2500ms | 2500ms - 4000ms | > 4000+ms |
| Interaction to Next Paint | < 200ms | 200ms - 500ms | > 500ms |
| Cumulative layout Shift | < 0.1 | 0.1-0.25 | > 2.5 |
Core Web Vitals の指標を詳しく見る
Largest Contentful Paint（LCP）- 読み込み
Largest Contentful Paint（LCP）指標は、サイトの読み込み速度を表します。
LCP 要素自体は、画面の可視部分にペイントされた最大の単一の「コンテンツのある」要素です。コンテンツがあるとは、どの要素でも LCP の候補になれるわけではないことを意味します。要素には意味のあるコンテンツが必要です。この定義はかなり厳密です：考慮される LCP 候補は、ユーザーが最初にページにナビゲートした時点に対して、ビューポート内に表示されている画像、テキストブロック、または動画です。
Largest Contentful Paint（LCP）の値は、ページのリクエストから最大のコンテンツのある要素がウェブ画面の可視部分（ファーストビュー）に表示されるまでのミリ秒単位の時間です。
Largest Contentful Paint（LCP）が選ばれた理由は、訪問者の user experience に焦点を当てているからです。LCP が発生すると、訪問者はページが完了したと思うと想定できます（実際にはそうでないかもしれませんが）。LCP は「ページのコンテンツはいつ表示されるか？」という質問に答えるために作られました。
Interaction to Next Paint（INP）- インタラクティビティ
Interaction to Next Paint（INP）は、サイトのインタラクティビティを表します。 この指標は、ウェブページとのインタラクション後にブラウザがどれだけ速くレイアウトを更新できるかを測定します。
Interaction to Next Paint の値は、各ユーザーインタラクションとページ上の最終的な表示変更との時間差です。すべてのインタラクションの中で最も遅いもの（または98パーセンタイル）が最終的な Interaction to Next Paint（INP）指標を決定します。
INP は純粋なフィールド値であり、実際のユーザー入力を必要とするため、Lighthouse のようなラボツールでは測定できません。Lighthouse では Total Blocking Time 指標が Interaction to Next Paint とかなりよく相関します。INP は通常 Total Blocking Time よりも（大幅に）低いですが、TBT を改善すると INP も改善されます。
Cumulative Layout Shift（CLS）- 視覚的安定性
Cumulative Layout Shift（CLS）は、Core Web Vitals の視覚的安定性の部分を表します。Cumulative Layout Shift（CLS）は、コンテンツがレンダリングされたり、新しいコンテンツがページに表示されたりする際の、ページ上の要素の予期しない移動を測定します。
CLS の値は2つの「フラクション」に基づいています。インパクトフラクションとディスタンスフラクションです。要素が視覚的に「不安定」な場合、そのディメンションが変化し、他のコンテンツがシフトします。ディスタンスはビューポートに対するピクセル数です。インパクトはビューポートに対する影響を受ける要素のサイズです。
Core Web Vitals が重要な理由
Core Web Vitals とは何かがわかったところで、次の質問は「なぜ Core Web Vitals を気にする必要があるのか？」です。これは素晴らしい質問です。
- User Experience の向上。Core Web Vitals は、ユーザーがウェブサイトとどのようにインタラクトするかに直接影響します。これらの指標を最適化することで、より高速で、レスポンシブで、視覚的に安定した体験を顧客に提供できます。これにより、サイトでのエンゲージメントと滞在時間の増加、直帰率の低下、コンバージョン率の向上が実現します（出典：Google）。
- 検索エンジン最適化（SEO）。Google は Core Web Vitals を検索アルゴリズムのランキング要因にしています。つまり、Core Web Vitals の改善は検索エンジンランキングの向上、検索結果での可視性の向上、ウェブサイトへのオーガニックトラフィックの増加につながります。
- モバイルパフォーマンス。オンラインショッピングやリサーチにスマートフォンの使用が増加する中、Core Web Vitals はモバイルパフォーマンスにとって極めて重要です：70%の人が購入前にスマートフォンで商品を調査し、62%がモバイルフレンドリーなウェブサイトを持つ企業と取引する可能性が高いです。
- 競争優位性。Core Web Vitals を優先することで、これらの指標を軽視している競合他社に先んじ、業界の他のビジネスと比較して優れた user experience を提供し、より遅く、レスポンスが低い、または安定性の低いウェブサイトからマーケットシェアを獲得できる可能性があります。
- その他。上記の利点に加えて、Core Web Vitals はかなりよく文書化されています（これは既知の Google ランキング要因としては珍しいことです）。Google Ads を使用している場合、広告スコアの向上が得られます。つまり、広告をより安く購入でき、さらに Core Web Vitals に合格することは Google のトップストーリーボックスの前提条件の1つです。
Core Web Vitals を測定する
Core Web Vitals は user experience の3つの実際の（フィールド）側面に焦点を当てているため、フィールドデータでのみ測定できます。Lighthouse のようなシンセティックまたはラボテストは、ページが遅い理由についての洞察を提供するかもしれませんが、Core Web Vitals を測定するものではありません。
CrUX データ
Core Web Vitals は Google によって測定され、CrUX データセットに記録されます。CrUX は Web Vitals プログラムの公式データセットです。データセットにアクセスする方法はいくつかあります：
- CrUX Dashboard は、CrUX データをクエリしてインタラクティブなダッシュボードにレンダリングし、PDF レポートをエクスポートできる Data Studio ダッシュボードです。
- CrUX on BigQuery は、CrUX が収集したすべてのオリジンレベルのデータの公開アクセス可能なデータベースを提供します。データが収集されたすべてのオリジンをクエリし、CrUX がサポートする任意の指標を分析し、利用可能なすべてのディメンションでフィルタリングできます。完全な指標ヒストグラムが BigQuery テーブルに保存されており、実験的な指標を含むパフォーマンス分布の可視化が可能です。
- CrUX API は、ページまたはオリジンごとの CrUX データへのプログラマティックアクセスを提供し、フォームファクター、有効接続タイプ、指標でさらにフィルタリングできます。
- PageSpeed Insights は CrUX を使用して、Lighthouse によるパフォーマンス改善の機会とともに、実際のユーザーパフォーマンスデータを提示します。
RUM データ
RUM データは Real User Monitoring から収集されます。RUM データは CrUX データセットに次ぐ最良の選択肢です。CrUX データセットは高度に匿名化されており、詳細な分析には向いていません。CrUX データも28日遅れています。そのため、多くの Core Web Vitals の専門家は Real User Metrics に頼っています。CrUX データと同様に、リアルユーザーデータは Core Web Vitals の測定に使用されています。
Lighthouse
Lighthouse は強力なツールです。しかし、これを理解してください：Lighthouse は Core Web Vitals を測定しません！Lighthouse はいわゆるラボツールです。Lighthouse は特定の条件下で分析を実行します。ページ間のナビゲーション、リソースのキャッシュ、ウェブサイトとのインタラクション、実際の状況の模倣は行いません。
それでも Lighthouse は優れたツールであり、適切に使用すればページの Core Web Vitals の問題について多くのことを教えてくれます。
Lighthouse 分析を実行する最良の方法は、ブラウザから PageSpeed Insights を使用するか、Lighthouse コマンドラインツールを使用することです。
Core Web Vitals を改善する方法
Core Web Vitals は常に変化する指標のセットであり、改善は一度きりのものではありません。Core Web Vitals に先んじるために、サイトは開発とメンテナンスのプロセスに優れたページスピード最適化戦略を組み込むべきです。これには、継続的なパフォーマンストラッキングと小さな改善の継続的な実装が含まれます。
3つの Core Web Vitals は互いに影響し合い、1つを改善すると他に良い影響または悪い影響を与えることがよくあります。以下のガイドラインは、個々の Core Web Vitals を理解し改善するための良い出発点です：
Google ページエクスペリエンスと Core Web Vitals
Core Web Vitals は Google のページエクスペリエンススコアのサブセットです。ページエクスペリエンスは、モバイルとデスクトップの両方のデバイスで、純粋な情報価値を超えて、ユーザーがウェブページとのインタラクション体験をどのように感じるかを測定するシグナルのセットです。
サイトのページエクスペリエンスデータと Core Web Vitals データは、Google Search Console アカウントの「エクスペリエンス」セクションで確認できます。
Core Web Vitals に関するよくある質問
Core Web Vitals について学ぶ
Core Web Vitals のエキスパートになるには何を学ぶべきですか？
エキスパートになりたいとのこと、素晴らしいですね！険しい道のりが待っています！Core Web Vitals の一部は簡単に修正できます。他の部分は非常に難しく、長年の経験を必要とします。Core Web Vitals のエキスパートになるには、基本的に4つのスキルをマスターする必要があります。
まず、ブラウザがどのように動作するかを完全に理解する必要があります。レンダリングプロセスはどのように動作するか、リソースはどのようにスケジュールされるか、JavaScript はいつ実行されるか、ペイントプロセス中に何が起こるかです。
次に、JavaScript をマスターする必要があります。私は開発者にコードが遅い理由を説明することに多くの時間を費やしています。遅いコードは First Input Delay と Interaction to Next Paint に影響します。ほとんどの場合、JavaScript コードは Largest Contentful Paint と First Contentful Paint にも影響します。
3つ目に、HTML と CSS のエキスパートである必要があります。なぜなら、アプリケーションの構築方法が大きく影響するからです。多くの場合、速い方法と遅い方法があります。
4つ目に、ネットワークとウェブサーバーの仕組みを知る必要があります。高速なネットワーク、適切な HTTP ヘッダー、適切な状況に適切なプロトコルを使用することで、Core Web Vitals に大きな違いをもたらすことができます。大企業にアドバイスする場合は、十分な準備が必要です！
Core Web Vitals を改善する
Core Web Vitals プラグインは効果がありますか？
Core Web Vitals を改善しようとするプラグインやツールは数多くあります。例えば wp-rocket などです。これらのツールについての思いは何時間でも話せます。今は詳細を省きましょう。事実として、それらは時には Core Web Vitals を改善し、時にはほとんど効果がないということです。
すべては修正しようとしている「Core Web Vitals のミス」の性質によります。画像の遅延読み込みを忘れたり、スクリプトの遅延を忘れたりしましたか？そのようなツールは Core Web Vitals をかなり改善するかもしれません。一方、遅さの原因が「ページのレイアウトを変更するクリティカルなスクリプト」（スライダープラグインなど）や「大きな DOM サイズ」である場合、それらのプラグインは改善するどころか悪化させることが多いです。
基本的に、プラグインは優秀なプログラマーが数時間で修正できる問題を修正します。より複雑な問題は修正できず、悪化させる可能性さえあります。
モバイルとデスクトップ、どちらに注力すべきですか？
素晴らしい質問です。原則として、モバイルに注力すべきです。
モバイルの Core Web Vitals に合格できれば、デスクトップの Core Web Vitals にも合格しやすくなります（まだ合格していない場合）。これは、平均的なモバイルデバイスは帯域幅が低く、メモリが少なく、CPU パワーが平均的なデスクトップよりも低いため、より遅いからです。
ただし、いくつかの例外があります。デスクトップでは可視ビューポートが大きくなります。モバイルでは LCP 要素がテキストベースの要素であることが一般的ですが、デスクトップではより下に配置された画像が最大の Contentful Paint 要素になります。デスクトップでは、画面が大きく可視要素が多いため、（小さな）レイアウトシフトの可能性も増加します。
測定：CrUX、RUM、シンセティックデータ
URL レベルのデータが利用できない場合、Google はどのように Core Web Vitals を評価しますか？
Google は主に Chrome User Experience Report（CrUX）の URL レベルデータを使用して、ページランキングのための Core Web Vitals を評価します。特定の URL データが利用できない場合、Google は Google Search Console で特定できる類似の URL グループのデータに依存する場合があります。URL レベルとグループレベルの両方のデータがない場合、Google はランキングの考慮にオリジンレベルの Core Web Vitals データを使用する場合があります。
Core Web Vitals データはリアルタイムですか？
いいえ、Core Web Vitals データはリアルタイムではありません。ウェブサイトとの実際のユーザーインタラクションからデータを収集する Chrome User Experience（CrUX）Report に基づいています。このデータには通常、約1〜2日の遅延があります。
データ自体はわずかに遅延しているだけ（通常1〜2日）ですが、計算のローリング性により、サイトの改善が最終スコアに影響するまでに時間がかかる場合があります。そのため、改善を行った後すぐに Core Web Vitals 指標に大きな変化は見られません。代わりに、改善が完全に「天秤を傾け」、報告されるスコアに反映されるまでに数週間かかる場合があります。
Search Console やその他の CrUX ツールにデータがないのはなぜですか？
それはおそらく、サイトのフィールドデータが不十分だからです。Google は、意味のある速度指標を生成するために、一定のトラフィックとユーザーデータの閾値を必要とします。これは特に以下の場合に一般的です：新しいウェブサイト、最近 Search Console に追加されたサイト、低トラフィックのウェブサイト、またはログインの後ろに隠れているウェブサイト（訪問されたページが「インデックス可能」でない可能性があるため）。
Lighthouse スコアは Core Web Vitals に影響しますか？
いいえ、Lighthouse スコアは Core Web Vitals に直接影響しません。Google は CrUX データセットの実際のユーザーデータを使用して Core Web Vitals を評価します。CrUX データセットはウェブサイトでの実際の user experience を表します。
Lighthouse は Core Web Vitals に影響する可能性のある問題を特定するための有用なツールとなりえます。実際のユーザーデータに基づいて指標自体を改善することに焦点を当てることが最も重要です。
