コアウェブバイタル（core web vitals）とは？SEO評価への影響や改善方法を解説

コアウェブバイタルとは、「サイト上のUXを測定する一連の指標」です。Webサイトを運用する上で、ユーザーエクスペリエンス（UX）の質の向上は重要であり、コアウェブバイタルはGoogleのコアランキングシステムに組み込まれているとされている要素の１つです。

GoogleはコアウェブバイタルなどのUXの指標によりWebサイトの有益性を客観的に判断しており、自社サイトのコアウェブバイタルを改善することで、ユーザビリティの良いサイトとなり、検索結果でのランキングを上げることができる1つの要因となるでしょう。

コアウェブバイタルは、下記の3つの指標から構成されています。

・LCP（Largest Contentful Paint）：ページ表示速度
・CLS（Cumulative Layout Shift）：視覚的安定性
・INP（Interaction to Next Paint）：コンテンツ応答性

それぞれの指標を詳しく解説します。

LCPとは「最大コンテンツの描画」のことで、ブラウザ表示範囲の中で最も大きなコンテンツ（画像、テキストブロック、動画）が表示されるまでの時間を表します。数値は秒で表し、値が小さければ小さいほどUXが優れていると評価されます。

GoogleにおけるLCPの評価スコアの基準は以下です。

良好：2.5秒以内
改善が必要：4秒以下
不良：4秒超


LCPのスコアが低いサイトは重い画像や動画の読み込みに時間がかかっているため、ユーザーがページ表示を待機する時間が長くなり、ページの離脱につながる可能性が考えられます。

CLSとは「累積レイアウト変更」のことで、ページを読み込む際にどれくらいレイアウトがずれるのかを表す指標です。視覚要素の安定性を示す指標であり、ユーザーが意図しないレイアウトのずれが発生したかをスコアで表します。

GoogleにおけるCLSの評価スコアの基準は以下です。

良好：0.1未満
改善が必要：0.1以上0.25以下
不良：0.25超

スコアが小さければ小さいほど良好となり、 計算式は2つの測定値（インパクトの割合と距離の割合）の積となります。

CLSのスコアが低いサイトは、ユーザーが時間が経ってから表示された広告やコンテンツなどを意図せずクリックしてしまうため、UXが損なわれてしまいます。

INPとは「次回描画との相互作用」のことで、ページ内でのアクションの反応速度を表す指標です。ページ滞在中にユーザーが行ったクリック、タップや、キーボードでの入力といった操作に対して、視覚的な応答がスムーズに行えるかが評価されます。

GoogleにおけるINPの評価スコアの基準は以下です。

良好：0.2秒未満
改善が必要：0.5秒以下
不良：0.5秒超

INPのスコアが低いサイトは、クリックやタップなどのユーザー操作に対しての反応が遅く、使いづらさを感じさせてしまう恐れがあります。

2024年3月12日にコアウェブバイタルの指標がFID（First Input Delay）からINPに変更され、FIDのサポートは2024年9月9日に終了しています。FIDが初回の操作に対する応答性を測る指標なのに対して、INPはページを表示している期間全体の反応速度を測る指標になります。

コアウェブバイタルはUXを測る指標であり、SEOへの影響がありますが、Googleは公式サイトにおいて、「優れたページ エクスペリエンスに関係するのは、Core Web Vitalsだけではない」と明記しています。コアウェブバイタルレポートの結果が良好な状態であったとしても、他のランキングシステムの要素の状況によっては高いランキングにならないこともあります。

コアウェブバイタル（core web vitals）スコアの確認方法には、以下の3つがあります。

・「PageSpeed Insights（ページスピードインサイト）」で確認
・「Google Search Console（サーチコンソール）」での確認
・Chrome拡張機能での確認

確認方法を具体的に見ていきましょう。

Page Speed Insights（ページスピードインサイト）とはGoogleが提供する無料ツールで、サイトや特定ページの表示速度を分析し、評価することができます。PageSpeed Insightsでは、サイトの表示スピードのパフォーマンスを100点満点で採点し、コアウェブバイタルの項目で数値化してくれます。

以下は使い方の手順になります。

1.　Page Speed Insightsにアクセス
2.　計測したいサイトのURLを検索バーに入力
3.　「分析」をクリック
4.　検索結果を確認

先述したLCP、CLS、INPだけでなく、その他の指標の結果も確認できるため、それぞれのスコアや改善点も確認することができます。

