UXにおいて重要となる指標のひとつがコアウェブバイタルです。2021年からSEOのランキング要因に組み込まれました。本記事では、コアウェブバイタルにおける3つの指標とされているLCP、FID、CLSの内容や測定ツールなどについて詳しく解説します。
コアウェブバイタルとは？
コアウェブバイタル（Core Web Vitals）とは、Googleが2020年に発表したユーザーエスクペリエンス（以下UX）を良くするための指標です。ユーザーがどの程度有益な体験をしたかを表すUXは、さまざまな要素によって判断されます。
UX向上のための手法はサイトやページによっても異なりますが、Googleでは、ユーザー体験の核となる「読み込み時間」「インタラクティブ性」「ページコンテンツの視覚的な安定性」を重視すると公表しています。
ただし、Googleは常にアップデートを繰り返しているため、今後指標の内容が変化する可能性があることも認識しておきましょう。
コアウェブバイタルにおける3つの指標
コアウェブバイタルには、「LCP」「FID」「CLS」といった3つの指標があり、いずれの指標もウェブページの表示速度に関係しているものです。
それぞれの指標に関連するアイテムやシチュエーションは異なります。まずは、コアウェブバイタルにおける3つの指標の違いについて、詳しく確認していきましょう。
1. LCP
LCP（Largest Contentful Paint）は「最大コンテンツの描画」を意味し、ページ内で最も有意義とされる内容（画像や動画など）がどの程度時間をかけずに表示されるかを表すものです。ページ内において最も大きいコンテンツとなる画像やテキストブロックなどのレンダリング時間（表示までにかかる時間）が計測され、評価の材料となります。
具体的には、ページの読み込み開始から2.5秒未満に最も大きな要素を表示することで、UXが優れた状態であると評価されます。コンテンツ自体の容量が重い場合は読み込み時間が遅くなり、基準値を下回るおそれがあるので、注意が必要です。
2. FID
FID（First Input Delay）は「初回入力遅延」の意味で、ユーザーがページ内で初めてクリックなどのアクションを起こした際の応答時間をもとにインタラクティブ性を表します。
Googleは、ユーザーの入力からブラウザが応答するまでの時間を計測し、評価しています。ユーザーが初めて操作してからの反応速度は、以下のように定義されます。
- 100ミリ秒未満：良好
- 300ミリ秒以下：改善が必要
- 300ミリ秒以上：不良
3. CLS
CLS（Cumulative Layout Shift）は「累積レイアウト変更」を意味し、ユーザーが訪れたコンテンツの視覚安定性を示す指標です。CLSが優れていると評価されるには、ユーザーが予期しないページレイアウトのずれを「0.1未満」にすることが理想的です。スコアの計算方法は次のとおりです。
「ずれが生じた表示領域の比率 × 距離の比率」
CLSの低下要因の具体例は以下が挙げられます。
- ページ読み込みがテキスト→画像の順にされると、画像読み込みの際にテキストの位置がずれる
- リンクをクリックしようとしたら、予期しないコンテンツ（画像など）が出てきてリンクが下がる
コアウェブバイタルを測る代表的な5つのツール
Googleでは、コアウェブバイタルの測定ツールを無料で提供しています。なかでも代表的なツールは、次の5つです。
- PageSpeed Insights
- Light House
- Search Console
- Chrome ユーザーエクスペリエンスレポート
- Web Vitals
これらのツールを組み合わせて使うことで、UX向上のための改善点を見つけられます。
ここでは、Googleが提供している代表的なツールの特徴や内容について詳しく紹介します。
1. 表示速度を計測「PageSpeed Insights」
PageSpeed Insightsは、サイトのページ表示速度を計測するツールです。PageSpeed Insightsにアクセスし、計測したいページのURLをボックスに入力して、分析をクリック すれば計測可能です。
モバイルとパソコン、それぞれのデバイスからページへアクセスした場合の速度スコアを測定できます。PageSpeed Insightsではページごとの計測結果が分かり、評価だけではなく具体的な修正箇所や改善方法を提案してくれます。
コアウェブバイタルのスコアはトップに表示されるため、Googleが示す基準値を満たしているかを確認してみましょう。
▼ページスピードインサイトの詳しい情報はこちら
ページスピードインサイトとは？スコアの改善方法もあわせて紹介
2.掲載順位を監視「Search Console」
Search Consoleは検索結果の表示順位を管理し、改善するための解析サービスです。まずはSearch Consoleに登録し、メニューから「ウェブに関する主な指標」をクリックすると、コアウェブバイタルの数値をチェックできます。
レポートでチェックできる項目は、LCP、FID、CLSの3つの指標です。それぞれ「良好」「改善が必要」「不良」のステータスで判定され、結果が表示されます。サーチコンソールでは、問題のページがどこかが確認できるのが良い点です。
大まかなページ状況を「Search Console」で確認し、具体的な改善方法を前述の「PageSpeed Insights」で確認するなど、ほかのツールと組み合わせることでより効率的に問題点を洗い出せるでしょう。
3. UXの問題を特定「Light House」
Light Houseは、WebサイトやWebアプリのUXに関する問題を特定するための開発者向け評価ツールです。Light Houseには、Chrome拡張機能やコマンドラインツールとして使用する方法があります。それぞれ、Chromeウェブストアからのプラグインやインストールによって利用可能です。
ページのテスト結果レポートでは「パフォーマンス」「アクセシビリティ」「SEO」などの要素について、評価と具体的な改善施策をチェックできます。
4. UXパフォーマンスを確認「Chromeユーザーエクスペリエンスレポート」
Chromeユーザーエクスペリエンスレポートは、UXパフォーマンスを確認できるサービスです。Googleが新たに提供開始した機能で、Chrome上でWebサイトのUXパフォーマンスを確認できます。
ユーザーが実際にサイト上で起こした行動や体験について、Chromeが持つデータを元にレポートを作成することも可能です。パフォーマンス向上やコアウェブバイタル改善のため対策や統計的な処理などに活用できるでしょう。
また「Google BigQuery」では、1ヶ月あたり最大1TBまで無料でクエリを利用することもできます。自身が運営するサイト以外にも、競合サイトのパフォーマンスやUXの状態を確認、比較してみるとよいでしょう。
5. 測定結果をリアルタイム表示「Web Vitals」
Web Vitalsは、chromeウェブストアからインストールして利用できるGoogle Chromeの拡張機能で、測定結果をリアルタイムで表示できます。Chromeブラウザで計測したいページを開いて「Web Vitals」を起動すると、「LCP」「FID」「CLS」の測定結果をリアルタイムで確認することが可能です。
開発者はワークフロー初期段階の問題を検出し、改善するためのツールとして、ユーザーは閲覧ページのコアフェブバイタルパフォーマンスを診断するツールとして活用できるでしょう。
コアウェブバイタルの具体的な改善方法
ここでは、コアウェブバイタルにおける3つの指標である「LCP」「FID」「CLS」の具体的な改善方法を詳しく解説します。
ウェブページのコアウェブバイタルを最適化できると、Googleからのサイト評価を向上でき、検索順位にも好影響をもたらします。それぞれの改善方法を正しく理解し、確実に実施していきましょう。
LCPを改善する方法
LCPを改善する方法としては、画像の最適化や圧縮、コードの軽量化・圧縮といった対策が有効です。ほかにも、画像のCDN配信化などが改善策として挙げられます。
いずれの改善方法もプラグインの追加やコードの調整によって簡単に取り組むことが可能です。しかし、改善に取り組んだだけでは意味がありません。改善策を施したあとは前述の測定ツールなどを使用し、継続的に状況を確認しましょう。
FIDを改善する方法
FIDを改善するためには、JavaScriptの適切な使用が有効です。一度に多くのJavaScriptを実行するとFIDの低下につながるため、改善案を考えなければなりません。JavaScriptの処理量を減らすことで、実行時間の短縮やFIDの改善につながるでしょう。
ほかにも、タスクの分割によって必要なJaveScriptだけを初期ロード時に実行するようにしたり、Webワーカーを使用してメインスレッドでの処理内容を減らしたりといった方法もFIDの改善に効果的です。
CLSを改善する方法
CLSを改善する方法としては、画像サイズの指定や広告表示領域の予約などが有効です。サイズ指定がされていない画像がネックになる場合は、読み込み前に画像の表示領域を確保すると改善できます。
画像の表示領域は「widthとheight要素でサイズ指定する」「CSSアスクペクト比率を使う」といった方法で確保してみてください。また、広告も表示領域を事前に予約するとCLSの改善につながります。
ただし、いずれの方法も最大サイズで指定すると画像に空白部分できるため、注意が必要です。
コアウェブバイタル以外の重要評価ポイントは4つ
コアウェブバイタル以外にもgoogleがすでに重要視し、評価に反映しているポイントは次の4つです。
- セーフブラウジング
- モバイルフレンドリー
- インタースティシャルの有無
- HTTPS対応
いずれもコアウェブバイタルの3指標と併せてSEO対策を施し、Googleからのサイト評価を高めることが可能です。それぞれの内容について詳しく解説します。
1. セーフブラウジング
セーフブラウジングは、安全ではないウェブサイトを知らせるサービスのことです。「悪質なスクリプトの存在」や「フィッシングサイトなどのページ誘導」といった点をチェックし、安全なページであることを評価指標としています。Googleのセキュリティチームが、安全でないサイト運営者やユーザーに有害性を報告することを目的として構築したサービスです。
サイト運営者としては、外部要因によって意図しない内に悪質なスクリプトを組み込まれ、「安全でないサイト」と評価されてしまう点に注意する必要があります。
2. モバイルフレンドリー
モバイルフレンドリーは、ウェブサイトをスマートフォンで快適に閲覧できるかどうかを評価する指標です。Googleは、ウェブサイトのデザインから機能面までスマートフォンに対応し、ユーザー側のデバイスやブラウザによってUXが損なわれないようにすることを目標としています。
サイトページがモバイルフレンドリー化されているかどうかは、Googleが提供する「モバイルフレンドリテストツール」を使用して測定可能です。
3. インタースティシャルの有無
インタースティシャルとは、ユーザーがサイトページにアクセスした際、自動的に画面に表示される広告のことです。画面全体を覆うような過剰なインタースティシャルは、ユーザーにとってストレスとなるだけでなく、UX低下の要因になることもあるので注意しましょう。
Googleは「過剰なインタースティシャル」がない状態を評価します。よってインタースティシャルを取り入れる際は、UXの低下によってGoogleからの評価が下がらないよう、ページごとに使い分けるなどの対策が必要です。
4. HTTPS対応
HTTPS（Hypertext Transfer Protocol Secure）対応は、ウェブサイトと閲覧ユーザーの間で送受信されるデータを暗号化し、安全性や機密性を保つための接続プロトコルです。HTTPSに対応していないサイトは、外部からの悪意あるデータ改ざんなどの危険性にさらされています。
Google ChromeにはHTTPS対応していないWebサイトに対して、ブラウザ上で警告を表示する仕組みがあり、Googleからの評価を高めるためには、ソースコードの修正などHTTPSに対応した修正を施さなければなりません。
コアウェブバイタルを中心にサイトを最適化しよう
2021年からGoogleが取り入れたコアウェブバイタルの3つの指標は、いずれも検索順位に大きく影響します。コアウェブバイタルなどのサイト内部に対するSEO施策は、ツールを利用しながら取り組む必要があります。
コンテンツ作成以外のサイト内部の施策は、SEO対策の土台です。本稿で紹介した内容を参考に、サイト全体の最適化に取り組みましょう。
