Core Web Vitals（コア ウェブ バイタル）とは？3つの指標やSEOに重要な理由と対策方法を徹底解説

Webサイトの運用管理者やSEO担当者であれば、目下、「Core Web Vitals（コア ウェブ バイタル）」とどう向き合っていくか、画策あるいは奮闘されている方も多いのではないでしょうか。

本記事では、Webサイトでのユーザー体験を左右しGoogle検索の結果においても影響を及ぼす「Core Web Vitals（コア ウェブ バイタル）」について、基礎知識からその重要性、構成される3項目の詳細、対策や改善方法にいたるまで幅広く解説します。

Core Web Vitals（コア ウェブ バイタル）とは

Core Web Vitals（コア ウェブ バイタル）とは、検索順位を決める評価指標のひとつ「ページ エクスペリエンス シグナル」に含まれる、ユーザー体験の質を数値化した指標のことを指します。なお、ページ エクスペリエンス シグナルに当てはまる要素は、以下に挙げる5つです。

• Core Web Vitals
• モバイル ユーザビリティ
• セキュリティの問題
• HTTPS
• 広告に関する問題

なかでもCore Web Vitalsは、ユーザーがWebサイトへ訪れたときに使い勝手が良いかどうかを表しているため、非常に重要な要素となっており、さらに3つの指標に分かれています。

Core Web Vitalsの3つの指標

Core Web Vitalsは以下の3つで構成されます。

• LCP（Largest Contentful Paint）
• CLS（Cumulative Layout Shift）
• INP（Interaction to Next Paint）

それぞれ解説していきます。

LCP（Largest Contentful Paint）

LCP（Largest Contentful Paint）とは、Webページの読み込み速度を評価するための指標です。具体的には、ページ内でもっとも大きなコンテンツ（画像や動画、テキストブロックなど）が表示されるまでの時間を測定します。

言わずもがな、Webページが速く表示されるほど、ユーザーの体験が良くなります。LCPの値が短いほど、そのページが素早く主要なコンテンツをユーザーに見せることができているということです。

読み込みまでの秒数は「2.5秒以内」にするのが良いとされているため、まずはこの数値を目指すようにしましょう。

CLS（Cumulative Layout Shift）

CLS（Cumulative Layout Shift）は、視覚的安定性を測る指標です。たとえば、Webページを開きテキストを読み始めようとしたところ、上部に画像が読み込まれ、読もうとしたテキストが画面外に押し出されてしまうことはありませんか？このようなズレがないかどうかということを表すのがCLSです。

当然、予期せぬレイアウトのズレはユーザー体験を損ねます。ページへとアクセスしたら、なるべく早くスムーズに「見たい」「読みたいコンテンツ」にアプローチしたいものです。

そうしたなか、CLSでは、表示されるレイアウトが安定されるまでの時間を測ります。適切なCLS値は0.1以下です。0.25以上になると要改善とされます。

INP（Interaction to Next Paint）

INP（Interaction to Next Paint）は、ユーザーがWebページ上でクリックやタップなど何らかのアクションをしたことに対してページが反応し視覚的な変化（新しいコンテンツの表示や更新）を見せるまでの時間を測る指標です。

INPでは、以下の3つのインタラクションを計測します。

マウスのクリック
スマホやタブレットなどのタッチスクリーンデバイスをタップ
物理キーボードまたは画面キーボードのキーを押す

「ホバー」と「スクロール」は含まれませんが、キーボードによるスクロールはキー入力となるため、INPの測定に含まれる場合があります。

INPの数値が200ms秒以下であれば、ページの応答性が良好とされています。

FIDはINPに置き換えられた

もともと、Core Web VitalsはLCP、CLS、FIDの3つが指標とされていました。ですが、2024年の3月にFIDがINPという新しい指標に置き換えると発表があり、現在は、LCP、CLS、INPが3つの指標となっています。

では、FIDとINPは何が違うのでしょうか。いずれもWebページの応答速度に関する指標ではあるものの、大きな違いがあります。

