コアウェブバイタル（Core Web Vitals）とは？【重要・最新SEO情報を紹介】

 

SEO担当として、「Googleがどんな点を確認しながら上位掲載する記事を決めているのか」を理解するのは重要です。結局のところユーザーファーストで質の高いコンテンツをアップロードし続けるのに勝る対策方法はないのですが、それ以外で競合に差を付ける際にランキングシグナルの指標を把握して対応ができると役立ちます。

 

Googleはユーザーへコンテンツを提供する際、「いかにスムーズなUXを提供できているか」も重要視します。そして2021年度の夏には「コアウェブバイタル（Core Web Vitals）」という指標がGoogleのランキングシグナルへ組み込まれることが明らかになっているのがポイントです。コアウェブバイタルを理解できれば、スムーズにユーザーのUXを向上させてよりよいコンテンツを用意できるようになるでしょう。

 

今回はコアウェブバイタルについて理解を深めたい方向けに、その概要やランキングへの影響、そして確認方法や改善方法などを解説していきます。

 

 

2021年5月正式導入！コアウェブバイタル（Core Web Vitals）とは

 

コアウェブバイタルはそのまま説明すると「ウェブバイタルの中でもコア、中核になる部分」です。

 

Googleは「ウェブバイタル」として、Webサイトの健康度を計測するためのさまざまな項目を公開しています。しかし確認する項目が多く、多くのSEO担当者が理解に困る課題も発生していました。そこでGoogleはウェブバイタルの中でも特に重要となる指標をコアウェブバイタルとして公表、Webサイトの体験度向上に役立ててもらおうとしています。

 

コアウェブバイタルの内容は更新されていく可能性がありますが、基本的に「ユーザーが素早くWebサイトを表示して内容を確認し、違和感なくボタンクリック・タップといったアクションをスムーズに取れるようになるための指標」というスタンツは変わらないでしょう。

 

コアウェブバイタルが実際にランキングシグナルへ組み込まれるのは、「2021年5月」

となっています。最初はスマートフォン（モバイルデバイス）に対してシグナルが使われる予定です。スマートフォンはパソコンより動作環境がシビアであり、Webサイトを通したユーザー体験度の向上がより求められるデバイスです。

 

英文ですがコアウェブバイタルの対象などについてはこちらに記載があります。

 

ただし将来的には「モバイルファーストインデックス」がパソコンにも適用されるようになった状況と同じように、パソコンでもコアウェブバイタルが指標として組み込まれていく可能性があります。現在はスマホファーストでWebサイトを構築していくのが主流ですが、どんなデバイスでもコアウェブバイタルを意識して構築作業を行うのが将来のためにもなるでしょう。

 

ちなみに

 

• ・セーフブラウジング（Webサイトに危険な読み込みファイルなどがないか）
• ・HTTPS（暗号化により安全にWebサイトで通信ができるようになっているか）

といったシグナルはパソコンでもスマートフォンでも使われています。どれも対策するのが当然の内容ですが、対応できていないと感じている場合は早急に対策を行ってみてください。

 

 

コンテンツの質も忘れずに！コアウェブバイタルはSEOのランキングにどう影響する？

 

 

正直コアウェブバイタルの内容は、コンテンツの質の次に求められるスムーズなWebサイト体験に今の時点でも必要です。つまりシグナルへの導入前から対策を行っている業者も多く、早めに対応しておかないとユーザー体験度が下がりせっかくのコンテンツパフォーマンスが落ちてしまう危険があります。

 

そして直接ランキングシグナルへ組み込まれるようになると、さらにSEOに関する影響が増すと思われます。

 

具体的には主にスマートフォンの検索結果において対応していないサイトより、対応しているサイトのほうが有利な評価を受けられるようになるでしょう。ただしコンテンツの質やユーザーの検索クエリ関連性などが先に優先して判断されるのは当たり前のことです。質が同じくらいだなとGoogleに判断されたページがコアウェブバイタルによりさらに判断され、ユーザー体験度の高いページのほうが優先して掲載結果に表示されるようになるケースが考えられます。

 

