田中 雄太

コアウェブバイタル(Core Web Vitals)とは?SEOに与える影響と対策方法についてわかりやすく解説します!

高速化

コアウェブバイタル(Core Web Vitals)とは?SEOに与える影響と対策方法についてわかりやすく解説します!のサムネイル

コアウェブバイタルとは、2021年からランキング要因に組み込まれるとされている、WebサイトのUX指標です。

コアウェブバイタルが導入されるとは聞いたことがあるものの、具体的にいつから組み込まれるのか・どのように改善するべきなのかわからないといった悩みを抱える方は多いのではないでしょうか。

そこで本記事では、コアウェブバイタルの概要からSEOに与える影響を解説しますので、ぜひ今後の運営に参考にしてください。

「SEOとは」については以下の記事にて詳しく解説していますので、ぜひ参考にしてください。
>>【2021年版】SEOとは?その概要と仕組み・成果を出すために押さえるべきポイント

目次 プラスマーク 表示 プラスマーク 閉じる

コアウェブバイタルの概要について

そもそも、ウェブバイタルとは「HPを利用するユーザーが、さらに使いやすいようにするための取り組み」のことです。

まず、コアウェブバイタルとは「サイトの安全性を図るための3つのUX指標」になります。UXとはユーザーの体験のことを指します。

  • LCP(Largest Contetful Paint)
  • FID(First Input Delay)
  • CLS(Cumulative Layout Shift )

詳しくは後述しますが、LCPは、ページの表示スピードに対する評価項目です。FIDは、ページ内でユーザーがクリックなどの行動をするまでの秒数を指し、CLSは、ページ内でレイアウトなどの視覚的な良好状態を判定するものとなります。

コアウェブバイタルは2021年5月からSEOに影響

新たにランキング要因に組み込まれるコアウェブバイタルですが、いつから導入されるのか気になる方も多いのではないでしょうか。Google 検索へのページエクスペリエンスの導入時期 によると、コアウェブバイタルは「2021年の5月」に導入されることが公式に発表されています。また、2021年5月に導入されることに加えて、追加の対策要素なども随時発表されてきています。

これらのことから分かるとおり、2021年5月から対策を始めるのでは遅いということです。つまり、どの時点で導入されても問題がないように、今のうちからコアウェブバイタルの全体像を理解し、それぞれの対策を進めていくことが非常に重要です。

コアウェブバイタル(Core Web Vital)の3つの指標

検索ランキングの要因となるコアウェブバイタルと4つのシグナル

先ほども少し触れたように、コアウェブバイタルには下記3つの指標があります。

  • LCP
  • FID
  • CLS

それぞれの指標を順番に見ていきましょう。

LCP(Largest Contentful Paint)

LCP(Largest Contentful Paint)とは、ページの中で最も大きなコンテンツが表示されるまでの速度のことを指します。簡単に言えばページの「読み込み時間」のことです。

LCPは、ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。
引用:Web Vitals の概要: サイトの健全性を示す重要指標

なお、LCPのデータは「秒」で表され、数字が小さくなるほどUXが良いとされています。具体的には、ページ読み込みから「2.5秒以内」の表示が高評価の対象となるため、まずはこちらの数字を目標に改善するようにしましょう。

FID(First Input Delay)

続いて、FID(First Input Delay)とはページに訪問するユーザーが、行動を起こすまでの時間を数値化したもののことを指します。

たとえば、ページ内でタブをクリックする・文字入力をするなど、ページ内でアクションを起こすまでの時間などが評価対象となります。

Web Vitals の概要: サイトの健全性を示す重要指標では下記のように解説されています。

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

こちらのFIDは、ユーザーが最初に起こすアクションから「100ミリ秒未満」であると高評価を受けられます。なお、画面のスクロールやズーム拡大などはFIDには含まれないとされており、上述したように「ページ内でタブをクリックする・文字入力をする」などが対象となります。

CLS(Cumulative Layout Shift)

