Core Web Vitalsとは？表示が遅いときの見方と直し方

Core Web Vitalsとは？

Core Web Vitals（コア ウェブ バイタル）とは、Google が示す、ページの使い心地を測る3つの指標のことです。ページの主な内容が表示されるまでの速さ、押したときの反応の速さ、読み込み中の見た目のずれの少なさを、それぞれ数字で表します。

3つの指標は、実際にページを見た人の端末で測ったデータで判定します。Google の web.dev では、実際に見た人の75パーセンタイル（遅い側から4分の1を除いたあたり）の値で判定し、モバイルとパソコンを分けて評価することを勧めています。

この項目は、ガーディアンの無料のホームページ診断では、新・七つの大罪の「大罪-17 Core Web Vitals合格」にあたり、77's Check!! の「No.59 Core Web Vitals 合格」と同じ項目です。ほかの診断項目の解説は、ホームページ診断の項目解説の一覧から読めます。

Core Web Vitals の3つの指標と「良好」の目安

3つの指標と、「良好」とされる目安は次のとおりです。3つとも目安を満たして、はじめて合格になります。

反応の速さは、以前は FID という指標で測っていましたが、web.dev によると2024年に INP に置き換わっています。古い資料で FID と書かれていれば、今は INP を見ます。

Core Web Vitals が悪いと、何が起きるか

Core Web Vitals が悪いと、見に来た人は表示を待たされ、押したのに反応せず、読んでいる途中で画面がずれて別のところを押してしまいます。とくにスマホで外出先から見る人にとっては、待ち時間や押し間違いがそのまま離れる理由になります。

問い合わせのページで反応が遅いと、送信ボタンを何度も押したり、入力の途中でやめたりする人も出ます。読み込み中に広告やバナーが差し込まれて画面がずれると、押したいボタンとは別のリンクを押してしまうこともあります。

検索の面でも関係があります。Google の説明では、Core Web Vitals は、ほかのページ エクスペリエンスの要素とあわせて、検索のコア ランキング システムが評価しようとするものと合っているとのことです。そのうえで、Search Console の Core Web Vitals レポートで確かめるよう案内しています。

この項目は、社内のパソコンと会社の回線で見ていると気づきにくいのが特徴です。社内では速く感じても、外出先のスマホや混み合う回線では遅いことがあります。実際に見た人のデータで確かめることが出発点になります。

自社のホームページで確かめる方法

Core Web Vitals は、Google が無料で公開している PageSpeed Insights と Search Console で確かめられます。大切なのは、実際に見た人のデータ（フィールド データ）と、道具で試したデータ（ラボ データ）を分けて見ることです。

1. PageSpeed Insights で、実際の利用者のデータを見る
   PageSpeed Insights（PSI）に、トップやサービスのページの URL を入れて分析します。上のほうに出る、実際のユーザーのデータの欄が、Chrome の利用者から集めた直近28日間のデータです。Core Web Vitals の評価が「合格」か「不合格」かをここで見ます。
2. モバイルとパソコンの両方を見る
   PageSpeed Insights の上部で、モバイルとパソコンを切り替えて、両方の評価を確かめます。スマホのほうが遅く出ることが多いので、まずモバイルを見てください。
3. データが足りないときの表示を知っておく
   見る人が少ないページでは、ページ単位のデータが足りず、サイト全体（オリジン）のデータに切り替わったり、評価できなかったりします。「データがありません」と出ても、遅いと決めつけず、サイト全体の評価やラボ データで当たりをつけます。
4. Search Console の Core Web Vitals レポートを見る
   Search Console に登録していれば、Core Web Vitals レポートで、モバイルとパソコンごとに「良好」「改善が必要」「低速」の URL のまとまりを確かめられます。まとまりの評価は、3つの指標のうち最も遅いもので決まります。
5. ラボ データで、遅い原因の当たりをつける
   PageSpeed Insights の下のほうに出る数値と改善の提案は、道具で試したラボ データです。実際の利用者の評価と食い違うことがありますが、どこが遅いかの手がかりになります。

まとめて確かめたい場合は、無料診断で20項目を一度に確かめられます。Core Web Vitals のほかに、スマホ対応やファーストビューなど、ホームページの基本となる項目をあわせて確かめられます。

ホームページの表示が遅くなる、よくある原因

ホームページの表示が遅くなる原因は、大きく分けて4つあります。多くは、見栄えのよい写真や便利な機能を足していった結果で、作り方の良し悪しというより、足すたびに速さを確かめる手順がなかったことから起きます。

最初に見える画像が大きい、後回しにされている

トップの大きな写真やスライダーの画像は、表示の速さ（LCP）を左右しやすい部分です。画像の大きさが表示よりずっと大きい、古い形式で圧縮していない、といった場合は読み込みに時間がかかります。web.dev では、LCP の画像を遅延読み込みにしないことや、画像を表示の大きさに合わせて圧縮することを勧めています。

外部のタグや部品が多い

計測や広告のタグ、チャット、SNS の埋め込みなど、外部から読み込む部品が増えると、表示が遅くなったり、押したときの反応（INP）が遅くなったりします。使っていないタグが残っていることも少なくありません。

画像や埋め込みに、大きさが指定されていない

画像や動画、地図などの埋め込みに大きさ（幅と高さ）が指定されていないと、読み込まれた時点で周りの文章が押し下げられ、見た目のずれ（CLS）が起きます。後から差し込まれるバナーや広告も同じです。web.dev では、画像などに width と height を指定し、広告や埋め込みには先に場所を確保しておくことを勧めています。