SEO担当者としては依然として「コンテンツSEO」の観点からキーワード洗い出し、独自性のある内容を考えた上で質の高いコンテンツを継続してアップロードできる体制作りが重要です。そしてWebサイト全体のコアウェブバイタルをツールを使いながら確認して、質の高いページがユーザーの環境でスムーズに確認できるようになるよう検証を行っていく必要があります。

 

 

Core Web Vitals（コアウェブバイタル）を構成する3つの指標

 

コアウェブバイタルはウェブバイタルの中でも特に重要な指標3つで構成されているのが特徴です。

 

 

LCP（Largest Contentful Paint）

日本語に訳すると「最も大きいコンテンツの描写」といったニュアンスになります。

 

Webページには

 

• ・ページ内容を説明するための動画
• ・ページ内容を端的に表しているメイン画像
• ・ページの印象を決める背景画像

など、表示に時間の掛かるコンテンツが含まれています。そしてこの中でも最も表示に時間の掛かるコンテンツの読み込み具合を計測するための指標がLCPです。

メインとなるコンテンツ内容はユーザーのページに対する印象を大きく左右します。たとえばメインコンテンツの内容が素早く読み込まれれば「すぐ内容が分かって便利だな」と思われるでしょう。一方読み込みが遅くもたついていると「一刻も早く確認したいのになかなか出てこない」といらだちを引き起こしてしまう危険があります。

 

このためLCPでは秒数を基準に描写に時間が掛かるコンテンツを測定し、秒数が短いほど読み込みの素早い優秀なWebページとして評価を行うようになっているのがポイントです。

 

具体的には

 

• ・GOOD（良好）：2.5秒以内
  ・NEED IMPROVEMENT（要改善）：2.5秒を超え、4秒以内に収まっている
• ・POOR（悪い）：4秒を超えている

 

という3つのステータスでバイタルを判断できるようになっています。「NEED IMPROVEMENT」以下の場合は改善が必要です。

 

 

FID（First Input Delay）

日本語に訳すると「最初の入力遅延」といったニュアンスになります。

 

昔のWebページはただ情報を閲覧するだけの存在でしたが、現在では「Webアプリ」としてさまざまな機能をユーザーへ提供しているコンテンツが多いのがポイントです。

 

• ・フォームへ情報を入力して問い合わせる
• ・CTAボタンを押して商品購入を行う

 

といった操作はページ内で日常的に発生します。

 

Webページでユーザーがアクションを取れるようになっている場合、「インタラクティブ性（双方向にWebページを通じてWeb管理者とユーザーがコミュニケーションを取れる）」の高いWebページを構築することが重要です。そしてFIDではユーザー体験に重要や影響を及ぼす、インタラクティブになるまでにWebページが掛かった時間を計測してくれるのがポイントになっています。

 

具体的には

 

• ・GOOD（良好）：0.1秒以内
• ・NEED IMPROVEMENT（要改善）：0.1秒を超え、0.3秒以内に収まっている
• ・POOR（悪い）：0.3秒を超えている

 

という3つのステータスでバイタルを判断できるようになっています。「NEED IMPROVEMENT」以下の場合は改善が必要です。

 

LCPと違い計測基準が0.1秒レベルになっています。つまり0.1秒反応に時間が掛かるだけで、NEED IMPROVEMENT以下の評価になってしまう危険がある点に注意が必要です。

少しでも素早くユーザーのアクションに反応できるWebサイトの構築が求められます。

 

 

CLS（Cumulative Layout Shift）

日本語に訳すると「累計のレイアウト移動」です。累計という言葉に耳覚えがない場合は少し意味が理解しにくいかもしれませんが、「累計＝合計」だと捉えると少し意味が見えてくるのではないでしょうか。

Webサイトでは読み込みが完了したと思ったら、表示がずれてしまったという事象がよく起こります。

 

• ・画像の読み込みが遅くて、画像読み込み前後でテキストが下に移動する
• ・広告が遅れて表示されてしまい、メニューがあらぬ方向にずれてしまう
• ・テキストリンクやボタンリンクを押そうとしたら表示がずれ誤クリックが起きた

 