CLS(Cumulative Layout Shift)は、ユーザーの意図する行動に対して、どのくらいの割合でレイアウトに異変が起きるのかをスコア化したもののことです。

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

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

CLSのよくある例としては、「ページ内にあるバナーをクリックしようとしたら、突然違う広告が出てきて、違う広告をクリックしてしまった」などが挙げられます。これらの例はユーザビリティを下げる大きな要因となってしまうため、問題が見られた場合には迅速な改善が必要です。

検索ランキングの要因となるコアウェブバイタルと4つのシグナル

検索ランキングの要因となるコアウェブバイタルと4つのシグナル

先ほど、コアウェブバイタルの3つの要素を解説しました。このコアウェブバイタルは、検索ランキングの大きな要因として5月から実装されます。加えて、検索ランキングには下記4つのシグナルも大きく影響されることがわかっています。

  • モバイルフレンドリ
  • セーフブラウジング
  • HTTPS
  • 邪魔をするインタースティシャルがない

それぞれの意味を順番に見ていきましょう。

モバイルフレンドリ

モバイルフレンドリは、Googleが2015年から検索ランキングの要素として導入し始めたものになります。下記4つの基準を満たしたWebサイトがモバイルフレンドリとして認識されることが特徴です。

  • 携帯端末では一般的でないソフトウェア(Flash など)を使用していないこと
  • ズームしなくても判読できるテキストを使用していること
  • ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
  • 目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること

つまり、モバイルフレンドリは「レスポンシブ」でWebサイトを運営していれば、ひとまず合格ラインとして認識されるでしょう。近年、ユーザーが利用するデバイスはスマートフォンが大半を占めていますので、常に「スマートフォンでも読みやすいページになっているか」を意識して運営することを心がけましょう。

セーフブラウジング

セーフブラウジングとは「マルウェア」などのなんらかのウイルスに感染したWebサイトや、不正な運営がされているWebサイトにアクセスしたときに、ブラウザに警告を表示させる仕組みのことを指します。

こちらは、ユーザー側でセーフブラウジングを設定することができますが、Webサイトの運営者として重要なのは、自社のWebサイトが「セーフブラウジングの対象にならない」ことです。

具体的にセーフブラウジングの対象となってしまうのは、フィッシングサイト及び不正なプログラムをインストールすることを強要するサイトの2種類になります。つまり、通常の方法で運営をされているWebサイトであればまったく問題ありません。

HTTPS

HTTPSとは、Webサイトの通信を暗号化して行う仕組みのことで、ユーザーの個人情報やプライバシーを守るために重要視されています。HTTPSで運営されているWebサイトであれば問題ありませんが、注意しなければいけないのは「HTTP」で運営されている場合です。

万が一、HTTPで運営されている場合、こちらはユーザーの通信が暗号化されません。加えて、Google Chromeの場合は「保護されていない通信」として表示され、ユーザーからの信頼性が落ちる他、SEO対策の観点から見ても大きなマイナスとなります。

HTTPをHTTPSにするには、利用しているレンタルサーバーの設定を変更するのが最も簡単です。設定の変更方法はレンタルサーバー会社によって異なりますが、多くの場合マニュアルが用意されていますので、HTTPの場合は今すぐにHTTPSへと変更するようにしましょう。

邪魔をするインタースティシャルがない

最後に、邪魔をするインタースティシャルがないことも重要です。インタースティシャルとは、ページ移動時に、ページ間に表示される広告のことを指します。「このページをスキップ」「コンテンツを読む」などのリンク先に設置されているのが代表的なインタースティシャル広告でしょう。

こちらのインタースティシャル広告は、GoogleがUXにおいて問題のある仕組みだと指摘しており、上述したモバイルフレンドリの観点から見ても、マイナス評価を受ける傾向が多くなっています。

また、ユーザーがページを離脱する直前に表示される「ポップアップメニュー」もインタースティシャルの対象となることがあるため、自社のWebサイトで該当する広告がある場合は改善を試みたほうが良いでしょう。

