コアウェブバイタル(Core Web Vitals)とは？対策や改善方法ついて解説

2020年にGoogleから発表されたコアウェブバイタル(Core Web Vitals)という新しい指標。ランキング要因にも使用される可能性があるということでWEB担当者、SEO担当者にとっては重要な話題とされています。

ウェブにおけるユーザー体験の向上を目的とした取り組みをグーグルが始めた考え方を具体的に3つの指標にしたのが今回の「コアウェブバイタル」です。本記事ではそもそもコアウェブバイタルとは？自社のサイトでどのように確認するのか？対策はどうすればいいのか？などを徹底解説いたします。

ウェブサイト制作でお悩みの担当者様へ
ウェブサイトの新規制作やリニューアルで失敗したくないが、どの制作会社も似たような提案でどこに依頼したら良いかわからない・・・。
ウェブサイトの制作会社を探していて、このようなお悩みはありませんか？
ウェブサイトは制作目的やご予算によって、最適な手法を検討する必要があります。弊社ではクライアント様の目的に応じて、集客・デザイン・機能面で最適なご提案をいたします。




ウェブサイト制作について
無料で相談する

コアウェブバイタル(Core Web Vitals)とは？

コアウェブバイタルとは、ユーザーがWEBサイトをより快適に利用できるようにするために重要となるUX（ユーザーエクスペリエンス）指標の中でも、全てのサイトに共通して重要なシグナルのことです。

Googleはコアウェブバイタルについて以下のように説明しています。

ユーザー エクスペリエンスの質の測定には、多くの側面があります。そのほとんどはサイトやコンテキストに固有のものですが、すべてのウェブ エクスペリエンスにとって重要な共通シグナル、つまり「Core Web Vitals」が存在します。

このようなユーザー エクスペリエンスの核となるニーズには、読み込み時間、インタラクティブ性、ページ コンテンツの視覚的な安定性などが含まれ、これらを組み合わせたものが 2020 Core Web Vitals の土台になります。

引用元：Web Vitals の概要: サイトの健全性を示す重要指標

少し著者の理解を元に補足します。

私たちがGoogleを使って情報を検索するとき、検索者としてGoogleの検索結果に求めるものは「自分が必要とする情報（〜とは、方法、おすすめ情報、選び方など）に合致した答えを教えてくれるサイトをリスト化してほしい」というものです。

しかし、正しい答えを返してほいいというニーズ以外に

• 表示速度が遅いサイトはいやだ
• 広告ばかり表示されるサイトはいやだ
• 広告を誤タップさせようとするサイトはいやだ

という使い勝手の悪いサイトを嫌う価値観も私たちは持ち合わせています。

後者の価値観はサイトの種類に関係なく全てのWebサイトに対して感じる価値観であり、コアウェブバイタルとは、この価値観を検索結果に反映するためにGoogleが用意したWebサイトの使い勝手を評価するための指標なのです。

コアウェブバイタルで採用されている指標は以下の3つです。

• LCP(Largest Contentful Paint)：読み込み時間
• FID(First Input Delay)：インタラクティブ性
• CLS(Cumulative Layout Shift)：ページコンテンツの視覚的な安定性

LCP(Largest Contentful Paint)：読み込み時間

上記の通り、LCPはメインコンテンツの読み込み時間に関する指標です。SEOではWEBページの読み込み速度が重要な評価指標であることは知られていますが、LCPはページ内で重要なコンテンツ（タイトル、画像、テキストブロックなど）の表示スピードを対象としています。

ページの読み込み開始からメインコンテンツの表示までが2.5秒以内であれば、「良好」と評価されます。それ以上かかる場合は改善の必要があり、4秒以上かかると悪いページと評価されてしまいます。

FID(First Input Delay)：インタラクティブ性

ユーザーがページ内でなんらかの行動をした場合、WEBサイトはそれに応じた反応を返します。例えば、リンクを押したらページ遷移する、ダウンロードボタンを押したらファイルをダウンロードする、といった反応です。この反応までの時間の長さを示す指標がFIDです。

ユーザーがアクションを起こしてから100ミリ秒以内にWEBサイトが反応すれば「良好」であると判断されます。

CLS(Cumulative Layout Shift)：ページコンテンツの視覚的な安定性

WEBページのコンテンツは、すべて同時に表示されたり、ページ上部から順に表示されるとは限りません。テキスト部分が先に、後から画像が表示されるといったことがあります。