といった事例は体験したことのある方が多いでしょう。

 

読み込み時の表示のずれを改善しないと、「読み込むたびに余計な表示ずれが発生してスムーズに内容が見られない嫌なページ」と捉えられる可能性が高まります。

CLSではGoogle独自のアルゴリズムで、Webページ内の表示のずれを数値化してくれます。具体的には

 

• ・GOOD（良好）：0.1以内
• ・NEED IMPROVEMENT（要改善）：0.1を超え、0.25以内に収まっている
• ・POOR（悪い）：0.25秒を超えている

 

という3つのステータスで状況が確認できるようになっているのが特徴です。

 

CLSを特に注意しないといけないWebページの例に、「自社商品やサービスの宣伝ではなく、広告によるアフィリエイト収入で稼ぎを得ているニュースメディア」があります。ニュース関連のメディアでは指定の場所に複数広告を貼ってユーザーの流入を促そうとするのが特徴です。しかし広告の数や表示方法に工夫がないと、テキスト表示などが頻繁にずれてユーザビリティが大きく落ちてしまいます。

 

近年では画像や動画をふんだんに使った広告表示も増加しているので、広告がWebページのずれを引き起こしていないか検証を行い確認する必要があるでしょう。

 

またギャラリーサイトのような、画像がメインコンテンツになっているWebページも注意が必要です。画像の領域読み込みがテキストの後に行われる設定になっているとテキストが何度もずれていらだちを引き起こす原因になるでしょう。

 

CLSの数値は単位がなくGoogle独自の算出方法で表示されています。このためこれからご紹介するツールで内容を確認しながら、改善の都度評価が改善されているか注意深く確認してみてください。

 

 

Google純正サービスを使おう！LCP・FID・CLS の対応状況の確認方法

 

コアウェブバイタルを構成するLCP・FID・CLSの対応状況を確認する際には、次のようなツールが使えます。

 

 

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

ページの読み込み速度改善を行うときに必須と言ってもよいツールです。Webブラウザーから気軽に利用できるGoogle純正の計測ツールになっています。

「ウェブページの入力」と記載のあるURL欄に対象のページURLを入力して、「分析」ボタンをクリックするだけで測定が行われます。計測が終わると0~100点の間でWebページが評価されて表示されるのがポイントです。

 

• ・0–49：悪い
• ・50–89：要改善
• ・90–100：良好

 

の3ステータスで評価が行われます。パソコン版、スマホ版ともに90点以上を目指せるのが理想です。

 

総合の点数表示が上に大きく表示されますが、その下にはコアウェブバイタル+「First Contentful Paint（FCP）」という指標の計測結果が表示されます。FCPは最初のHTML要素が表示されるまでに掛かった時間を表してあり、LCPと違ってデータ容量の大きさに関係なくコンテンツの測定を行います。LCPもFCPも速いのがベストでしょう。

 

他の計測項目のデータや改善ポイントなどはさらに下を見ると確認できます。「改善できる項目」や「診断」は特に改善すべき項目が赤字で表示されるなど参考にできる情報が多いのがポイントです。SEO初心者はポイントを確認して効率よく改善へつなげていきましょう。

 

 

Google Serch Console（グーグルサーチコンソール）

PageSpeed Insightsとともに確認しておきたいのが、「Google Serch Console（グーグルサーチコンソール）」です。Google Serch Consoleは「Googleアナリティクス」で検索エンジン上からの流入具合を確認するのが難しくなった今、Google検索エンジンなどからどういった検索クエリでユーザーが流入してきたのか計測するために必要なツールです（HTTPS化が広まったことでデータが暗号化され、Googleアナリティクス上で検索クエリを把握しにくくなったため）。

 

Google Serch Consoleでは蓄積したデータを基に、コアウェブバイタルを表示する機能が搭載されています。管理画面左メニューの「ウェブに関する主な指標」をクリックすると内容を表示可能です。ただし立ち上げたばかりでデータが不足している場合は確認ができないので注意してください。

 

「ウェブに関する主な指標」メニューでは上部にモバイル、下部にパソコンでの計測結果が表示されるのがポイントです。グラフには

 

