Webデザイン

最終更新日: 2021.04.09 (公開: 2021.03.09)

コアウェブバイタル(Core Web Vitals)とは?導入時期、確認方法、対策について徹底解説

コアウェブバイタル(Core Web Vitals)とは?導入時期、確認方法、対策について徹底解説

2020年にGoogleから発表されたコアウェブバイタル(Core Web Vitals)という新しい指標。

ランキング要因にも使用される可能性があるということでWEB担当者、SEO担当者にとっては重要な話題とされています。
ウェブにおけるユーザー体験の向上を目的とした取り組みをグーグルが始めた考え方を具体的に3つの指標にしたのが今回の「コアウェブバイタル」です。
本記事ではそもそもコアウェブバイタルとは?自社のサイトでどのように確認するのか?対策はどうすればいいのか?などを徹底解説いたします。

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

コアウェブバイタル(Core Web Vitals)とは?
コアウェブバイタルとは、ユーザーがWEBサイトをより快適に利用できるようにするために重要となるUX指標のこと。UXとはユーザーエクスペリエンスのこと。ユーザーの実際の行動を分析して導き出す評価です。

もともとGoogleは「ウェブバイタル」というコンセプトを掲げています。ウェブバイタルについてGoogleは以下ように説明しています。

Web Vitalsは、ウェブ上で優れたユーザーエクスペリエンスを提供するために不可欠な高品質の信号について、統一されたガイダンスを提供するためのGoogleによるイニシアチブです。

引用元:ウェブバイタル(web vitals)

これは、サイトコンテンツの充実にプラスして、ユーザーがより使いやすく目的のコンテンツに辿り着きやすいように配慮したり、運営企業のコンバージョンにつながるサイト構造にすることも非常に大切だという考え方です。ユーザー体験の質を向上させ、より健全なサイトを作っていこうという取り組みであり、ユーザーエクスペリエンスの高いサイトを優先的に評価することは既に広く知られています。

ただ「ユーザーにとっての快適さ」や「ユーザーにとっての質の高さ」を具体的に知ることは難しく、自社サイトのどこをどう改善すればよいのかがわからないといった状況に立たされることも少なくないはずです。そこでGoogleは、ウェブバイタルの中核となる具体的な3つのUX指標「コアウェブバイタル」を導入すると発表しました。WEBサイトを制作する側は、明確な指標の値をもとにサイトを構築したり、改善したりすることが可能になります。これまでに比べ、ユーザーエクスペリエンスの向上を効率的にできるようになると考えられています。

ユーザー エクスペリエンスの質の最適化は、ウェブのあらゆるサイトにとっての長期的な成功の秘訣です。私たちは、たくさんのウェブ デベロッパーやサイトオーナーと連携を続け、Google のあらゆる場所で多くの便利な指標やツールを作成してきました。これは、ビジネス オーナー、マーケティング担当者、デベロッパーなどが等しくユーザー エクスペリエンスを改善する機会を特定できるようにするためです。しかし、たくさんの指標やツールが存在することで、優先度や明確さ、整合性の面で課題が生まれていることも事実です。

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

Googleはこれまで、アナリティクスやサーチコンソール、デベロッパーツールなどのさまざまな手段を提供し、WEBサイトを運営する人たちがサイトを改善するためのヒントや課題を見つけやすくする取り組みを行ってきました。しかし、ツールや指標が混雑化してきてしまった部分も否めないため、新たな取り組みとしてすべての統合ガイドの役割をする「コアウェブバイタル」が導入されることになったのです。

コアウェブバイタルが導入されることでSEOを扱う人たちは、課題の優先順位、明確さ、整合性などのあらゆる面で、よりわかりやすく簡潔なサイト改善策を見つけ出せるようになります。

コアウェブバイタル(Core Web Vitals)の重要指標LCP/FID/CLSとは?

コアウェブバイタル(Core Web Vitals)の重要指標LCP/FID/CLSとは?

コアウェブバイタルには、もっとも重要なポイントとして3つのUX指標を提示しています。この3つに共通するのは「ページの表示速度」に関係していること。それぞれの具体的内容を詳しくチェックしておきましょう。

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

Largest Contentful Paint は、ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。