例えば、先に表示されたテキストを読み始めたら、画像が現れて読んでいた部分が画面から消えてしまった。リンクを押そうとしたら広告が表示され、間違えてクリックしてしまった、ということが発生します。これらのユーザーにとって不便な現象を数値化した指標がCLSです。

「ズレが発生した領域の比率×距離の比率」という計測方法で数値化され、0.1未満であれば「良好」と判断されます。

コアウェブバイタル(Core Web Vitals)の検索順位(SEO)影響度は？

コアウェブバイタルが導入されても、もっとも重要な評価基準は「コンテンツの質」であることに変わりありません。同程度のクオリティをもつページが並んだときに、コアウェブバイタルの評価が「良好」（GOOD）である方を優遇すると考えられています。

LCPやFID、CLS自体が検索順位を左右するわけではなく、各基準値をクリアしていればプラスに働いたり、優遇されたりするものと捉えておけばよいでしょう。以下にGoogleのSearch Console CommunityでまとめられたコアウェブバイタルのFAQのランキングに関する部分をまとめました。

Q: ウェブに関する主な指標はランキングに影響しますか？

A: 2021 年 5 月より、ウェブに関する主な指標は、モバイル フレンドリー、セーフ ブラウジング、HTTPS セキュリティ、煩わしいインタースティシャルに関するガイドラインといった既存の検索シグナルとともに、ページ エクスペリエンス シグナルに含まれます。詳しくは、Search Central のブログ投稿をご覧ください。

Q: ランキング シグナルとして、ページ エクスペリエンスと使用状況の評価によって影響を受けるページはどのように決定されますか？

A: ページ エクスペリエンスは、ページのランク付けに使用される多くのシグナルの 1 つにすぎません。検索クエリのインテントは、依然として非常に強力なシグナルです。そのため、ページ エクスペリエンスが標準以下のページでも、関連性の高い優れたコンテンツがあれば、上位にランク付けされる可能性があります。

Q: PC とモバイルでランキングに違いはありますか？

A: 現時点で、ページ エクスペリエンスをランキングのシグナルとして使用することは、モバイル検索にのみ適用されます。

参照：アウェブバイタルとページエクスペリエンスに関するFAQ

コアウェブバイタル(Core Web Vitals)対応状況の確認方法

それでは、自社サイトがコアウェブバイタルにどの程度対応できているかを確認しましょう。非エンジニアの方でも調査できる方法をご紹介します。

Search Console(サーチコンソール)

Search consoleはGoogleアナリティクスと連携することで、より詳しくWEBサイトの計測ができるツールです。アクセス解析には必須のツールと言えますので、既にお使いの方も多いでしょう。コアウェブバイタルの指標も、Search consoleで確認できます。

Google Search console にログイン後、左カラムのメニュー「ウェブに関する主な指標」をクリックします。すると右側に、「モバイル」「PC」と別々にグラフが表示されますので、見たい方の「レポートを開く」をクリックします。

LCP・FID・CLSの3つを「良好」「改善が必要」「不良」の3段階レベルでの判定結果を確認することができます。

Googleサーチコンソールとは？使い方と登録方法や設定を解説 Webサイトの集客状況を分析する際にGoogleアナリティクスと同じくらい役立つのがGoogleサーチコンソールです。サーチコンソールへの登録方法やGoogleアナリティクスとの連携方法について、わかりやすく解説します。

PageSpeed Insights（ページスピード インサイツ）

PageSpeed Insightsは、Googleが提供しているWEBサイト内の各ページの評価を個別にチェックできるツールです。ページの表示速度をURLベースで調査することができます。

このツールでは、フィールドデータとラボデータの2種類で計測が可能です。フィールドデータとは、実際にサイトを訪問したユーザーのデータをもとにしたもので、ラボデータは実験シミュレーションをもとにしたもです。

フィールドデータは実際のアクセスデータがある程度集まってからでないと結果がわかりませんが、ラボデータはシミュレーションデータなので直ぐに確認することが可能です。PageSpeed Insightsにアクセスし、計測したいWEBページのURLを入力します。

「分析」ボタンを押すとページの計測が行われ、結果が表示されます。

コアウェブバイタルの指標であるLCP、FID、CLSも確認できます。また、画面下部には具体的な問題点や解決方法も表示されますので、ページ改善の参考になります。

Lighthouse（ライトハウス）