コアウェブバイタルの各項目を確認する方法

ここまで、コアウェブバイタルの指標やSEOへの影響などを解説してきました。ここからは、コアウェブバイタルの各項目を確認する4つの方法をご説明します。

  • サーチコンソール
  • ページスピードインサイト
  • Chrome拡張機能と
  • DeepCrawl

それぞれのツールを使って確認する方法を順番に見ていきましょう。

「サーチコンソール」での確認方法

まずは、Google Search Console(サーチコンソール)で確認する方法を解説します。サーチコンソール左側のサイドバーに「ウェブに関する主な指標」という項目があります。こちらをクリックすると、モバイル・PCそれぞれで、どのような問題が発生しているかを確認できます。

たとえば、モバイルページで「改善が必要」という項目をクリックすると、コアウェブバイタルの「LCP/FID/CLS」のそれぞれでどのような問題が発生しているのか・問題が発生した日付を調べられます。

具体的には「LCP の問題: 2.5秒 超(モバイル)」などと表示されるため、これらの内容を基に該当ページのコアウェブバイタルにおける問題を解決していくことが可能です。

「ページスピードインサイト」での確認方法

Page Speed Insights(ページスピードインサイト) とは、Webサイトや特定ページの表示速度を測定できるツールのことで、Googleが提供しています。ページスピードインサイトでは、モバイル・PCそれぞれの表示速度を「100点満点」でスコア化してくれることが特徴で、表示速度を100点に向上させるためのポイントも表示してくれます。

たとえば、「最初のサーバー応答時間」「使用していないJavaScript」「レンダリングを妨げるリソースの除外」などを具体的に教えてくれるため、表示速度を向上させるには切っても切り離せない重要なツールだと言えるでしょう。

Chrome拡張機能

次に、Chromeの拡張機能でも表示速度を確認できます。様々なChromeの拡張機能がありますが、代表的なものは「Lighthouse」です。上述したページスピードインサイトはこちらのLighthouseの機能の一部であり、たとえば下記のような項目を調べられます。

  • Performance:ユーザーの操作やページの読み込みなどのWebサイト内の表示速度
  • ProgressiveWebApp:PWA化するうえで必要なチェックリストを基にした数値
  • Accessibility:検索エンジンのロボット(クローラー)に対して最適化されているか
  • Best Practices:スクロールする際のパフォーマンスを最大化する方法
  • SEO:SEO対策の観点からチェックできる

このように、Chromeの拡張機能であるLighthouseでは、表示速度に加えてSEO対策の観点からもWebサイトをチェックできることが特徴です。

DeepCrawl

「DeepCrawl」とは、世界水準のテクニカルSEOツールのことで、トラフィックを自動解析することができます。Webサイト全体の表示速度を包括的な観点から調べることができ、同時にその改善提案も受けられる仕組みとなっています。

加えて、ページ毎に表示速度を計測する必要がないため、最も効率よくコアウェブバイタルの指標や表示速度を計測できるツールだと言えます。

LCP(Largest Contentful Paint )の改善方法

ここまで、コアウェブバイタルの概要や表示速度の調べ方を解説してきました。ここからは、LCP・FID・CLSそれぞれの改善方法について解説をします。

まずは、LCP(Largest Contentful Paint )が低下する原因とその解決方法を見ていきましょう。

LCPが低下する原因

LCPが低下する原因の前提として、表示速度が決まるまでの仕組みを理解することが大切です。表示速度が決まるまでの仕組みは、大きく分けて「データ生成・データ転送・コンテンツ描画」の3つが必要であり、それぞれをサーバーとブラウザが応答し合っています。

これらを踏まえたうえで、LCPが低下する原因は下記のとおりです。

  • リソースの読み込み時間が遅い
  • サーバーからの応答が遅い
  • 不要な画像・容量の重い画像が配置されている
  • JavaScriptやCSSがレンダリングブロックされている
  • ユーザー側のレンダリングが遅延している