LCPとは、メインコンテンツの読み込み時間に関する指標です。SEOでは、ページの読み込み速度が重要な評価基準になることが広く知られていますよね。LCPは、ページ内で最も重要なコンテンツの表示スピードを指しています。たとえば、タイトル画像やテキストブロックなどがメインコンテンツの代表例です。ページの読み込み開始からメインコンテンツの表示までが2.5秒以内であれば「良好」と評価され、それ以上かかる場合は改善の余地があると判断されます。

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

First Input Delay は、最初の入力までの遅延を表します。応答性を測定して、ユーザーが最初にページを操作しようとする場合に感じるエクスペリエンスを定量化します。

ユーザーが自社サイトに訪問し、初めて行動してから次の行動の結果が反映されるまでの時間をインタラクティブ性「FID」という項目で示します。たとえば、ページのリンクをクリックして目的のページが表示されるまでの時間、文字入力を行ったときの反応、ダウンロードボタンのクリックから応答などにかかる時間です。インタラクティブとは「対話式」「双方向」といった意味をもっており、WEBサイト上ではスムーズな会話のように素早いレスポンスが求められます。FIDは、ユーザーがアクションを起こしてから100ミリ秒未満で結果が表示されれば「良好」であると判断され、それ以上かかる場合は改善が必要になります。

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

Cumulative Layout Shift は、ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。

ページの中に、コンテンツレイアウトのズレが生じている場合の幅についての指標です。ページを表示したとき、テキストはすぐに表示されるのに対し、画像は遅れて表示される……といったことがよく起こります。この場合ページ内のレイアウトが崩れる可能性があり、そのズレの幅を計測しています。ズレの幅が多いと、その分コンテンツの移動に時間がかかるため、ページ内の全コンテンツが表示し終えるまでの時間が長くなるのです。コンテンツのズレが生じると、ユーザーは意図しない場所を誤ってタップしてしまったり、間違ったアクションを起こしてしまったりと不便を被ります。CLSスコアの計算方法は「ズレが発声した領域の比率×距離の比率」で算出され、0.1未満のスコアであれば良好と判断されます。

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

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

コアウェブバイタルの取り組みが発表されたのは2020年ですが、実際に導入されるのは2021年5月からとなります。つまり、新しい指標を用いた評価基準で、検索結果のランキングを組み替えるということです。大規模なアップデートがすでに予告されていることになるため、それまでの期間にコアウェブバイタルを正しく理解し、改善を施しておく必要があるといえます。

ただし、コアウェブバイタルの導入やアップデートのためにサイト改善を行うという考え方が正しいとはいえません。WEBサイトは、いつ何時もユーザーが快適にサイトを使用できるように追求し続けることが成果のアップや事業の拡大につながっていくと考えるべきでしょう。

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

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

コアウェブバイタルが導入されても、もっとも重要な評価基準は「コンテンツの質」であることに変わりありません。

同程度のクオリティをもつページが並んだときに、コアウェブバイタルの評価が「良好」(GOOD)である方を優遇すると考えられています。LCPやFID、CLS自体が検索順位を左右するわけではなく、各基準値をクリアしていればプラスに働いたり、優遇されたりするものと捉えておけばよいでしょう。

Googleは近年、検索結果のランキングを決める基準として以下の項目を追加し、ユーザー体験の向上を目指す取り組みを強化しています。

  • モバイルフレンドリー
  • HTTPS
  • インターステーシャル
  • ポップアップ表示
  • セーフブラウジング

コアウェブバイタルは上記のような既存の基準と組み合わせながら評価を行い、検索順位に反映させていくことになる見込みです。リリースされる2021年5月まではまだ時間があるため、それまでの期間を準備期間と捉え、コアウェブバイタルについての理解を深めておくことや、各種計測ツールの扱いに慣れておくことに努めましょう。また、これまで通りWEBサイトや各ページごとのユーザーエクスペリエンス向上のための改善を繰り返していくことも重要です。

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

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

それでは、自社サイトがコアウェブバイタルにどの程度対応できているかを確認しましょう。複数のツールを使って、コアウェブバイタルへの対応状況を調べることが可能です。

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

Search consoleはアクセス解析にも必須のツールです。既にお使いの方も多いはずなので、まずはSearch consoleからチェックしてみるのもよいでしょう。Search console内部の左側メニューに「ウェブに関する主な指標」という項目をクリックします。すると、LCP・FID・CLSの3つを「良好」「改善が必要」「不良」の3段階レベルでの判定結果を確認することができます。

PageSpeed Insights(ページスピード インサイツ)