Google Search Console（サーチコンソール）は、レポート機能でコアウェブバイタルを評価する機能を搭載しています。

使い方の手順は以下の通りです。

1.　分析したいサイトのサーチコンソールにログインする
2.　画面左側のサイドバーから「ウェブに関する主な指標」をクリックする
3.　指標の結果を確認

Google Search Consoleでは、確認したいページのLCP、CLS、INPに基づいて、「良好」「改善が必要」「不良」の3段階で評価してくれます。また、パフォーマンスの測定や問題のあるページの自動的な識別、リスト化が可能になります。

Chromeの拡張機能でもコアウェブバイタルを確認する方法があります。WebサイトやWebアプリケーションを評価するツールである「Lifhthouse」、コアウェブバイタルの3つの指標の測定結果がリアルタイムで表示される「Web Vitals」などの拡張機能が有名です。

コアウェブバイタルスコアが不良である場合は、数値を改善する必要があります。コアウェブバイタルの改善方法を、LCP、CLS、INPに分けて解説します。

それぞれの改善方法を具体的に見ていきましょう。

LCP（Largest Contentful Paint）の改善方法は主に以下の通りです。

・画像の最適化と圧縮
・不要な画像の削減
・JavaScriptやCSSの対策
・サーバー応答の改善

詳しく見ていきましょう。

画像の最適化と圧縮を行うことで、表示速度が改善することがあります。
画像の最適化の方法として、次世代画像フォーマット（WebP、JPEG2000、JPEG XRなど）の利用が推奨されています。画像の圧縮においては、次世代画像フォーマットの圧縮に対応している「tiny png」が広く利用されます。また、各次世代画像フォーマットの対応ブラウザは「Can I use」というサイトで確認できます。

画像を多く掲載している場合、表示速度は当然遅くなります。ユーザーにとって必要以上のリッチコンテンツを過度に使用していないかを確認し、不要な画像は削減しましょう。表示速度への影響を考慮しながら本当に必要な画像や動画なのかを見直すことが大切です。

JavaScriptやCSSの対策もLCPの改善方法としては有効です。ブラウザは情報を読み込む際に、HTML以外の情報を同時に処理することができません。そのため、HTML以外の情報が多くなればなるほどページの読み込み速度は遅くなります。不要なJavaScriptやCSSは削除し、コードの圧縮やDOMサイズを小さくするなどの対策が効果的です。

サーバーの応答時間を速めることもコアウェブバイタルの改善施策の一つとして有効です。改善方法として、使用中のレンタルサーバーより応答速度が速いレンタルサーバーに乗り換えるのも1つの方法です。また、ユーザーから地理的に近いCDN（コンテンツデリバリーネットワーク）を利用するのもよいでしょう。

CLS(Cumulative Layout Shift)の改善方法は主に以下のとおりです。

・画像サイズの指定
・広告表示領域の適切な予約
・Webフォント使用の削減

詳しく解説します。

CLSを改善するのに有効なのが画像サイズ指定です。サイズ指定がされていない画像が埋め込まれていると、CLS低下の原因になります。画像の幅や高さを事前に指定しておくことでブラウザは表示するスペースを正確に確保でき、テキストなどの読み込みが進んでいてもレイアウトの崩れが起こりません。

広告の表示領域を予約しないまま設定していると、CLS低下の原因になります。広告の表示領域も事前に指定しておくことで、ページ読み込みの際に広告のスペースを判断できます。最大サイズで予約するのではなく、コンテンツに適したサイズで予約をしましょう。

Webフォントの利用を抑えることで、フォントのデータをダウンロードする時間を削減でき、レイアウトの安定性が向上します。Webフォントとはサーバーにアップロードされているフォントのことで、表示する際にサーバーからフォントファイルをダウンロードします。どのデバイスでも同じフォントデザインが表示されるメリットがある一方で、FOUT（※1）やFOIT（※2）が発生することもあり、CLS低下の原因になります。

※1：Webフォントが適用されるタイミングで再レンダリングが発生すること
※2：テキストが一時的に非表示になる現象のこと

INP（Interaction to Next Paint）の改善方法は主に以下のとおりです。

・JavaScript使用量の削減
・長いJavaScriptタスクの分割
・Webワーカーの使用

詳しく解説します。