これらの原因が考えられます。では、これらを改善する方法をそれぞれ見ていきましょう。

改善方法その①:画像の最適化と圧縮

まずは、画像の最適化と圧縮をする方法が考えられます。最適化されていない画像や圧縮されていない画像を使用してしまうと、その分だけリソースの読み込み時間が遅くなり、LCPを低下させる要因となってしまいます。

画像の最適化に関しては、「JPEG2000」「JPEG XR」「WebP」などの、次世代画像フォーマットを使用しましょう。こちらはGoogleが推奨している画像フォーマットであり、Page Speed Insightsでも表示速度を改善する方法の1つとして提案されることが多いです。

また、画像の圧縮に関しては、「tiny png」がおすすめです。こちらは次世代画像フォーマットにも対応している画像の圧縮ツールであり、アップロード1つで画像を圧縮することができます。

Webサイトの画像は、使用するほど表示速度を圧迫していきますので、コンテンツを制作する段階から圧縮するよう心がけましょう。

改善方法その②:不要な画像を減らす

LCPを改善する方法として、不要な画像を減らすことも大切です。コンテンツを制作する段階で画像を挿入していたとしても、それがユーザーにとって不要であれば、画像を挿入する意味はありません。

画像は、いくら圧縮をしても容量が0になるわけではありませんので、挿入する分だけ表示速度に影響を与えることは確かです。

ページごとの直帰率や離脱率を確認し、画像を外しても問題ないページがあるようであれば、そのページの画像は削除するようにしましょう。

改善方法その③:サーバーの応答時間を速める

次に、サーバーの応答時間を速めることも重要です。最も容易に速める方法としては、現時点よりも応答速度が速いレンタルサーバーに乗り換えることです。

応答時間の速いレンタルサーバーは複数社ありますが、特段問題がないようであれば「エックスサーバー」を利用すると良いでしょう。エックスサーバーは高速回線が魅力のサーバーで、上述した「HTTPS化」への変更も無料で対応しています。

サーバーを乗り換えるだけで表示速度が速くなった事例は数多くありますので、今すぐにでも取り組めるLCPの改善方法だと言えるでしょう。

改善方法その④:不要なJavaScriptやCSSを削除する

LCPを改善する最後の方法として、不要なJavaScriptやCSSを削除する方法も考えられます。実は、ブラウザはページの情報を読み込む際、HTML以外の情報を一括で取得することはできない仕組みとなっています。

そのため、HTML以外の情報が多くなるほど、ページの読み込み速度が遅くなるということです。それらを回避するためには、上述した不要なJavaScriptやCSSを削除することが重要になります。具体的には、下記3つの方法を試してみましょう。

  • 初期の読み込みで不要なJavaScriptは後から読み込む
  • コード内のスペースやコメントを削除する
  • DOMサイズを小さくする

なお、これらを取り組むためには、当然ながらWebサイト内のコードを触る必要がありますので、深い知見がない場合はエンジニアなどに依頼すると良いでしょう。

また、アドセンス広告やワードプレスプラグインに関しても、表示速度を低下させる大きな要因となります。したがって、必要箇所のみに広告を挿入すること・不要なワードプレスプラグインを削除することも同時に対応するようにしましょう。

FID(First Input Delay )の改善方法

FID(First Input Delay )の改善方法

ここからは、FID(First Input Delay )の改善方法についてご説明します。まずは、FIDが低下する要因について見ていきましょう。

FIDが低下する原因

FIDが低下する最大の原因は「大量のJavaScript」です。そもそも、JavaScriptとは動的なWebサイトを作るために必要なプログラミング言語のことで、「拡大画像をクリックで上乗せ」「ボタンをクリックするとボタンがへこむ」などの動きを作ることができます。