Lighthouseは、公開前のWEBサイトのコアウェブバイタル対応状況を確認できます。コアウェブバイタルの3つの指標への評価のほかに、さまざまなチェック項目を設けており、サイトの改善ポイント発見に役立ちます。

ただしLighthouseは公開前のオフラインでの計測となるため、実験的なラボデータでの計測のみとなります。ラボデータではFIDの数値を測定できないため、代わりに合計ブロッキング時間を表す「TBT」を使って測定します。

Chrome DevToolsを利用している場合は既に組み込まれていますが、そうでない場合はChromeウェブストアから拡張機能としてLighthouseを追加してください。なお、Lighthouseの利用は無料です。拡張機能に追加後、計測したいページを開いた状態でLighthouseを選び「Generate report」を押します。

そのWEBページの計測結果や、問題点などが表示されます。

Chrome 拡張「Web Vitals」

Chromeの拡張機能「Web Vitals」を追加し、コアウェブバイタルの評価を確認する方法もあります。

Chrome拡張機能を利用すれば、Javascriptコードの記述の必要もなく、各指標へのフィードバックを瞬時に測定することが可能です。

Chromeに追加するだけで、今見ているページのコアウェブバイタル状況を自動計測します。拡張機能を有効化するとChrome画面左上に、緑や赤など評価ごとの色と計測された秒数が表示されます。WEBサイトの状態が一目でわかるので、手軽に取り入れることが可能です。

コアウェブバイタル(Core Web Vitals)対策・改善方法

自社サイトのコアウェブバイタルが、指標となるレベルをクリアしていない場合は改善が必要です。3つの指標のいずれかで基準値を超える結果が出た場合はまず、ページ内のどのコンテンツに改善課題があるのかを探る必要があります。

改善すべき箇所の特定方法

改善すべき箇所は、コアウェブバイタルの計測方法としてもお伝えしたPageSpeed Insights（ページスピード インサイツ）から確認することができます。PageSpeed Insightsの診断結果として表示される、ユーザーエクスペリエンスの状況を見てみましょう。

赤い三角マークのついている箇所が、改善すべき課題ポイントになっています。「修正方法を表示」をクリックすれば、より詳しい情報をチェックし対策に役立てることができます。

LCPのスコア低下要因と改善方法

LCPのスコアを低下させる要因は複数考えられます。

• リソースの読み込み時間の遅延
• サーバーの応答速度
• クライアント側のレンダリング
• JavaScript、CSSによるレンダリングブロック

上記の各要因を詳しく解説します。

リソースの読み込み時間の遅延

画像や広告などのサイズが大きすぎたり、重すぎたりする場合LCPのスコアが低下しやすいです。画像の圧縮をしたり、webpのような新しいファイル形式の画像を使ったりすることで対処できます。またCSSやJava Scriptのテキストファイルを圧縮することでも、読み込み速度が改善する可能性があります。

サーバーの応答速度

サーバーの応答速度も、LCPスコアの問題になりやすい点です。サーバーを最適化することや、キャッシュ設定の見直しをしてみるのもよいでしょう。また、ユーザーを近くのコンテンツ配信ネットワークへ経路選択することで改善する場合があります。

クライアント側のレンダリング

クライアント側でレンダリングされるサイトである場合、容量の大きなJava Sprictが使用されていることもあります。クライアントでレンダリングされるサイト構築を行う際には、以下の方法を検討してみてください。

• サーバー側のレンダリングを使う
• 重要なJava Sprictを最小限にする
• 事前レンダリングを使う

JavaScript、CSSによるレンダリングブロック

スクリプトやスタイルシートは、LCPスコアを低下させる要因になります。レンダリングブロックが問題となっている場合には、まず使用していないファイルを削除してみてください。

問題となっているCSSファイルの不要なコメント・改行・空白などを削除する「minify化」を実行するのもひとつの方法です。また、Java ScriptやCSSのブロック時間を削減することや、重要度の低いCSSを延期することなどでもLCPは改善します。

FIDのスコア低下要因と改善方法

FIDのスコア低下要因は非常にシンプルで、大量のJava Sprictを実行しているためです。Java Sprictを実行している間ブラウザは、ユーザーが何らかのアクションを起こしても反応することができません。改善するには、長いJava Sprictの実行タスクを分割したり、Java Spricの量を制限する必要があります。

CLSのスコア低下要因と改善方法

サイズの指定されていない画像、動的に挿入されたコンテンツ、WEBフォントの使用などによって、各コンテンツごとの読み込みにズレが生じやすくなります。画像に関しては、常にwidth（幅）とheight（高さ）を指定しておくとよいでしょう。