INP低下の原因として、大量のJavaScriptコードの使用が挙げられます。JavaScriptは動的なWebサイトにおいて欠かせないものですが、処理中はユーザー操作ができなくなるというデメリットがあります。JavaScriptの使用量を削除する際は、Googleのデベロッパーツールなどを用いて不要なものがないかチェックしましょう。ただし削除する際は、サイト構造を理解しているエンジニアに確認をとりながら慎重に進めることが大切です。

長いJavaScriptタスクの分割し細分化することも、INPの改善に効果的です。ブラウザではメインスレッドが主となります。メインスレッドにはブラウザがユーザー行動や描画の情報を処理する役割があります。このメインスレッドのタスクを分割することで、読み込み時間の短縮が可能です。メインスレッドが「50ミリ秒以上」必要な処理は分割することが推奨されています。

INPの改善方法の1つに「Webワーカー」の使用があります。Webワーカーとは、メインスレッドで処理するJavaScripをバックグラウンドで処理する仕組みで、メインスレッドで読み込む時間を短縮できます。

Googleは検索ランキング向上の要因にはコアウェブバイタルに加えて、以下のようなUXに関する要素を挙げています。

・モバイルフレンドリーかどうか
・HTTPSでページが保護されているか
・邪魔なインタースティシャルがないか
・メインコンテンツが明確かどうか

それぞれの要素を見ていきましょう。

モバイルフレンドリーとはスマートフォンやタブレットなどのモバイル端末で閲覧しやすいサイトになっている状態を指します。Webサイトへのアクセス端末として携帯端末からのアクセスが増えたことでGoogleもモバイルフレンドリーの重要性を指摘しはじめ、2015年4月にはモバイルフレンドリーアップデートが開始され、モバイルフレンドリーなページの掲載順位が引きあげられるようになりました。また、2024年7月からはGoogleのWebサイトのクロールがモバイルサイト用のクローラーだけになっており、レスポンシブ対応や、モバイルサイト向けに最適化することは必須となっています。

HTTPSでデータ通信が保護されているかも1つの指標です。HTTPSとは、WebサーバーとWebブラウザの間でデータをやり取りするために使用されるHTTPに対し、個人情報保護のためSSL（通信の暗号化）によってセキュリティを高めたものです。GoogleもSSLを推奨しており、2018年からは常時SSL化されていないHTTPのサイトには警告表示が出るようになっています。警告表示がでるとユーザーの不安を煽り離脱率の増加にもつながるため、個人情報を取り扱うようなサイトでなくてもSSLの対応をしておくことが望ましいでしょう。

インタースティシャルとは、コンテンツページの移動の前後に独立して表示されるWebページのことで、多くの場合は広告目的で表示されます。インタースティシャルがUXを阻害してしまうと、Googleのアルゴリズムにおいてマイナスな評価を受ける恐れがあります。「コンテンツを覆い隠す」、「閉じるボタンが見つかりづらい」など過度にUXを損なうインタースティシャルがある場合には、削除することも検討しましょう。

サイトのメインコンテンツとそうでないコンテンツの区別を明確にすることも大切です。ユーザーが求めた情報を簡単に見つけられるUIにすることが好ましいでしょう。

コアウェブバイタル（Core Web Vitals）とは、UXを測定する一連の指標で、検索結果でのランキングに関わる重要な要素です。コアウェブバイタルはLCP（ページ表示速度）、CLS（視覚的安定性）、INP（コンテンツ応答性）の3つの指標で表されます。それらを確認し評価が低い場合にはそれぞれ個別に改善することが重要です。

ただし、優れたUXに関与するのはコアウェブバイタルだけではありません。最も重要視すべきはユーザーファーストなサイトを構築することであり、コアウェブバイタル以外の項目であるモバイルフレンドリー、HTTPS、インタースティシャルの見直し、メインコンテンツの明確化なども含めて、総合的にサイトの品質を向上させていくことが大切になります。

ヴァリューズでは、SEO対策に必要な戦略設計から、効果検証に至るまでの一気通貫のご支援をしております。国内最大規模のWeb行動ログのデータベースからCVに繋がりやすいKWを特定し、貴社のSEO対策のお力添えをさせていただきます。

資料のダウンロードURLを、ご入力いただいたメールアドレスに送付させていただきます。
ご登録頂いた方にはVALUESからサービスのお知らせやご案内をさせて頂く場合がございます。