非常に便利なJavaScriptですが、このJavaScriptを処理している間は、ブラウザがユーザーのアクションに応答できなくなるといったデメリットが存在します。つまり、JavaScriptが大量になるほど、ユーザーの「ページ内でタブをクリックする・文字入力をする」などのアクションに応答できなくなるため、結果的にFIDが低下するということです。

では、これらFIDを改善する方法を順番にご説明します。

改善方法その①:JavaScriptの量を減らす

まずは、JavaScriptの量を減らすことが重要です。その前提として、JavaScriptには複数のバージョンがあり、ブラウザによっては対応していない場合があることを理解しておく必要があります。

これらを解決するためには「ポリフィル」と呼ばれる、互換性のないブラウザでJavaScriptを使えるようにするコードを使うことが必要です。加えて、未使用のJavaScriptを延期して読み込ませる仕組みにすることで、ブラウザがJavaScriptを読むこむことに費やす時間を短縮することができます。

改善方法その②:長いタスクは分割する

次に、長いJavaScriptのタスクは分割することも大切です。スレッドには複数の種類があり、その主となる「メインスレッド」は、ブラウザがユーザーの行動や描画などの情報を処理する役割があります。

つまり、このユーザーの行動などを処理するメインスレッドのタスクを分割することで、JavaScriptの読み込み時間をその分だけ短縮することができ、FIDを改善できるということです。

具体的には、メインスレッドを「50ミリ秒以上」ブロックするコードを優先的に分割するようにしましょう

改善方法その③:Webワーカーを使用する

FIDを改善する最後の方法として、Webワーカーを使用する方法もあります。Webワーカーとは、通常メインスレッドで行われる情報処理を、バックグラウンドで処理できるようにするための手段のことです。

UI(ユーザーインターフェース)以外の操作をバックグラウンド処理に変更することで、メインスレッドを読み込む時間を短縮することができ、FIDを大きく改善することが可能になります。

CLS(Cumulative Layout Shift )の改善方法

ここまで、LCPとFIDを改善する方法について解説してきました。最後に、CLS(Cumulative Layout Shift )を改善する方法について見ていきましょう。

CLSが低下する原因

まず、CLSが低下する原因は下記の3つが考えられます。

  • 動的コンテンツが埋め込まれている
  • FOUTやFOITなどのWebフォントの読み込み
  • サイズ指定がない画像・広告の埋め込みをしている

次に、これらを改善する方法を見ていきましょう。

改善方法その①:画像サイズを指定する

まずは、画像サイズを指定することが重要です。前提として、ブラウザは画像よりもテキストのほうが軽いため、テキストから読み込みを始めます。また、同時に画像の読み込みも開始します。

そのため、この段階で画像サイズが指定されていないと、ブラウザがどの程度の範囲を画像として表示すれば良いのかの判断がつかなくなり、ユーザーが表示されたテキストを読んでいる間に画像がずれるため、結果的にレイアウトが崩れてしまいます。

これらを防ぐために、画像サイズを予め指定することが重要です。画像サイズさえ指定していれば、ブラウザが画像を表示する範囲を理解できますので、テキストを読み込んでいる間にレイアウトが崩れることがなくなります

画像サイズの指定方法に関しては、width要素とheight要素を設定すれば問題ありません。

改善方法その②:広告表示領域を予約する

次に、画像のサイズ指定と同じ要領で、広告表示領域を予約することも大切です。広告に関しても画像と同じく、サイズが指定されていないと、ブラウザがどの程度の範囲を広告として表示して良いのかを判断できなくなります。

しかし、広告を「最大サイズ」で予約してしまうと無駄な余白ができてしまう可能性がありますので、都度コンテンツに適したサイズで予約するようにしましょう。

改善方法その③:Webフォントの使用を最小限に抑える

Webフォントとは、すでにインターネット上に公開されているフォントや、サーバ上に置かれたものから呼び出すフォントのことです。このWebフォントには、ユーザーの利用環境に左右されずに、指定されたフォントが呼び出されるメリットがあります。