• ・不良URL：コアウェブバイタルの結果が思わしくない
• ・改善が必要なURL：改善することで良好に変化する可能性あり
• ・良好URL：特に問題なし

 

の3つでステータスが線で表示されるのが特徴になります。良好URLの件数を増加させてそれ以外のURLの件数を減少させられるように調整を行っていきましょう。

 

問題のあるURLは一覧表示して確認することが可能です。「Webサイトの中にあるページの内、どのページがユーザビリティを低下させているのか一覧でまとめて確認したい」といったニーズへ対応しているのがGoogle Serch Consoleのメリットです。

 

ただし

 

• ・Google Serch Consoleで計測できるのは登録している自社サイトのみ
• ・Google Serch Consoleでは詳細なエラー内容を確認できない

 

の2点には注意しておきましょう。

 

Google Serch Consoleで計測できるのは登録済みの自社に関するWebサイトのみです。競合のコアウェブバイタル情報を参考に改善を行いたいときは、他ツールの利用が必要です。

 

またGoogle Serch Consoleでは「それぞれのページにどのようなエラーが発生しているのか具体的に把握できない」のも注意してください。これも他ツールで具体的な原因を探っていく必要があります。

 

Google Serch Consoleでページ内容をまとめて確認してからツールで1ページ1ページ原因を特定していくのが賢明です。

 

 

Lighthouse（ライトハウス）

「Lighthouse（ライトハウス）」はGoogle純正のChrome拡張機能です。Chrome拡張機能の検索ページに入力を行うとすぐ表示されるのでインストールしておきましょう。

 

インストールした後計測したいWebページを開いてメニューから起動させると、自動でレポートを生成してその場で表示してくれます。自社ページだけでなく他社の競合ページの計測も可能です。

 

計測が終わると

 

• ・Performance：コアウェブバイタルを含めたページの読込体験は最適か
• ・Accessibility：ユーザーやクローラーなどに最適な構築が行われているか
• ・Best Practices：セキュリティなどに問題がある構造になっていないか
• ・SEO：SEO対策は十分に行われているか
• ・Progressive Web App：PWAに対応しているか

 

 

の5つの指標で総合的に結果を表示してくれるのがポイントです。

 

・どんな点に問題があるのか

・具体的にどこを変更すれば改善するのか

・どんな点はクリアしているのか

 

などがいっしょに表示されるので改善の参考になります。また指定したページを開いて拡張機能をクリックするだけでよい手軽な設計になっているのもポイントです。

 

ただし説明はすべて英語で表示されます。「Google翻訳」などを使えば大体の意味は分かるでしょうが、項目の内容を学習しておいたほうが理解の助けになります。

 

 

Web Vitals

Chrome拡張機能ですが、Google純正ではなくサードパーティー製の機能になっています。

 

Lighthouseと違うメリットはその手軽さにあります。Lighthouseも手軽にコアウェブバイタルを測定できますが、Web Vitalsの場合対象のページを開いて拡張機能をクリックするだけでコアウェブバイタル計測結果がポップアップされるのがポイントです。読み込みの時間は掛からず、クリックした時点ですぐに結果が表示されるのもメリットになります（Webサイトが読み込まれた時点で評価を事前に行っているのでしょう）。

 

問題のある点は赤字などで強調表示されるので、サッと課題をつかんで詳細を調査するのに使えます。ちなみにFIDについてはその場で入力を行わないと計測されません。

 

Web Vitalsは簡単にコアウェブバイタルの状況を把握するのに便利ですが、それ以外の情報が表示できないので本格的な分析には使えません。場合によってはLighthouseで事足りると思う方もいらっしゃるでしょう。

 

分析作業の内容に応じて導入するか決めてみてください。

 

 

バイタル別に理解しよう！Core Web Vitals のスコア低下要因と改善方法

 

ここからはコアウェブバイタルが低下してしまう代表的な要因と改善方法をご紹介していきます。ちなみに実際のエラー内容は各ツールから判断してみてください。

 

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

LCPのスコア低下には、次のような要因が絡んでいる可能性が高いです。

 

サーバーの応答時間が長い