FIDはFirst Input Delay、日本語に訳すと「初回入力遅延」ですので、初回の操作のみを対象としています。一方でINPは、Webページにいる間の全操作が対象とされているため、大きく異なっているのです。

計測対象も、FIDが入力遅延時間のみを計測していたのに対して、INPは入力遅延時間、処理支援時間、表示遅延時間と測定内容の幅が広がっています。INPに変更されたことで、より詳細に応答速度を計測できるようになったのです。

Core Web VitalsがSEOに及ぼす影響

冒頭でもお伝えしたように、Core Web Vitalsは、検索順位を決める評価指標とされています。そのため、もちろんランキング要因となり順位に影響します。

ですが、実際は順位への影響はそこまで高くないといえるでしょう。なぜなら、Googleは以下のように説明をしているからです。

Google 検索は、ページ エクスペリエンスが平均を下回る場合であっても、常に最も関連性の高いコンテンツを表示しようとするように設計されています。ただし多くの検索語句に関して、一致する有用なコンテンツは多数存在しています。優れたページ エクスペリエンスを実現していることは、そのような場合に検索結果でのランキングを上げることにつながります。

引用：ページ エクスペリエンスと Google 検索結果への影響 | Google 検索セントラル

要するに、「コンテンツの内容が同じかつ品質も同等な場合において、どちらがよりユーザーに対しておすすめ出来るか、甲乙つけがたいときにCore Web Vitalsの指標を基にランキングを決定しよう」という仕組みです。

Core Web Vitalsの指標がいくら良くても、コンテンツの質が低ければ、上位表示を達成することは難しいでしょう。ですので、必要以上に重要視するのではなく、同等のクオリティなのになぜか競合に勝てないときに、ひとつの策として頭に入れておく程度で良いと思います。

Core Web Vitalsの状況を確認する方法

自社が運用するWebページのCore Web Vitals改善には、状況確認が必須です。その方法として、チェックツールの使用が挙げられます。手順は以下の通りです。

「Google Search Console」を使用して確認する方法

まずは、「Google Search Console」です。管理画面左の「エクスペリエンス」から「ウェブに関する主な指標」をクリックしましょう。すると、「モバイル」及び「PC」それぞれで“不良URL”“改善が必要なURL”“良好URL”のステータスがグラフ化されているのが分かります。

「不良」または「改善が必要」に分類されたページは対策が必要です。「レポートを開く」へと進み、ステータスを指定すれば、画面下部の詳細部分にLCP、INP、CLSの問題が表示されます。さらにクリックすると、問題のあるURLが列挙されるため、サイトのどのページが該当するかを把握できます。

「PageSpeed Insights」を使用して確認する方法

PageSpeed Insightsとは、Googleが提供しているWebサイトまたはページの表示速度を測定できるツールです。

サーチコンソールで確認するよりも、より詳細に表示速度に関する問題を確認することができます。さらにPageSpeed Insightsでは、Core Web Vitalsの指標で採点してくれるため、簡単に数値を確認することが可能です。

使い方は以下のとおり、非常に簡単に使うことができます。

1. 「PageSpeed Insights」にアクセス
2. 検索ボックスにURLを入力し「分析」をクリック
3. 結果を確認する

LCPを改善する方法

LCPは、Webページにおいて最大コンテンツと判断されたリソースの読み込み時間を表します。メインとなるのは、大抵画像です。つまり、ほとんどのケースで画像の読み込み速度を短縮することが、LCP改善につながります。

画像を圧縮する

画像を圧縮し、データサイズを軽くすることで、読み込みが速くなります。圧縮すると画質が荒くなるため、画質とデータサイズのバランスをとることが大事です。

その際、画像編集ソフト「Photoshop」の「Web用に保存」機能の使用をおすすめします。
また、無料の圧縮サービスならGoogleが提供する「Squoosh」も、画質を確認しながら圧縮の程度を調整できるため便利です。

適切な画像フォーマットを選ぶ