サーバーの応答が遅い

ページを頼んでから最初の応答が返ってくるまでが遅いと、その後のすべてが遅れます。転送の回数が多い、サーバー側の処理が重い、キャッシュが効いていない、といったことが原因になります。

Core Web Vitals の直し方（対策は3つ）

Core Web Vitals は、どのページのどの指標が悪いかを書き出し、原因に合わせて直し、実際の利用者のデータで良くなったかを確かめる仕組みを持つことで改善できます。作り直さなくても、画像や部品の見直しで良くなる場合が少なくありません。対策は、自社でできること、制作会社に頼むこと、仕組みで保つことの3つです。

対策1：ページごとの評価を、表にまとめる

最初にすることは、主なページの評価を表にまとめることです。表の形は「ページ／モバイルの LCP・INP・CLS／パソコンの LCP・INP・CLS／合格か／ラボ データの主な提案」がおすすめです。PageSpeed Insights の画面を写して残しておくと、直した後と比べられます。

対象は、トップ、サービス、問い合わせなど、見られることの多いページから始めます。目安として、主なページ5〜10枚分の表づくりは、担当者1人で1〜2時間ほどです。自社で行えば費用はかかりません。

対策2：原因に合わせて、制作会社に直してもらう

直す作業は、制作会社に頼みます。対策1の表を渡せば、どのページのどの指標を良くしたいかが一度で伝わります。

頼むことは主に4つあります。1つ目は、最初に見える画像を表示の大きさに合わせて圧縮し、遅延読み込みにしないなど、早く表示される設定にすることです。2つ目に、使っていない外部のタグや部品を外し、必要なものは読み込み方を見直してもらいます。3つ目は、画像や埋め込みに大きさを指定し、後から出るバナーには場所を確保することです。4つ目に、サーバーの応答やキャッシュの設定を確かめてもらいます。

費用と手間は、ホームページの作りや、使っている外部の部品によって変わります。画像の差し替えやタグの整理で済むこともあれば、テンプレートの見直しが要ることもあります。まず原因を確かめてもらい、効果の大きいものから順に、作業の範囲と費用を相談するのが確実です。

対策3：直した後を、実際のデータで確かめ続ける

直した効果は、実際の利用者のデータに少しずつ表れます。PageSpeed Insights の実際のデータは直近28日間の集計なので、すぐには変わりません。確かめ続けるポイントは3つです。

1つ目は、Search Console の Core Web Vitals レポートで、直した URL のまとまりについて「トラッキングを開始」を押し、修正の検証を始めることです。Search Console ヘルプによると、28日間のモニタリングで問題が出なければ、解決と判断されます。2つ目に、新しい画像やタグ、部品を足すときは、公開の前後で PageSpeed Insights を見比べる手順を入れます。3つ目は、四半期に1回など決まった時期に、対策1の表を見直すことです。

制作会社に頼むときの伝え方

制作会社に頼むときは、対策1の表と PageSpeed Insights の画面の写しを添えて、「どのページの、どの指標が、モバイルとパソコンでどう出ているか」を伝えると、確認が一度で済みます。表示の遅さは、写真や部品を足していった結果として起きやすいだけなので、頼めば直せる部分です。誰が悪いかではなく、これから部品を足すときの確かめ方を一緒に決めることを優先しましょう。

そのまま使える依頼文の例です。

あわせて、次の点を確かめてもらうと、作業の範囲と費用の見通しが立ちます。

• 最初に見える画像の大きさと形式、読み込み方
• 使っていない外部のタグや部品の有無
• 画像・動画・埋め込みに大きさが指定されているか
• サーバーの応答時間とキャッシュの設定
• 直した後の PageSpeed Insights の結果と、Search Console での修正の検証の状況

あわせて確かめたい項目

Core Web Vitals は、ホームページを安定して見てもらうための土台を整える項目（サイト基礎力）の1つです。表示の速さや使い心地に関わる、次の項目もあわせて確かめておくと、改善の効果を確かめやすくなります。

• スマホ対応：スマホで開いたときに、画面の幅に合わせて表示され、押しやすいか。
• ファーストビュー：開いて最初に見える画面に、何のページかが分かる見出しが入っているか。
• 画像の最適化：写真が大きすぎて、ページを重くしていないか。
• サーバーの応答速度（TTFB）：ページを頼んでから、最初の応答が返るまでが遅くないか。

診断の項目ごとの解説は、ホームページ診断の項目解説の一覧から読めます。

よくある質問

まとめ

• Core Web Vitals とは、表示の速さ（LCP）、反応の速さ（INP）、見た目のずれ（CLS）の3つの指標のことです。
• LCP 2.5秒以内、INP 200ミリ秒以下、CLS 0.1以下が「良好」の目安で、実際に見た人の75パーセンタイルで判定します。
• PageSpeed Insights の上の欄と Search Console のレポートで、実際の利用者のデータを確かめます。
• 大きな画像、多すぎる外部のタグ、大きさの指定がない画像や埋め込み、遅いサーバーの応答が、よくある原因です。
• 悪い場所は自社で表にまとめ、直すのは制作会社に頼み、実際のデータで効果を確かめ続けます。

Core Web Vitals は、社内のパソコンでは気づきにくい項目です。中小企業のホームページを制作し、公開後の運用と改善まで支える株式会社ガーディアンでは、Core Web Vitals を含むホームページの基本の項目を確かめる無料のホームページ診断を用意しています。