LCPを低下させる要因として、サーバーの影響力は大きいです。サーバーのスペックが不足しているなどの状況が発生していると、LCPに限らずページ読み込みに関する指標がすべて悪化してしまう危険があります。

 

コンテンツのデータ量増加に伴い、サーバーに必要なスペックも高くなっています。またたとえば「立ち上げ時は価格を抑えるために安いレンタルサーバープランを契約していたが、Webサイトの規模が大きくなった」という場合はスペックがWebサイトに対応していない可能性が高いです。

 

• ・サーバープランを同じ会社で変更するか新しい会社に乗り換える
• ・CDNを利用してコンテンツのキャッシュを素早く読み込めるようにする

 

といった工夫で改善が見込めます。サーバープランを変更したり会社を乗り換える際は

 

• ・SSDを全面的に使用しているか
• ・サイト高速化に関する技術が搭載されているか

 

などを確認してみましょう。

 

レンダリングをプログラムがブロックしている

Webサイトの描写を行いWebブラウザー上に表示する行為を「レンダリング」と言いますが、サイト構造が最適化されていないと「レンダリングブロック」という現象が発生する可能性があります。レンダリングブロックとは「JavaScript」といったプログラムが、コンテンツの描写を邪魔する現象を指します。

 

レンダリングブロックを防いで素早くページを読み込めるようにするには、

 

• ・ブロックが発生しているファイルのMinify化を行う
• ・余計なファイルを読み込まないように仕様を変更する

 

といった対策が有効です。

 

「Minify化」とは「JavaScriptやCSSファイルの改行や空白を減らしたりしてファイルのデータ量を削減すること」です。

 

Webブラウザー上の開発者ツールでソースコードを確認したり、テキストエディターで構築済みWebサイトのファイルを確認したりすると、改行や空白なしでびっちりと内容が書き込まれているケースが多いです。これは最初からびっちりとコードを書き込んでからアップロードしたわけではなく、一度ファイルを編集して完成させた後にツールなどで改行や空白を削除して加工しているからです。

 

コンテンツのデータが単純に大き過ぎる

最もページ内で描写に時間の掛かるデータ量が、単純に許容範囲を超えているケースもあります。

 

たとえば「JPEG」と「PNG」、2つの画像形式では、JPEGのほうが速くデータが読み込まれます。JPEGは人間の目に見えにくい画素を間引いた上でデータを保存するからです。圧縮は行うものの画素を間引かずそのまま保持するPNGより圧倒的にデータが削減されます。

 

このため「JPEGでも内容が変わらない」という場合は、JPEGを使ってWebサイトを構築したほうがLCP上も有利に働くでしょう。

 

また

 

• ・WordPressのプラグインを使って自動で画像を圧縮する
• ・動画の無駄なデータを省いて容量を軽くする

 

といった方法も有効です。CDNも活用するとさらに高速で読み込まれやすくなります。

 

 

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

FIDが低下する要因としては、次のようなものが考えられます。

 

サードパーティーのコードが多過ぎる

自社が用意していないサードパーティーのコードはFID低下を引き起こします。

 

サードパーティーのコードは広告ネットワークサービスを利用していると多くなります。広告表示用のコードを貼り過ぎるとユーザーからの印象も悪くなりますし、FIDを始めとしたユーザビリティも悪くなる傾向がある点に注意です。最も効果の出る広告の掲載位置や数を分析で確認して、ユーザーのインタラクション性を阻害しないように読み込みを工夫する必要があります。

 

JavaScript読み込みが最適化されていない

JavaScriptは動的なコードなので、読み込みに時間が掛かりユーザーのアクションを遅延させてしまう原因になります。JavaScriptを外部からそのままコピペしたり初心者が見よう見まねで打っていると、最適化がされていない可能性があります。

 

• ・すぐに使わないJavaScriptの読み込みを後回しにする
• ・バックグラウンドでJavaScriptを実行するためWebワーカーを導入する
• ・長いJavaScriptタスクを分割する

 

といった手法でFIDが改善される可能性が高いです。

 

リクエストの数が多過ぎる

