無料個別相談 
問い合わせ 
「コアウェブバイタルって何？」
「コアウェブバイタルはSEOにどのような影響があるの？」
「コアウェブバイタルの評価を確認する方法と改善方法について知りたい」
ここでは、コアウェブバイタルに関して上記のようなお悩みを抱えている人に、概要から確認の仕方、実際の改善方法などを詳しく説明します。
細かい部分に注目してユーザーに満足してもらえるようなサイトづくりをしていきたい、サイトの状態をより最適化させたいという人はぜひご覧ください。
ユーザーにとって快適に閲覧できるサイトを、効率よく目指していくことができます。
Contents
コアウェブバイタルとは
コアウェブバイタルとは、サイトの使い勝手を図るためのUV(ユーザー体験)指標のことを指します。
ユーザーにとって使いやすいサイトに改善するためには、欠かせない指標です。
コアウェブバイタルはGoogleから2020年に発表され、2021年からは検索順位を決定する要素の一つに組み込まれています。
ユーザーがより快適にサイトを閲覧・活用できるようにするための取り組みがウェブバイタルですが、そのウェブバイタルの中で特に重要視されているのが、ここで解説するコアウェブバイタルです。
コアウェブバイタルにおいて重要視される3つの指標について
コアウェブバイタルは3つの指標で構成されます。
- LCP(Largest Contentful Paint)
- CLS(Cumulative Layout Shift)
- FID(First Input Delay)
それぞれの指標について、詳しく解説します。
LCP(Largest Contentful Paint)
LCP(Largest Contentful Paint)は「最大コンテンツの描画」を意味し、画像や動画といったページ内で最も大きなコンテンツが表示されるまでの速度のことを指します。
このLCPは「秒」で表され、数字が小さくなればなるほどUXが良いとされ、ページ読み込みから2.5秒以内が高評価と言われており、この数字を目標に改善していくことが目安となります。
参照：web.dev
【併せて読みたい記事】
CLS(Cumulative Layout Shift)
CLS(Cumulative Layout Shift)は、ページを読み込んでいる段階に発生したレイアウトのズレの変化量をスコア化したものです。
たとえば、ページの中に表示されているバナーをクリックしようとしたものの突然出てきた広告をクリックしてしまったといったケースが挙げられます。
このような事態に遭遇すると、ユーザーは本当に見たいと思った情報に速やかにたどり着くことができません。
これはユーザービリティを損なう大きな要因になります。
そのため、CLSが低下していると分かった場合は迅速に対応して改善することが重要です。
FID(First Input Delay)
FID(First Input Delay)は、サイトに訪れたユーザーが最初に行なう操作の反応速度やインタラクティブ性を評価する指標となります。
クリックやタップ、フォームへの入力といった操作時にサクサク反応するかどうかが評価の対象となります。
FIDとINPについて
FIDは、2024年3月にINPという指標に差し替えられました。
新たなコアウェブバイタルの指標となったINPは、ウェブページの応答性を測る指標です。
ページでユーザーがクリックやタップをしてから、ページが視覚的に反応するまでの時間を測ります。
INPは、入力遅延時間と処理時間、表示遅延時間と3つの段階で構成されたものの合計値を計測します。
目標値は、0.2秒以内にしたいところです。
コアウェブバイタルがSEOに与える影響
コアウェブバイタルはSEO対策を実施している場合にも影響があるのでしょうか？
結論から述べると、余程悪い状態でない限りはコアウェブバイタルの改善に固執する必要はないでしょう。
コアウェブバイタルが検索順位に与える影響はそれほど大きくはない様です。
Googleの公式発表とジョン・ミューラー氏による発言からコアウェブバイタルとSEOの関係について見ていきます。
コアウェブバイタルよりもサイトの質に注目している
Googleの公式発表においては、コアウェブバイタルが優れているというよりも関連性の高いコンテンツを持っているページの方が優先的に上位表示されると述べています。
ページエクスペリエンスの一部要素が平均以下であっても、ユーザーにとって有益となる優れた情報を提供しているサイトであればそれで良いと言えるのです。
ここから、基本的にはサイト内のコンテンツの質が重要であり、コアウェブバイタルの結果によって大きく順位が変動するわけではないと言えます。
ただし、同じようなレベルのコンテンツを提供するサイトが複数存在する場合は、順位を決定づけるための要素としてコアウェブバイタルも考慮されるので念頭に置いておきたいです。
SEO対策を行なう上で競合が多い場合は、サイトの質を高めていくと同時にコアウェブバイタルにも注目していくと良いでしょう。
検索順位を上げていくという意味では、コアウェブバイタルよりもユーザーに有益な情報を提供できるかどうかが重要となるのです。
Googleジョン・ミューラー氏もコアウェブバイタルにはそれほど注目しなくて良いと述べている
GoogleのスタッフでありWebマスタートレンドアナリストでもあるジョン・ミューラー氏は、Google検索においてもコアウェブバイタルが使用されているものの、SEO対策のためだけにスコアを上げようとする必要はないと述べています。
より完璧なスコアを目指すことは技術的な挑戦という意味では良いが、サイトの順位に大きな影響を与えるわけではないとしているのです。
ここからも、SEOのためにコアウェブバイタルにこだわる必要はないと言えます。
まずはコンテンツの質を高めて、その後検索順位が思うように伸びなかったり競合が多い場合にコアウェブバイタルにも注目してみると良いでしょう。
参照：Linked in
コアウェブバイタルの評価を確認する方法
コアウェブバイタルについて詳細を理解するためには、自サイトがどのように評価されているかを知っておくことが重要です。
ここでは、コアウェブバイタルの評価を確認する方法について、4つのツールをご紹介します。
- Googleサーチコンソール
- PageSpeed Insights
- Web Vitals
- Chrome UX Reoport
Googleサーチコンソール
Googleにおける無料のサイト管理ツールと言えばGoogleサーチコンソールです。
コアウェブバイタルの3つの指標について良好・改善が必要・不良と3段階で判定することができます。
3段階での判定だけでなく、自動で問題のあるページを検出しリストアップしてくれます。
Googleサーチコンソールを活用してコアウェブバイタルを調べる際は、最近追加された項目「ページエクスペリエンス」から確認してください。
PageSpeed Insights
PageSpeed Insightsは、サイトの表示速度を計測できるツールです。
計測したいページURLを入力するだけで、ページ全体のスコアとコアウェブバイタルの3つそれぞれのスコアが表示されるようになっています。
その他、サイト1ページごとの計測結果や改善提案などもしてくれるため、状況を把握し次に何をすべきかまで教えてくれる便利なツールです。
Web Vitals
Web Vitalsは、GoogleChromeの拡張機能になります。
計測したいページを開いて計測を実施すると、コアウェブバイタルの3指標の測定結果をすぐに表示してくれるツールです。
Chrome UX Reoport
Chrome UX ReoportはGoogleが提供しているツールで、コアウェブバイタルを含めてウェブページのUXを調べるためのものです。
Chromeのユーザーから報告されたフィールドデータを提供し、サイトの所有者にユーザーがサイトでどのような体験をしているかというデータを付与してくれます。
自サイトの他、数多く存在するサイトのUXやパフォーマンスも調べることができるのが特徴です。
ドメインレベルでデータを確認したい場合は、Googleのデータポータルを使用します。
コアウェブバイタルの改善方法
コアウェブバイタルの概要や確認方法を押さえた次に、サイトを改善していく方法についても見ていきましょう。
コアウェブバイタルを使ってユーザーにとって最適なページを目指すため、具体的な対策を行ってください。
LCPを改善する
コアウェブバイタルのなかで、最も問題が生じやすい指標といわれているのがLCPです。
LCPを改善していくためには、上記で挙げたツールを使って何が原因でLCPが低下しているかを見極める必要があります。
LCPは、以下のようなことが原因でパフォーマンスが低下します。
- サーバーの反応時間の遅延
- リソースの読み込み時間の遅延
- Java ScriptとCSSのレンダリングブロック
原因が分かったら、状況を改善していくための具体的な方法を試してください。
画像の最適化と圧縮
最適化されていない画像などをサイトに使用すると、その分リソースの読み込み時間が遅くなり、結果的にLCPの低下を招きます。
コアウェブバイタルにおいてLCPのスコアが低くなっている場合は画像の最適化と圧縮に取り組んでみてください。
いくつか次世代画像フォーマットがある中でもGoogleが推奨しているWebPがおすすめです。
画像を圧縮する際は、tiny pngを使用してみましょう。
次世代画像フォーマットに対応している圧縮ツールとなっており、アップロードをするだけで簡単に画像を圧縮することができます。
参照：tiny png
サーバーの応答時間を速める
コアウェブバイタルの改善では、サーバーの応答時間を速めることも重要です。
サーバーの応答時間を速める方法の中で簡単な方法が、応答速度が速いサーバーに乗り換えることです。
サーバーを乗り換えるだけで表示速度が大きく改善されることがあるので、LCPを改善していく手段の一つとして検討してみましょう。
Java ScriptやCSSへの対策を行なう
LCPを改善していくためには、Java ScriptやCSSへの対策も必要となります。
ブラウザは、ページの情報を読み込むときにJava ScriptやCSSといった外部ファイルをHTMLと同時に処理することができません。
ここから、HTML以外の情報が多くなるほど、ページの読み込み速度は遅くなってしまいます。
このような状況を回避するためにも、不要なJava ScriptやCSSを削除する、コード内のスペースやコメントを削除するなどして、情報をシンプルにしてみましょう。
不要な画像は減らす
画像が多ければ多いほど、表示速度に影響が出てしまうので、LCPの改善を図るため
には画像の数を減らせるだけ減らしておきましょう。
ユーザーにとって不要である画像は、極力挿入しないのがポイントです。
いくら圧縮しても容量はゼロにはならないため、ユーザーにとって必要な画像は何かという点から挿入し、できるだけ数を少なくしておいてください。
INPを改善する
INPは、次のようなことが原因でパフォーマンスが低下すると考えられます。
- Java Scriptを多用している
- サーバーにかかるコストが大きい
INPを改善していくためには、サイト上でJava Scriptの解析を行ない、編集や実行を最適化することが有効です。
長いタスクは分割したり、ウェブワーカーを使用する、Java Scriptの量を減らすなどして、サイトに少しでも負担がかからないように調整していくとコアウェブバイタルが改善されます。
詳細については、以下をご覧ください。
Java Scriptを削減する
INPを改善していくには、Java Scriptを削減する必要があります。
広告タグや計測タグなどを多く使用している場合は、不要なものがないかチェックしましょう。
不要なJava Scriptは、Googleのデベロッパーツールなどでも調べることができます。
ページによって必要なJava Scriptであるかどうか慎重に見極める必要があるので、サイト構造に詳しい人材に頼むと安心です。
自身で取り組む場合は、バックアップをとった上で作業するようにしてください。
Java Scriptの遅延読み込みを設定する
ページアクセスの時点で読み込む必要がないJava Scriptは、遅延読み込みを設定しておきます。
遅延読み込みしたいJava Scriptのscriptタグに「defer」や「async」属性のいずれかまたは両方を付与すると完了です。
長いタスクは分割する
長いJava Scriptに関しては、分割しましょう。
ユーザーの行動などを処理するメインスレッドのタスクを分割すると、Java Scriptの読み込み時間を短縮できるのでINPの改善に繋がります。
メインスレッドを50ミリ秒以上ブロックするコードを優先的に分割してみてください。
CLSを改善する
CLSを改善していくためには、まず原因を理解しておきましょう。
- コンテンツが動的に埋め込まれる（スライダーなど）
- 表示されている画像などのサイズ指定がされていない
- Webフォントなどの外部ファイルの読み込みによりズレが生じる
上記のようなことが原因でCLSが低下することがあるので、サイト上に表示される画像サイズを指定しておいたり、動きが出ないように設定しておくことが大事です。
動的コンテンツについては表示のズレを招く原因になりうるので、多用しすぎないようにしましょう。
具体的には、以下に挙げる対策が有効です。
画像サイズを指定する
CLSが低下しているとわかった場合は、まず画像サイズを指定しましょう。
画像のサイズを指定しておくと、ブラウザが画像を表示する範囲を理解できるのでテキストを読み込んでいるときにレイアウトが崩れる心配がなくなります。
画像サイズを指定する際は、width要素とheight要素を設定するといいです。
広告表示領域を確保しておく
画像のサイズを指定すると同時に、広告表示領域の確保もしておきましょう。
広告についても、サイズが指定されていなければブラウザはどこまでを広告として表示すれば良いか判断できません。
だからといって広告を最大サイズで予約すると、無駄な余白ができてしまう恐れがあります。
コンテンツごとに適したサイズで、広告表示領域を予約するようにしましょう。
Webフォントの使用は最小限にとどめる
Webフォントとは、インターネット上のサーバーなどに公開されているフォントのことです。
無料で使用できるWebフォントも多く存在し、ユーザーの利用環境に左右されることなく指定されたフォントを呼び出せるのが利点と言えます。
しかし、Webフォントを表示するためには、そのデータをブラウザ側で取得する必要があり、新たなトラブルを招く恐れがあるので注意しなければなりません。
たとえば、FOUTというトラブルでは、フォントが切り替わるときにレイアウトが崩れてCLSを低下させてしまうことがあります。
問題が生じるのを防ぐためには、CSSプロパティなどを最適化すると同時にWebフォントの使用を最小限に留めることが重要です。
コアウェブバイタルの対策を行なうためのポイント6選
コアウェブバイタルの指標に基づいてそれぞれの改善方法まで見てきましたが、対策を行なう際には以下のポイントに注目しながら取り組んでみてください。
Chromeユーザーエクスペリエンスレポートを知る
コアウェブバイタルのデータは、Chromeを使ったアクセスからでないと情報を収集することができません。
そのため、確かなデータを元に対策を行なう場合は、Chrome上でサイトに訪れるユーザーを増やす必要があります。
Chromeユーザーエクスペリエンスレポートは28日間ごとに更新され、毎月第二火曜日に新しいデータが見られるようになる点も理解しておきましょう。
改善作業を無事完了できるまでには、およそ1～2ヵ月程度かかります。
改善したその日にすぐに結果が分かるというわけではないので、しばらく時間がかかることを理解しておいてください。
どのURLにおいて改善や対策が必要か調べる
コアウェブバイタルの指標をツールで確認し、改善が必要であると分かったら、どのURLを改善をしなければならないのかを調べていきます。
特に、以下の2点に注目して対策を行なっていきましょう。
- 個別URLのフィールドデータ
- ドメイン全体のオリジンサマリ
フィールドデータがあるURLに関しては、フィールドデータを改善することを最優先に行ないます。
フィールドデータのないURLは、オリジンサマリが良好であれば問題ないと言えるでしょう。
ただし、個別URLに対してアクセスが少ない場合もあるので、アクセスを増やすための対策は引き続き行なっていく必要があります。
定期的にユーザーの動きに目を向けながら改善を続ける
コアウェブバイタルは毎月変動するものです。
そのため、一度改善を図った後、数ヵ月経った頃には表示速度を悪化させる要因が増えることがあります。
「良好」から「改善が必要である」状態になる恐れもあるので、毎月状況を確認するようにしてください。
フィールドデータとラボデータを参考にしながら改善を図る
コアウェブバイタルを計測して状態が良好でないURLが見つかったら、ラボデータも参考にしながら作業を行ないましょう。
ラボデータの対策では、仮に最適化スコアが良好で改善点が指摘されていない状況であっても、コアウェブバイタルが100％良好になることはありません。
これは、コアウェブバイタルにはサイトの最適化に加えユーザーの通信速度なども影響してくるためです。
サイトのリニューアルを検討してみる
コアウェブバイタルにおいては、上記に挙げた改善法とは別にサイトのリニューアルを行なってデザインを一新した方が結果が良くなるという事例もあります。
サイトリニューアルする余裕があれば、よりユーザーが利用しやすいサイトを目指して設計してみましょう。
モバイル・デスクトップともに良好になる様対策を行なう
コアウェブバイタルでは、モバイルとデスクトップの両方において良好になるよう対策を行ないましょう。
これまではモバイルだけでしたが、今後はデスクトップについてもコアウェブバイタルは影響してきます。
モバイルとデスクトップ、それぞれのコアウェブバイタルを確認して、自サイトの状況を調べてみてください。
コアウェブバイタルを理解して改善を図り多くのユーザーに閲覧してもらえるサイトを目指そう
コアウェブバイタルの概要からSEOとの関係性、サイトのコアウェブバイタルの確認方法や改善方法などをご紹介しました。
コアウェブバイタルは、自サイトに訪れるユーザーがより快適にページを閲覧できるよう注目しておきたい指標です。
まずは自サイトのコアウェブバイタルを確認して、次にどのような改善方法を実践していくべきか考える必要があります。
そうして日々改善を重ねていくことで、多くのユーザーが訪れるサイトに近づくことができるでしょう。