画像ごとに最適なフォーマットを選択することも有効です。多くのブラウザに対応している一般的なフォーマットは、「GIF」「JPEG」「PNG」の3種類ですが、画像の最適化に関しては、「WebP」「JPEG2000」「JPEG XR」などの、次世代画像フォーマットの使用が好ましいでしょう。

特に「Webp」はGoogleが推奨している画像フォーマットなので、PageSpeed Insightsで表示される改善案として提案されることが多いです。Word Pressを利用している場合は、プラグインによる一括変換も可能ですので、試してみても良いかもしれません。

尚、Webpに関しては当メディアにてくわしく解説していますので、興味のある方は一度ご覧ください。

>>>WebP（ウェッピー）とは？変換方法と使用するメリットのまとめ

もっと簡易的に知りたいという方は、「Webサイトの表示を高速にする次世代の画像形式3選」という動画を公開していますので、こちらをご確認ください。

CLSを改善する方法

CLSの改善もまた、画像調整がキーになるといえます。ちょっとした設定、工夫だけでも効果的です。以下、確実におさえておきましょう。

width（横幅）とheight（高さ）を設定する

CLSを改善する基本的な方法は、画像にwidth（横幅）とheight（高さ）を設定することです。画像の大きさをHTMLで示すことにより、（画像の）表示領域があらかじめ確保されるため、読み込みによるレイアウトの変更を防げます。

設定の際の記述例は以下の通りです。

<img src=”URL” alt=”代替テキスト” width=”横幅の数値” height=”高さの数値”>

上記を全ての画像に対して行います。
なお、動画を埋め込む場合は、<iframe>タグにwidthとheightを入力してください。

広告の種類、配置を変更する

広告バナーの自動表示を設定している場合、まずはバナーに先述のwidthとheightが設定されているか確認しましょう。

仮に未設定、なおかつ広告の種類を変更できなければ、表示位置の変更が対応手段です。たとえば、Webページの最上部は視認性も高く、広告効果の高い一等地ですが、最上部の広告に遅延が起きると、以下のコンテンツ全てが移動するため、CLSは大きく悪化してしまいます。そのため、対象の広告をページの中盤以降に設置する調整が必要です。

広告認知の点においては多少の犠牲を払うことになりますが、（対象の広告より）上部のコンテンツの移動は回避できます。

INPを改善する方法

INPには、JavaScriptが大きく影響しています。裏を返せば、JavaScriptを必要最小限に減らすことで、INPは改善可能です。

不要なJavaScriptを削除する

JavaScriptが過多に使われているWebサイトは実は、そう少なくありません。ここでも先述した「PageSpeed Insights」を効果的に使いましょう。「使用していないJavaScriptの削除」をクリックすると、不要なJavaScriptが一覧で表示されます。

たとえば、WordPressに組み込んだプラグインやGoogle Tag Manager（タグマネージャー）で作成したタグのなかには、使わなくなったものも多いはずです。問題無ければ、削除しましょう。

JavaScriptを最小化する

削除できないJavaScriptは、サイズを最小化することで読み込み速度の向上につながります。
JavaScriptの最小化とは、余計な空白や説明テキストを削除し、データサイズを最小限に留めることです。「JSMin」や「packer」といった無料の最小化ツールも多く、手っ取り早く無駄な動作を減らせます。快適なブラウジングこそ、まさしく良好なINPです。

Core Web Vitalsを改善し、ユーザー体験とSEO評価の向上につなげよう！

LCP・INP・CLSの3要素で構成されるCore Web Vitalsは、その仕組みや定義の更新、改善のためのベストプラクティスなど、今後も何かと話題に上ると考えられます。

まずは地道に向き合うことです。拙稿で取り上げた「Google Search Console」及び「PageSpeed Insights」を使って改善点を把握し、然るべき対処法で一つずつ問題を解決していけば、自ずとGoogleから安定した評価を受けられるようになるでしょう。

とりわけ、画像の圧縮と、widthとheightの指定は徹底しなければならない大事なポイントです。ぜひ、意識して取り組んでみてください。

小さな工夫を積み重ねることで、ユーザー、検索エンジン、両方から愛されるWebページが生まれるはずです。

#コアウェブバイタル