ウェブサイトのパフォーマンスは、ページの読み込み速度だけで決まるものではありません。コンテンツが数秒以内に表示されたとしても、ボタンの反応が遅かったり、レイアウトが予期せずずれたりすると、訪問者はストレスを感じ、体験が損なわれてしまいます。では、ウェブサイトのパフォーマンスが良好かどうかは、どのように判断すればよいのでしょうか？Core Web Vitalsは、読み込み速度、インタラクティブ性、視覚的な安定性を測定するGoogleの主要なパフォーマンス指標です。このガイドでは、Core Web Vitalsの3つの指標とその推奨しきい値、そしてウェブサイトのパフォーマンスを測定・改善するために使えるツールについて解説します。
Core Web Vitalsとは？
Core Web Vitalsは、ウェブサイトにおけるユーザー体験の重要な側面を測定するためにGoogleが導入したパフォーマンス指標です。これらの指標は、読み込みパフォーマンス、インタラクティブ性、視覚的な安定性という3つの主要な要素に焦点を当てています。つまり、ページがどれだけ速く読み込まれるか、ユーザーがどれだけスムーズに操作できるか、そして読み込み中にコンテンツが安定しているかを、ウェブサイト運営者が把握するのに役立ちます。
ウェブサイトのパフォーマンスは、ページが開く速さだけの問題ではありません。コンテンツが短時間で読み込まれたとしても、ボタンをクリックできるようになるまで待たされたり、ページのレイアウトが予期せず変化したりすると、全体的な体験は良くないものになりかねません。Core Web Vitalsは、こうした問題を特定し、ウェブサイトのパフォーマンスを改善するための測定可能な目標を示してくれます。
現在、GoogleはLargest Contentful Paint（LCP）、Interaction to Next Paint（INP）、Cumulative Layout Shift（CLS）という3つのCore Web Vitals指標を使用しています。各指標はユーザー体験の異なる側面を測定するため、ある指標を改善したからといって、他の2つの指標も改善されるとは限りません。
Core Web Vitalsが重要な理由
ウェブサイトは、訪問者にスムーズで信頼性の高い体験を提供する必要があります。ページの読み込みに時間がかかりすぎると、ユーザーは必要な情報にたどり着く前に離脱してしまうかもしれません。同様に、ボタンの反応が遅かったり、ページ上の要素が予期せず動いたりすると、訪問者はストレスを感じ、目的の操作を完了しにくくなります。
Core Web Vitalsを活用すれば、ウェブサイト運営者は個人的な印象だけに頼るのではなく、測定可能なパフォーマンスデータに基づいてこれらの問題を特定できます。たとえば、開発者が高性能なコンピューターでウェブサイトをテストし、読み込みが速いと感じたとしても、古いモバイル端末や低速なインターネット回線を使用している訪問者にとっては、読み込みにずっと長い時間がかかっている場合があります。
こうした違いがあるからこそ、パフォーマンスの監視が重要になります。Core Web Vitalsのデータを分析することで、開発者はウェブサイトのどの部分に改善が必要かを特定し、最適化の取り組みが期待どおりの成果を上げているかを判断できます。
Core Web Vitalsは、検索エンジン最適化（SEO）にも関係しています。Googleはランキングシステムにおいてページエクスペリエンスのシグナルを使用していますが、Core Web Vitalsのスコアが良好だからといって、必ずしも掲載順位が上がるわけではありません。関連性の高いコンテンツをはじめ、その他多くの要素も引き続き重要です。そのため、これらの指標の改善は、有用でアクセスしやすく、信頼性の高いウェブサイトを構築するための幅広い戦略の一部として捉えるべきです。
Core Web Vitalsの3つの指標とは？
Core Web Vitalsの各指標は、ウェブサイトのパフォーマンスの特定の側面に焦点を当てています。それぞれの仕組みを理解することで、パフォーマンスの問題を特定し、適切な最適化手法を選びやすくなります。
Largest Contentful Paint（LCP）とは？
Largest Contentful Paint（LCP）は、最初に表示されるビューポート内で最も大きな画像またはテキストブロックが表示されるまでにかかる時間を測定します。この指標は、ページのメインコンテンツがユーザーに表示されるタイミングを推定するのに役立ちます。
たとえば、訪問者がブログ記事を開いたとします。ページの背景やナビゲーションメニューはほぼすぐに表示されても、メインの見出しやアイキャッチ画像の読み込みには数秒かかる場合があります。このような状況では、一部の要素がすでに表示されていても、訪問者はページがまだ読み込み中だと感じるかもしれません。良好なLCPスコアは2.5秒以下です。値が2.5秒から4秒の間であれば、改善が必要です。LCPの値が4秒を超える場合は、不良とみなされます。
LCPには、サーバーの応答時間の遅さ、サイズの大きな画像、レンダリングをブロックするCSSやJavaScript、メインコンテンツの検出の遅れなど、さまざまな要因が影響します。
LCPを改善するために、ウェブサイト運営者は次のような対策を講じることができます。
- 画像を最適化する：画像のファイルサイズを削減し、必要に応じてWebPやAVIFなどの最新フォーマットを使用します。
- サーバーの応答時間を改善する：ウェブサイトに適している場合は、効率的なホスティングリソース、キャッシュ、コンテンツデリバリーネットワーク（CDN）を活用します。
- メインコンテンツを優先する：重要な画像をブラウザがHTMLソースから直接検出できるようにし、必要に応じてその読み込みを優先させます。
- レンダリングをブロックするリソースを減らす：ブラウザによるメインコンテンツの表示を妨げるCSSファイルやJavaScriptファイルを最適化します。
- LCP画像を遅延読み込みしない：LCP要素になる可能性が高い画像の読み込みを遅らせると、ページが遅く感じられることがあります。
これらの手法により、ユーザーがメインコンテンツの表示を待つ時間を短縮できます。ただし、最も効果的な解決策は遅延の原因によって異なるため、変更を加える前にページを測定することが重要です。
Interaction to Next Paint（INP）とは？
Interaction to Next Paint（INP）は、ユーザーが操作した際にウェブサイトがどれだけ素早く反応するかを測定します。ボタンのクリックやキーの入力といったユーザーの操作から、ブラウザが次に画面を更新して表示するまでの遅延を評価します。
たとえば、オンラインストアで訪問者が「カートに追加」ボタンをクリックしたとします。ブラウザがカートを更新するまでに目に見えて時間がかかると、訪問者はボタンが機能しなかったと思い込み、もう一度クリックしてしまうかもしれません。これは混乱を招き、場合によっては操作の重複につながることもあります。
INPは、ユーザーの訪問中を通じてページの応答性を測定することで、このような問題の特定に役立ちます。ブラウザが最初の操作の処理を開始するまでの遅延のみを測定していたFirst Input Delay（FID）とは異なり、INPはページが表示されている間全体にわたる操作体験を考慮します。良好なINPスコアは200ミリ秒以下です。200ミリ秒を超え500ミリ秒以下の値は改善が必要で、500ミリ秒を超える値は不良とみなされます。
ブラウザはユーザーの入力に応答して画面を更新する前にスクリプトを実行しなければならない場合があるため、JavaScriptはINPが悪化する一般的な原因となっています。実行時間の長いタスクがあると、ブラウザが操作を迅速に処理できなくなります。
INPを改善するために、開発者は次のような手法を活用できます。
- 不要なJavaScriptを削減する：使用されていないコードを削除し、現在のページで必要のないスクリプトを読み込まないようにします。
- 長いタスクを分割する：大きなJavaScriptタスクを小さなタスクに分割し、ブラウザがユーザーの操作を処理できる機会を増やします。
- イベントハンドラーを最適化する：操作に関連する関数は、できる限りシンプルかつ効率的に保ちます。
- 不要なDOM更新を避ける：一度に多くの要素を更新すると、レンダリング時間が長くなり、次の画面更新が遅れる可能性があります。
- サードパーティスクリプトを減らす：アナリティクスツール、広告スクリプト、埋め込みサービスは処理リソースを消費し、応答性に影響を与えることがあります。
INPを改善するには、JavaScriptファイルの合計サイズを減らすだけでは不十分です。開発者は、スクリプトがいつ実行されるのか、そして操作の後にブラウザがどれだけの処理を行う必要があるのかも理解する必要があります。
Cumulative Layout Shift（CLS）とは？
Cumulative Layout Shift（CLS）は、ウェブページの視覚的な安定性を測定します。ページの表示中に、表示されている要素の位置が予期せず変化することに焦点を当てています。
たとえば、訪問者が記事を読んでいる最中に、上部に広告が表示されたせいでテキストが突然下に移動したとします。訪問者がちょうどリンクをクリックしようとしていた場合、この予期しない移動によって別の要素をクリックしてしまうかもしれません。このようなレイアウトの変化は、特に表示領域が限られているモバイル端末において、ウェブサイトを使いにくくする原因となります。良好なCLSスコアは0.1以下です。0.1を超え0.25以下のスコアは改善が必要で、0.25を超えるスコアは不良とみなされます。
予期しないレイアウトのずれは、よくあるいくつかの問題によって引き起こされます。サイズが指定されていない画像、動的に挿入される広告、遅れて読み込まれるコンテンツ、テキストの見た目を変化させるウェブフォントなどは、いずれも視覚的な安定性に影響を与える可能性があります。
CLSを改善するには、次のような手法が役立ちます。
- 画像のサイズを指定する：画像の幅と高さを指定するか、CSSのアスペクト比を使用して、画像が読み込まれる前に必要なスペースを確保します。
- 広告用のスペースを確保する：広告コンテナに十分なスペースを割り当て、広告が表示されたときに周囲のコンテンツが移動しないようにします。
- 既存のコンテンツの上に新しいコンテンツを挿入しない：新しい要素を表示する必要がある場合は、ユーザーがすでに見ているコンテンツを予期せず動かさない位置に配置します。
- フォントの読み込みを最適化する：適切なフォント読み込み戦略とフォールバックフォントを使用して、テキストレイアウトの予期しない変化を抑えます。
- 適切なCSSアニメーションを使用する：可能な場合は、レイアウトの変化を引き起こすプロパティではなく、transformやopacityなどのプロパティに基づくアニメーションを優先します。
すべてのレイアウトのずれが有害というわけではないことを理解しておくことが重要です。ユーザーの操作に直接反応して発生する変化は、想定内のものである場合があります。CLSは予期しない視覚的な不安定さに焦点を当てており、レイアウトのずれの影響範囲と移動距離に基づくスコアリング方法を採用しています。
Core Web Vitalsの推奨しきい値とは？
Googleは、ウェブサイト運営者が自分のページで良好なユーザー体験を提供できているかを判断できるよう、具体的なしきい値を定めています。これらのしきい値によって、パフォーマンスは「良好」「改善が必要」「不良」の3つのカテゴリに分類されます。
これらのしきい値は、開発者が各指標を個別に評価するのに役立ちます。ただし、1回のテストだけでは、ウェブサイトが常に良好な体験を提供しているかどうかを判断するには不十分です。
Googleは、モバイルとデスクトップの結果を別々に扱い、ページ訪問の75パーセンタイルでCore Web Vitalsを評価することを推奨しています。つまり、各指標について、測定された訪問の少なくとも75%が「良好」のしきい値を満たしている必要があります。
たとえば、あるウェブサイトの75パーセンタイルにおけるLCPの値が2秒だったとします。これは、測定されたページ訪問の75%でLCPが2秒以下であることを意味し、推奨しきい値を満たしています。
ウェブサイトは、最も優れたスコアだけに注目するのではなく、3つの指標すべてで「良好」のしきい値を満たすことを目指すべきです。
Core Web Vitalsの測定ツールとは？
Core Web Vitalsは、Googleが提供するいくつかのツールを使って測定できます。これらのツールは、開発者がウェブサイトのパフォーマンスを把握し、改善が必要な箇所を特定するのに役立ちます。
PageSpeed Insights
PageSpeed Insightsは、Core Web Vitalsを確認するための最も便利なツールの1つです。利用可能な場合は実際のユーザーデータを、さらにシミュレーションテストで収集したラボデータの両方を提供します。また、ページのパフォーマンスを改善するための提案も表示されます。
Google Search Console
Google Search ConsoleにはCore Web Vitalsレポートが含まれており、どのページグループが良好なユーザー体験を提供し、どのページグループに改善が必要かを確認できます。実際のユーザーデータを使用するため、ウェブサイト運営者は複数のページにわたるパフォーマンスの問題を特定できます。
Chrome DevToolsとLighthouse
Chrome DevToolsとLighthouseを使えば、開発者は管理された環境でページのパフォーマンスをテストできます。JavaScriptの実行、画像の読み込み、レイアウトのずれなど、Core Web Vitalsに影響を与えるさまざまな要因に関する問題を特定できます。
フィールドデータとラボデータの違いとは？
Core Web Vitalsは、フィールドデータとラボデータという2種類のデータを使って評価できます。両者の違いを理解することで、開発者はテスト結果を正しく解釈し、ウェブサイトのパフォーマンスを改善するための適切なアプローチを選択できます。
フィールドデータ
フィールドデータは、実際のユーザーがウェブサイトを閲覧する際に収集されるデータです。さまざまなデバイス、ネットワーク接続、ユーザー操作など、実際の閲覧状況が反映されます。
このデータは、ウェブサイトが実際の環境でGoogleの推奨するCore Web Vitalsのしきい値を満たしているかを把握するのに特に役立ちます。
ラボデータ
ラボデータは、Lighthouseなどのツールを使用し、管理されたテスト環境で収集されるデータです。開発者がパフォーマンスの問題を再現し、その考えられる原因を調査するのに役立ちます。
フィールドデータとは異なり、ラボデータは実際のユーザー体験をすべて反映しているわけではありません。そのため、ラボテストと実ユーザーの測定とで、ウェブサイトの結果が異なる場合があります。
Core Web Vitalsを改善する方法
Core Web Vitalsを改善するには、読み込み速度、インタラクティブ性、視覚的な安定性に影響を与えている問題を特定する必要があります。適切な解決策は、どの指標のパフォーマンスが低いかによって異なります。
Largest Contentful Paint（LCP）を改善する
LCPを改善するには、表示される最大のコンテンツ要素をできるだけ早く読み込むことに重点を置く必要があります。一般的な改善策としては、画像の最適化、信頼性の高いウェブホスティングサービスの選択、サーバー応答時間の短縮、キャッシュの有効化、重要なリソースの読み込みにおける不要な遅延の回避などが挙げられます。
Interaction to Next Paint（INP）を改善する
INPは、実行時間の長いJavaScriptタスクを減らし、メインスレッドでの不要な処理を最小限に抑えることで改善できます。また、イベントハンドラーを最適化し、ユーザーがクリック、タップ、入力した後にブラウザが過剰な処理を行わないようにすることも大切です。
Cumulative Layout Shift（CLS）を改善する
CLSを減らすには、画像、動画、広告などの要素が読み込まれる前に、それらのためのスペースを確保しておく必要があります。既存のコンテンツの上に新しいコンテンツを予期せず挿入することは避け、可能な限り視覚要素には一貫したサイズを使用しましょう。
まとめ
Core Web Vitalsは、読み込みパフォーマンス、インタラクティブ性、視覚的な安定性の観点から、ユーザーがウェブサイトをどのように体験しているかを開発者が理解するのに役立ちます。LCP、INP、CLSを測定することで、ウェブサイト運営者はパフォーマンスの問題を特定し、ページをより使いやすくするための改善に優先順位をつけることができます。
定期的な監視、実際のユーザーデータ、的を絞った最適化によって、ウェブサイトは長期にわたって良好なCore Web Vitalsの結果を維持できます
よくある質問
1. フィールドデータとラボデータの違いは何ですか？
フィールドデータはウェブサイトを訪問した実際のユーザーから得られるデータで、ラボデータは管理されたテスト環境で収集されるデータです。フィールドデータは実際のユーザー体験を反映するのに対し、ラボデータは開発者がパフォーマンスの問題を再現・診断するのに役立ちます。
2. Core Web Vitalsのスコアを改善するにはどうすればよいですか？
画像の最適化、不要なJavaScriptの削減、サーバー応答時間の改善、キャッシュの有効化、予期しないレイアウトのずれの防止によって、Core Web Vitalsを改善できます。