しかし、「FOUT」や「FOIT」が生じる可能性があるといったデメリットもあります。FOUTとは、Webフォントがブラウザに読み込まれるまで代替フォントが表示される仕組みのことを指します。フォントが切り替わる際にレイアウトが崩れるため、CLSを低下させる大きな要因となってしまいます。

一方のFOITとは、Webフォントが読み込まれるまでテキストが表示されない現象のことで、こちらもCLSを低下させます。これらの現象を防ぐためには、CSSプロパティやWebフォントのレンダリングの最適化を行うことが重要です。

また、Webフォントの使用を最小限に抑えることも同時に検討するようにしましょう。

4つのシグナルの改善方法

ここまで、コアウェブバイタルにおける3つの要素の改善方法を解説してきました。最後に、上述した4つのシグナルの改善方法についてもご説明します。

  • モバイルフレンドリ:モバイルページを快適に閲覧できるようにする
  • セーフブラウジング:ユーザーに悪意あるコンテンツを提供しない
  • HTTPS:「常時SSL化」に対応させる
  • 邪魔をするインタースティシャルがない:該当する広告やポップアップメニューを削除する

4つのシグナルの改善方法は下記のとおりです。まず、ページがモバイルフレンドリになっているかどうかは、「モバイルフレンドリーテスト」で確認できます。

次に、セーフブラウジングに関しては、ユーザーに悪意あるコンテンツを提供しないことが重要です。たとえば、ユーザーの目に見えないリンクを置かない・スパムコメントをブロックするなど、最低限の対策はしておくようにしましょう。

HTTPSに関しては、レンタルサーバーで「常時SSL化」に対応させるのが最も容易です。上述したエックスサーバーであれば無料で対応させることができます。また、ワードプレスのプラグインでもHTTPSに対応させることもできますので、状況に応じて使い分けることをおすすめします。

最後に、邪魔をするインタースティシャルに該当する広告などが存在する場合は、迅速に改善することが重要です。こちらは、GoogleもUXにおいてマイナス評価を下すことを明言していますので、SEO対策の観点から見ても大きな悪影響となる可能性が考えられます。

まとめ

コアウェブバイタル(core web vitals)の概要

コアウェブバイタル(core web vitals)の概要や、改善するべき項目について解説をしてきました。コアウェブバイタルは、直接的なランキング要因にはならないとされているものの、コンテンツの質が検索順位に影響することを踏まえると、1つずつ改善を加えていくのが望ましいでしょう。

コアウェブバイタルのそれぞれの項目を改善することで、ユーザーにとってさらに使いやすいWebサイトとなり、結果検索順位が上昇することにも期待ができます。

しかし、うまくコアウェブバイタルを分析し、改善を加えるのが難しいと考えるご担当者様もいらっしゃるかと思います。弊社では、Webサイトの表示スピードの改善点を診断する「WEBサイト表示診断サービス」をご用意しています。まずは、下記のページから無料で資料をダウンロードしてみてはいかがでしょうか。

この記事の執筆者

田中雄太

twitterアイコン Facebookアイコン

アダムテクノロジーズ執行役員 SEOコンサルタント

株式会社アダムテクノロジーズ 執行役員。
ユーザーニーズと最も近いSEO対策で、あらゆるビジネスを加速させ、より良い社会の実現を目指す。
入社から5年間で100社以上のSEO対策に従事し、様々なジャンル・キーワードでの上位表示を実現。顧客目線での目標達成にコミットしたSEOコンサルティングが強み。

DOWNLOAD

資料ダウンロード

資料のイメージ画像

当社でご提供しているサービスの資料ダウンロードはこちらから。
SEOに課題を感じている方は、ぜひご覧になってください。

SEO診断の資料はこちら WEBサイト高速化の資料はこちら

CONTACT

お問い合わせ

大規模サイトにおけるSEO対策上の問題点を解消し、
集客の最大化を実現する相談役として
ぜひお気軽にご連絡ください。
経験豊富な技術者がSEO診断を行います。