「コアウェブバイタル（Core Web Vitals）」とは、Googleが設定した基準で、WebサイトやWebページを使いやすくするための指標です。2020年に新しく導入され、Googleの検索順位にも影響を与える要素となっています。コアウェブバイタルは、LCP（Largest Contentful Paint）、FID（First Input Delay）、CLS（Cumulative Layout Shift）の3つの指標から成り立っています。
コアウェブバイタルの対策を考える際には、それぞれの指標の意味や基準を正しく理解して適切な対策を行うことが重要です。この記事では、コアウェブバイタルの指標の概要や測定方法、指標を改善する方法について説明していきます。
「コアウェブバイタル（Core Web Vitals）」とは、WebサイトやWebページを使いやすくするための基準です。ユーザーがページを使いやすく感じることができるかどうかを示すものです。たとえば、ページの読み込みが速いかどうかや、スマートフォンでも使いやすいかなどが重要な要素となります。
コアウェブバイタルは、さまざまなウェブバイタル（Web Vitals）の中でも特に重要な3つの指標をまとめたものです。Webページの読み込み時間や反応速度、レイアウトの安定性など、ページの使いやすさを向上させるために重要な要素となっています。
- LCP（Largest Contentful Paint）
Webページの主要な部分が表示されるまでの時間を測定します。つまり、ページが読み込まれてから大切な情報が表示されるまでの時間です。 - FID（First Input Delay）
ユーザーがWebページ上で最初の操作をしてから、ページが反応するまでの待ち時間を測定します。ユーザーがスムーズに操作できるかどうかが評価されます。 - CLS（Cumulative Layout Shift）
Webページの読み込み中や読み込み後に、意図しないレイアウトのずれやコンテンツの移動が起きるかどうかを測定します。ユーザーが読んでいる最中に画面が乱れることなく、安定して表示されることが求められます。
これらの指標は数値化されており、現在のページの使いやすさを評価することができます。
コアウェブバイタル（Core Web Vitals）は、Googleの検索ランキングに影響を与える要素です。つまり、Googleで上位に表示されるためには、コアウェブバイタルの指標を改善する必要があります。
ランキングとは、検索結果の順位を決める基準のことです。たくさんのウェブページがある中で、より良いユーザーエクスペリエンスを提供するページが上位に表示されるのです。コアウェブバイタルは、ユーザーがページを使いやすく感じるかどうかを測る指標で、その結果がランキングに反映されます。
しかし、大切なことは、優れたコンテンツを持つページが最も重要であるということです。つまり、コアウェブバイタルが平均的なレベルでも、優れた情報を提供しているページは優先されます。ただし、同じようなコンテンツを持つページが複数ある場合には、コアウェブバイタルが重要な要素となることがあります。
具体的な評価方法は、ページやサイトの複数のページで行われます。コアウェブバイタルの評価は、ページビューのうち75％に基づいています。つまり、多くの人が利用するページの使いやすさが重要視されるのです。
LCP（Largest Contentful Paint）は、ウェブページの重要な部分が表示されるまでにかかる時間を表します。LCPは、ウェブページを開いてから2.5秒以内が良いとされ、4秒以上だと遅いと評価されます。
ウェブページを開いたときに、待機表示が長くて情報にたどり着けないことがありますよね。Googleは、ウェブページの表示までの待ち時間がユーザーエクスペリエンスの質に影響すると考えており、それがコアウェブバイタルの要素として採用されています。
重要なのは、LCPが全てのコンテンツの表示時間を示しているわけではないということです。LCPは、ウェブページ内で最も大きなサイズのコンテンツが表示されるまでにかかる時間を指します。
例えば、あるウェブページでは動画が一番大きなコンテンツかもしれませんし、別のウェブページでは画像かもしれません。ウェブサイトの構成によって、測定の対象が異なるので注意が必要です。
FID（First Input Delay）は、ユーザーがウェブページ内で最初のアクションを起こしてから、応答があるまでの待ち時間を指します。アクションを起こしてから100ミリ秒未満が良いとされ、300ミリ秒以上だと遅いと評価されます。
例えば、ウェブページ内のリンクをクリックして、リンク先のページが表示されるまでの時間や、ウェブページ内のボタンをタップして、移動先のページが表示されるまでの時間がFIDに当てはまります。
FIDは、ウェブページの応答性を確認するための指標として採用されています。Googleは、ユーザーが最初のアクションを起こしたときに迅速に反応できるかどうかが、ページエクスペリエンスに影響すると考えています。
CLS（Cumulative Layout Shift）は、ウェブページの読み込み中と読み込み後で、レイアウトのずれや動きが起こることを表します。
例えば、ウェブページの読み込み中と終了後でのレイアウトのずれが大きいと、ユーザーが誤って操作してしまうことがあります。先ほどの例で言えば、読み込み中にはボタンが表示されないと思っているため、ユーザーは画面中央に指を置いたままでしょう。しかし、読み込みが完了すると意図せずにボタンをタップしてしまい、ユーザーエクスペリエンスが低下します。
GoogleはCLSを「画面の安定性」として評価し、視覚的に安定したウェブページを好ましいと考えています。
コアウェブバイタルを測定する方法はいくつかあります。
- Google Search Consoleを使って測定する方法
- Google Search Consoleは、Googleが提供している無料のツールです。
- 測定したいウェブページのURLでGoogle Search Consoleにアクセスします。
- 「Webに関する指標」という項目をクリックすると、コアウェブバイタルのデータが表示されます。
- 色で示された結果を見ると、緑色が「良好」、黄色が「改善が必要」、赤色が「不良」を表しています。
- PageSpeed Insightsを使って測定する方法
- PageSpeed Insightsは、Googleが提供するツールです。
- PageSpeed Insightsのウェブサイトにアクセスし、測定したいウェブページのURLを入力します。
- 分析ボタンをクリックすると、コアウェブバイタルの結果が表示されます。
- 結果は色で表示され、緑色の割合が多ければ良好な状態です。
- Google Chromeの拡張機能を使って測定する方法
- Googleが提供しているGoogle Chromeの拡張機能を利用します。
- 「Web Vitals」という拡張機能をChromeウェブストアから追加します。
- 測定したいウェブページを開き、拡張機能内の「Web Vitals」をクリックすると、測定結果が表示されます。
- 結果も色で表示され、緑色の割合が多ければ良好です。
これらの方法を使うことで、簡単にコアウェブバイタルを測定することができます。
LCP（Largest Contentful Paint）を改善するには、Webページの表示速度を向上させる必要があります。以下に3つの方法を紹介します。
Webページの表示にはサーバーの処理速度が重要です。サーバーの処理速度を向上させる方法として、以下の2つがあります。
- CDN（Content Delivery Network）の導入
CDNはスピーディーなコンテンツ配信を可能にするネットワークです。CDNの導入により、サーバーの負荷を軽減させることができ、処理速度の向上が期待できます。 - サーバーの変更
サーバーの劣化や容量不足などが処理速度の遅さの原因となる場合、サーバー自体を変更することで処理速度を向上させることができます。
これらの方法は費用がかかる場合もありますので、費用をかけずに対策をしたい場合は次の方法を試してみてください。
Webページで使用される画像は読み込みに時間がかかることがあります。画像を最適化することで読み込み速度を改善することができます。以下に主な方法を紹介します。
- 画像の精査
不要な画像を削除したり、必要な画像を最小限にすることで読み込み速度を向上させることができます。 - 画像の縮小や解像度の調整
不要なほど大きな画像を使用している場合は、サイズを小さくすることで読み込み速度を改善できます。 - 画像の圧縮
画像の圧縮は、データ量を減らして画像を軽くする方法です。画像の圧縮ツールを使用することで簡単に圧縮することができます。
Webページで使用していないCSSやJavaScriptは削除することで、読み込み速度の改善が期待できます。Google Chromeの開発者ツールを使用して、不要なCSSやJavaScriptを特定し、削除することができます。
FID（First Input Delay）を改善するためには、JavaScriptの最適化が重要です。
- 不要なJavaScriptを削除する
使っていないJavaScriptがある場合は、削除して読み込まないようにしましょう。不要なJavaScriptを見つける方法は、以前の回答「使用していないCSSとJavaScriptを削除する」を参考にしてください。 - JavaScriptの軽量化をする
JavaScriptのコードを軽量化する作業です。JavaScript内に不要な改行や空白があると、重くなってしまいます。軽量化は、JavaScriptの動作に影響を与えずに不要な部分を削除して軽量化する方法です。 - 長いタスクを分割する
JavaScriptの中に処理に時間がかかる長いタスクがある場合は、分割することが効果的です。長いタスクとは、時間がかかる処理を指します。
タスクを分割すると、処理時間が短くなり、FIDが改善されます。具体的な分割方法には、特定の操作に関連するJavaScriptを必要なときに動的に読み込む方法があります。これにより、最初のページ読み込み時に必要のないコードを読み込まず、処理時間を短縮することができます。
CLS（Cumulative Layout Shift）を改善するためには、画像や動画、フォントのずれを防ぐ工夫が必要です。
- コンテンツのサイズを指定する
画像や動画のサイズをあらかじめ指定すると、ずれが起こりにくくなります。コードを使って、画像や動画の幅と高さを指定します。この指定によって、コンテンツの配置が安定し、ずれが少なくなります。 - Webフォントを最適化する
Webフォントは、インターネット経由でフォントデータを取得して表示する技術です。Webフォントを使用すると、CLSに影響が出る可能性があります。もし、SEO（検索エンジン最適化）を重視する場合は、Webフォントを使わない方が良いでしょう。 - 動画や画像の量を減らす
画像や動画の量を減らすこともCLSの改善に役立ちます。1つのページに多くの画像や動画があると、レイアウトのずれが起こりやすくなります。特に広告バナーを複数使っている場合は、表示に時間がかかりずれが生じる可能性があります。
これらの方法を試してみてください。画像や動画、フォントのずれを防ぐ工夫によって、CLSを改善できます。
これらのポイントを覚えて、質の高いコンテンツとコアウェブバイタルの両方に注力することが大切です。良いページエクスペリエンスを提供するために改善することを目指しましょう！