データがあまりにも複数に分割されていてリクエストの数が増えると、プログラム読み込みに時間が掛かりインタラクション性を低下させる原因になります。

 

データ量の小さいファイルについては、個別に読み込むよりも「表示の際CSSで位置をずらして別の画像に見せる」といった手法を取ったほうがページ全体が素早く読み込まれるようになります。リクエストの数を減らすことがFIDによい影響を与えるので覚えておきましょう。

 

ただしリクエストの数を減らすことを意識し過ぎて大きいファイルを作ってしまうと本末転倒なので気を付けてみてください。

 

 

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

CLSが低い際は次のポイントをチェックしてみましょう。

 

コンテンツに領域指定がない

初心者は画像や動画などに領域指定をしない（widthやheightといった属性指定をしない）ケースが多いです。

 

領域指定を行っている場合は画像や動画が読み込まれる前に、表示する領域をブラウザーが認識して先に描写してくれます。つまり体感的にはテキストの後に画像や動画が読み込まれてもずれが起きないので、よい体験ができるのがポイントです。しかし領域指定がないと画像が動画が読み込まれたときに領域が確保されるため、テキストなど他要素がずれてしまうのが困りものです。

 

単純に領域指定をしてあげるだけで効果が出ます。

 

アニメーションがレイアウトに悪影響を与えている

アニメーションをふんだんに使ったWebサイトはユーザーの興味をそそってくれますが、同時にCLSの数値を大きくしてしまう要因になります。そもそもアニメーションが原因で読みにくい文章は、コンテンツとして総合的に見ると魅力的ではありません。

 

ユーザビリティを低下させてしまうアニメーションは思い切って削除して、必要な分だけにとどめるのが一番です。

 

Webフォントが邪魔している

「Webフォント」は読みやすく独自のフォントをテキストに適用したいときに使えるデザインフォントです。Webサイトデザインに合わせたフォントの適用で統一感が出るのでブランド力醸成にも使えます。

 

ただしWebフォントの適用が原因で文字幅が急に変わるといった現象が発生し、CLSが低下してしまう可能性があります。「Webフォントの読み込み時にrel=”preload”を指定する」といった方法で、読み込みを最適化してみてください。

 

ちなみにWebフォントを複数適用するとサイト読み込み遅延の原因になります。使いたいWebフォントの候補は絞っておきましょう。

 

 

プラグインを有効活用！WordPressサイトでCLSが0.25を超えている場合の対応策

 

コアウェブバイタルの中でCLSはGoogle独自の指標ということもあり、改善が難しいと感じるかもしれません。特にWordPressサイトではレイアウトのずれが起きるケースが多いので、事前に対策法を知っておくと安心して対策が可能です。

 

CLSを楽に改善したい場合、各プラグインを使うのが効果的になります。たとえば「Autoptimize」というプラグインはCSSやJavaScriptの無駄な読み込みを削減してくれるプラグインです。チェックだけの簡単な設定でCLS、さらにはFIDなども改善してくれる優れものになっています。インストールしても読み込み速度に大きな影響は出ないので、入れておいて損はないでしょう。

 

またWordPress内で表示できる画像のサイズを追加して、画像データ量を最適化する方法も有効です。WordPress内のPHPファイルに「add_image_size」を書き込むとサイズを追加できますが、初心者にはハードルが高いです。

 

そこで「Simple Image Sizes」というプラグインを使います。インストールすると設定画面から、入力ボックスにサイズを指定して自由に画像をアップロードできるようになります。

 

 

まとめ

 

今回はコアウェブバイタルの概要やランキングへの影響、そして確認方法や改善方法などを解説してきました。

 

コアウェブバイタルは2021年5月にランキングシグナルへ搭載されます。将来的にはモバイルだけでなくパソコンにも適用される可能性がありますし、シグナルへ搭載される以前から指標として重要視している企業も多いのがポイントです。適用できていない場合は今すぐ問題をツールで洗い出し、改善策を立案して適用してみましょう。

 

ぜひコアウェブバイタルだけでなくコンテンツの質の確保も重視しながら、会社として適切なSEO対策を行ってみてください。