また、画像や広告を表示させる領域をあらかじめ指定しておくことも策のひとつです。CLSスコア低下を引き起こす要因は限られているため、LCPやFIDの改善より比較的簡単であるといえます。

パフォーマンス改善にはエンジニアの協力が必須

ここまで見てきたように、コアウェブバイタルの指標を手がかりに、WEBページのパフォーマンスを改善することができます。特に、Googleの提供するSearch console、PageSpeed Insights、Lighthouseといった各種のツールでは、問題点まで発見することができ、大きなヒントが得られます。

ただしコアウェブバイタルは、改善のためには非常に専門的な知識が必要な分野でもあります。
ページの表示スピードや反応速度は、サーバの設定、WEBページの表示順序、作動させるJava Sprictなどを見直し、修正する必要があるためです。

ページ内の表示のずれについても、コンテンツ表示に関する知識が欠かせません。パフォーマンス改善を本格的に行うには、エンジニアの協力が必須となります。

自社内にエンジニアがいない、WEBサイト制作を外注した業者はデザインが専門でエンジニアまでは手配ができない、などのケースも多いでしょう。リソース不足でパフォーマンス改善が手つかずになってしまっているならば、ぜひニュートラルワークスにご相談ください。

経験豊かなエンジニアを始めとした専門家たちが、ページスピード改善のお手伝いをいたします。ご相談はこちらからどうぞ。

コアウェブバイタル(Core Web Vitals)の導入時期はいつから？

Googleがコアウェブバイタルの考え方や、今後SEOに影響を与えるようになることを発表したのは2020年でした。その時点では、2021年5月から導入が開始されるとされていました。ただし予定は少し遅れており、現在では2021年6月〜8月の間に、SEO評価方法の一部に使用されるようになるとされています。

—-
【情報更新】
2021年6月16日に行われたコアアップデート（ページエクスペリエンスアップデート）にコアウェブバイタルの導入が含まれています。
Google公式によるとページエクスペリエンスアップデートは段階的に行われ、2021年8月末までに完了する予定とのことでしたが、9月3日にページエクスペリエンスアップデートが完了したことを検索セントラルの公式 Twitterアカウントがアナウンスしました。
—-

今後確実に必要となるものなので、今からコアウェブバイタルの考え方を理解し、WEBサイトの改善を始めておくべきです。とはいえ、一気に全ての基準が変わるわけではありませんし、コアウェブバイタルの指標だけが重視されるわけでもありません。SEOの評価基準の中に、徐々に組み込まれていくものと発表されています。

そのため、WEBサイトの改善についても、コアウェブバイタルのためだけに行うべきではありません。あくまでもユーザーがWEBサイトをいつでも快適に使用できるように、アップデートを行いましょう。
Googleコアアップデートとは？最新情報、対策をわかりやすく解説

コアウェブバイタルのまとめ

まずは、コアウェブバイタルの3指標が意味することをしっかり理解しましょう。そして、自社サイトがユーザーにどのような閲覧体験を提供しているかを、データをもとに把握することから始めてみてください。

コアウェブバイタルによる評価はキーワードの検索結果順位だけでなく、サイト全体の評価を向上させる要素になります。コアウェブバイタルの指標を意識することはユーザビリティの改善に繋がるため、顧客の離脱率改善、コンバージョンアップなどにも貢献されると考えてもよいのではないでしょうか。

ただし、Googleが目指しているものは「ユーザーの検索体験（UX）の最適化」でしかありません。 ページ読み込み速度が速いサイトや、画像サイズが指定されているサイトであれば評価される……というわけではありません。

「ページ読込速度が速いサイトの方がユーザーが満足する」 「閲覧したときに画像のサイズが適切でユーザーにとって見やすい」ために評価されるのだということを理解しておきましょう。この考え方を踏まえ、サイトのユーザビリティ改善に取り組んでいくというスタンスが必要です。

自社サイトの改善において「何から手をつければいいか分からない」という状況に陥っている場合は、まずはサイトの表示速度改善から取り組んでみるのがよいのではないでしょうか。ニュートラルワークスでは、コアウェブバイタルをはじめとするサイト表示速度の相談を承っております。

サイトの診断から、具体的な改善施策のご提案までトータルでサポートいたします。まずはお気軽にニュートラルワークスまでお問い合わせください。WEBサイトの表示速度高速化についても併せてご覧ください。