PageSpeed Insightsでは、WEBサイト内の各ページの評価を個別にチェックできるツールです。ページの表示速度をURLベースで調査することができます。このツールでは、フィールドデータとラボデータの2種類で計測が可能。フィールドデータとは、実際にサイトを訪問したユーザーのデータをもとにしたもので、ラボデータは実験シミュレーションをもとにしたもです。フィールドデータは実際のアクセスデータがある程度集まってからでないと結果がわかりませんが、ラボデータはシミュレーションデータなので直ぐに確認することが可能です。

Chrome ユーザーエクスペリエンス レポート

Chrome ユーザーエクスペリエンス レポート(以下CrUX)は、コアウェブバイタルのためのフィールドツールです。匿名で収集した実際のデータをもとに作られており、Chrome上で確認できるツールとなっています。自社サイトのパフォーマンスだけでなく、競合他社の状況を確認することも可能です。尚、PageSpeed InsightsのフィールドデータはこのCrUXのデータを用いています。ただし、CrUXはWEBサイトの実質パフォーマンスを評価するもので、ペービューごとの評価はできません。

Lighthouse(ライトハウス)

Lighthouseは、公開前のWEBサイトのコアウェブバイタル対応状況を確認できます。コアウェブバイタルの3つの指標への評価のほかに、さまざまなチェック項目を設けており、サイトの改善ポイント発見に役立ちます。ただしLighthouseは公開前のオフラインでの計測となるため、実験的なラボデータでの計測のみとなります。ラボデータではFIDの数値を測定できないため、代わりに合計ブロッキング時間を表す「TBT」を使って測定します。Chrome DevToolsを利用している場合は既に組み込まれていますが、そうでない場合はChromeウェブストアから拡張機能としてLighthouseを追加してください。なお、Lighthouseの利用は無料です。

Chrome デベロッパーツール

Chromeのデベロッパーツールでも、コアウェブバイタルの計測が可能です。デベロッパーツールも、Lighthouse同様に公開前の開発中サイトをオフラインで評価することができます。Chromeを開き、右クリックします。出現するメニューの一番下「検証」をクリックし、Ctrl+Shift+I または command+option+Iで呼び出すことができます。

Chrome 拡張

Chromeの拡張機能「Web Vitals」を追加し、コアウェブバイタルの評価を確認する方法もあります。Chrome拡張機能を利用すれば、Javascriptコードの記述の必要もなく、各指標へのフィードバックを瞬時に測定することが可能です。Chromeに追加するだけで、今見ているページのコアウェブバイタル状況を自動計測します。拡張機能を有効化するとChrome画面左上に、緑や赤など評価ごとの色と計測された秒数が表示されます。WEBサイトの状態が一目でわかるので、手軽に取り入れることが可能です。

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

コアウェブバイタル(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の改善より比較的簡単であるといえます。

まとめ

まとめ

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

ただし、Googleが目指しているものは「ユーザーの検索体験(UX)の最適化」でしかありません。 ページ読み込み速度が速いサイトや、画像サイズが指定されているサイトであれば評価される……というわけではありません。「ページ読込速度が速いサイトの方がユーザーが満足する」 「閲覧したときに画像のサイズが適切でユーザーにとって見やすい」ために評価されるのだということを理解しておきましょう。この考え方を踏まえ、サイトのユーザビリティ改善に取り組んでいくというスタンスが必要です。

自社サイトの改善において「何から手をつければいいか分からない」という状況に陥っている場合は、まずはサイトの表示速度改善から取り組んでみるのがよいのではないでしょうか。ニュートラルワークスでは、コアウェブバイタルをはじめとするサイト表示速度の相談を承っております。サイトの診断から、具体的な改善施策のご提案までトータルでサポートいたします。まずはお気軽にニュートラルワークスまでお問い合わせください。
WEBサイトの表示速度高速化についても合わせてご覧ください。

著者紹介

津久井 渉

津久井 渉

取締役

1991年生まれ。オーストラリアの高校を卒業後、その後イギリスで建築学科を卒業し、大学院ではデザインシンキングを専攻していました。楽天株式会社へ新卒で入社。トラベル事業部でマーケティング職に約3年間従事した後、2017年には株式会社LIGにWebディレクターとして転職。2019年よりニュートラルワークスへジョイン。これまでの多岐にわたる経験を元に最高なサイト作りはもちろんのこと、貴社のビジネス上の課題解決へ導きます。