Core Web Vitals とは何か、そしてそれを最適化する方法

公開: 2023-06-12

2021 年、Google はページエクスペリエンスをランキング要素として組み込みました。その主な目的は、Web パフォーマンスを向上させることです。ページエクスペリエンスを更新すると、サイトを Google 検索結果にランク付けしたい場合、コアウェブバイタルを考慮することが重要な要素になります。

ユーザーが Google で特定のキーワードを検索したときに、どのサイトを上部に表示し、どのサイトを下部に表示するかを Google がどのように決定するか。まあ、内容を第一に考えているのは間違いありません。コンテンツは常にランキングの上位を占めますが、コンテンツとは別に、Google はキーワード、ページ内でのそれらのキーワードの使用状況、バックリンクなど、ウェブページの他の多くの要素も測定します。ページのパフォーマンスもその 1 つです。 Google は、コアウェブバイタルによってページのパフォーマンスを測定します。

この記事では、Core Web Vitals と、それを最適化して検索結果で上位にランク付けし、より多くのトラフィックを獲得する方法について説明します。

コアウェブバイタルとは

最大コンテンツフルペイント、最初の入力遅延、累積レイアウトシフトは、Core Web Vital を構成する 3 つの主要なパフォーマンス指標であり、ユーザーにとってページがどれだけ速く効率的に読み込まれるか、また Web サイトの要素がどの程度インタラクティブで安定しているかを測定します。ロードプロセス全体を通して残ります。

より深く理解するために、さらに分解してみましょう。

1.LCP (最大コンテンツフルペイント)

LCP は、サイトのスクロールせずに見える部分の最大の要素 (写真、ビデオ、アニメーション、テキストなど) がどれだけ早く読み込まれて表示されるかを評価します。

良好な LCP は 2.5 秒ですが、2.5 ～ 4 秒の間は改善が必要で、4 秒を超えると Google では不十分とみなされます。

内容が充実した最大のペイント統計

最大の Contentful Paint は、Google Lighthouse パフォーマンススコアの 25% を占めます。
モバイル URL の 43% とデスクトップ URL の 44% が、2.5 秒の最大コンテンツフルペイントベンチマークに合格しています。
調査によると、平均的な B2B Web サイトのモバイル Largest Contentful Paint スコアは 7.05 秒で、合格点を獲得するために必要な 2.5 秒のスコアをはるかに上回っています。
調査によると、平均的な小売 Web サイトのモバイル Largest Contentful Paint スコアは 9.17 秒で、合格点を獲得するために必要な 2.5 秒のスコアをはるかに上回っています。

2. FID (最初の入力遅延)

ページの FID は、クリックやタップなど、ユーザーによるページとの最初の対話に応答して、ブラウザーがイベントハンドラーの処理を開始するまでにかかる時間です。

良好な FID は 100 ミリ秒未満ですが、100 ～ 300 ミリ秒の間は改善が必要で、300 ミリ秒を超えると不良とみなされます。

最初の入力遅延の統計

最初の入力遅延は、Google Lighthouse パフォーマンススコアの 25% を占めます。
モバイル URL の 89% とデスクトップ URL の 99% が、100 ミリ秒の初回入力遅延ベンチマークを満たしています。

3. CLS（累積レイアウトシフト）

CLS は、ユーザーが予期しないレイアウト変更に遭遇する頻度を定量化するのに役立つため、視覚的な安定性を測定するためのユーザー中心の指標として役立ちます。これは視覚安定性測定の重要な側面です。

CLS は 0.1 未満が良好ですが、0.1 ～ 0.25 の間は改善が必要で、0.25 を超えると不良とみなされます。

累積レイアウトシフト統計

累積レイアウトシフトは、Google Lighthouse パフォーマンススコアの 5% を占めます。
モバイル URL の 46% とデスクトップ URL の 47% が、累積レイアウトシフトベンチマーク .1 をパスしています。

なぜ Core Web Vitals が重要なのか

Core Web Vitals のようなツールは、検索結果におけるサイトの位置を高めるのに役立ちます。これらは、サイトがどの程度うまく機能しているか、どこを改善できるかを Google に伝えるため、非常に重要です。

Core Web Vitals は、ランキング要素としての UX の重要性を間違いなく高めます。

したがって、コンテンツの品質がほぼ同等の分野で競合している場合、Core Web Vitals に合わせて最適化することで大きな違いが生まれます。つまり、Google が同じコンテンツ品質の 2 つのページを表示する必要がある場合、Google は、コアウェブバイタルスコアが良好。ウェブサイト上の質の高いコンテンツに代わるものはないということを忘れないでください。

Google のジョン・ミューラー氏が Core Web Vitals について語る

Core Web Vitals についてもう 1 つ覚えておくべきことは、それがランダムなランキング要素ではないということです。また、ランクアップ後（ユーザーが訪問したとき）のサイトのユーザビリティにも影響します。 (他の SEO の取り組みによって) より多くのトラフィックを獲得し、コンバージョン率が低い場合、そのトラフィックはコンバージョン率が高い場合ほど価値がありません (UX/速度がコンバージョン率に影響を与えると仮定すると、通常はそうなります)。

簡単に言えば、堅固な Core Web Vitals を確立することは、検索エンジンの最適化以上の意味があります。すべての Web サイト所有者は、訪問者の全体的なエクスペリエンスを向上させるために努力する必要があります。

ページのコンテンツが優れている場合でも、検索エンジンで上位にランクされるように Web サイトのあらゆる側面が最適化され、対象ユーザーにサイトが表示されるようにする必要があります。 Core Web Vitals では、ユーザーエクスペリエンスの重要性も強調しています。

Core Web Vitals の測定方法

いくつかのテスト、レポート、拡張機能を利用して、サイトの Core Web Vitals を調べることができます。

その中で最も重要なものは次のとおりです。

PageSpeed Insights の Core Web Vitals 評価。
Google Search ConsoleのCore Web Vitalsレポート。
Core Web Vitals Chrome 拡張機能。

1. PageSpeed Insights のコア Web Vitals 評価

Google PageSpeed Insights (PSI) は 2 つのセクションに分かれています。

実際のユーザーが何を経験しているかを判断する (Core Web Vitals の評価)
パフォーマンス上の懸念事項 (検査データ、PSI スコア) を特定します。

Core Web Vitals スコアを向上させるには、最初の部分に集中してください。フィールドデータレポートには、この分析が組み込まれています。この調査のデータは、Chrome ユーザーエクスペリエンスレポート (CrUX) から収集されています。このデータは、サイトとの実際のユーザーのやり取りに基づいています。 Google は、検索エンジンのランキングを決定する際に、これらのフィールドの結果を考慮します。

PSI の「診断」セクションも、次の 3 つの指標のいずれかを変更する可能性がある要因について詳しく学ぶための優れたリソースです。

PSI は、全体的な最適化スコアを決定し、最適化の推奨事項を提供するときに、実際のユーザーのメトリクスとラボデータを考慮します。

この情報は役に立ちますが、研究室内の特定のデバイスとネットワークを使用して管理された環境で収集されます。ただし、サイトのゲストの中には、古いテクノロジーや電力不足の接続を使用している人もいます。そのため、ラボの結果とサイトの実際のパフォーマンスを比較するのは得策ではありません。

PSI は常にフィールドの概要を提供するとは限りません。

小規模な Web サイトによくあることですが、CrUX が現場から十分なデータを収集していない場合、このような問題が発生します。ありがたいことに、フィールドデータを収集できる追加のソースがあります。

2. Google Search Consoleのコアウェブバイタルレポート

モバイル用とデスクトップ用の 2 つの新しい Core Web Vitals レポートが Google Search Console (GSC) に追加されました。

各レポートは、フィールドデータと URL グループのパフォーマンスに関する情報を提供します。

これらのレポートは、複数の URL にわたる一般的な問題を発見するのに最適です。したがって、1 ページだけではなく、Web サイト全体の情報を受け取ることになります。

たとえば、最大の要素が画像である同一のページが多数ある場合、LCP メトリクスはそれぞれのページで同じになります。この状況では、GSC は各ページで LCP の問題を発見します。

簡単に言うと、これらの新しい GSC レポートは、サイト全体にわたる Core Web Vitals のパフォーマンスを追跡するための最も注目すべきアプローチです。

3. Chrome ユーザーエクスペリエンスレポート (CrUX) を使用してフィールドデータを取得する

CrUX データセットには次の 2 つの方法でアクセスできます

Chrome UX Report API - この開発者にアクセスするには、JavaScript と JSON に精通している必要があります。
BigQuery – Google Cloud プロジェクトと SQL スキルが必要です。

PSI または GSC にページを渡すだけではなく、さらに多くの作業が必要になります。ただし、データを整理して視覚化するためのより多くのオプションが提供されます。たとえば、BigQuery には、データをスライスしたり、他のデータセットと結合したりする機能があります。

実装するためのリソースと技術的知識がある場合は、両方の戦略を試してください。

Core Web Vitals に関するいくつかの重要な統計

上位 100 のデスクトップドメインの 56% が Core Web Vitals を通過
大きなブランド効果 – 主要ブランドは、パフォーマンスが低くても上位にランクされます。
2022 年 2 月にモバイルトップ 100 の 61% が Core Web Vitals を通過
2022 年 2 月の米国の上位 100 ドメインの平均読み込み時間は、デスクトップで 2.38 秒、モバイルで 2.32 秒で、Google の妥当なしきい値である 2.5 秒を下回りました。
2022 年 2 月、デスクトップとモバイルの平均 CLS スコアはそれぞれ 0.11 と 0.08 でした。上位 100 サイトのモバイルの平均 CLS スコアが Google の適切なしきい値である 0.1 を下回ったのはこれが初めてです。
2020 年 1 月には、デスクトップの 22% とモバイルのトップ 100 ドメインの 27% のみがそれぞれ Core Web Vitals を通過しました。 2022 年 2 月まで遡ると、この割合はデスクトップで 56%、モバイルで 62% と 2 倍以上に増加しました。これは、トップパフォーマンスのドメインが Web パフォーマンスを大幅に向上させていることを示しています。
トップ 100、B2B、ヘルスケア、辞書/参照サイトの平均 LCP は、両方のデバイスで 2.5 秒以下です。
平均すると、旅行向けのモバイル LCP は辞書/リファレンスサイトの 1.6 倍悪いです。
平均して、旅行向けデスクトップ LCP は B2B ドメインよりも 1.5 倍悪いです。
位置 1 の URL は、位置 9 の URL よりも Core Web Vitals 評価に合格する可能性が 10% 高くなります。
ポジション 1 からポジション 5 まで、各ポジションの Core Web Vitals 評価の合格率は 2% 減少します。

コアウェブバイタルを最適化する方法

Core Web Vitals とその機能をしっかりと理解したので、次は Core Web Vitals を改善するための推奨手順に目を向けることができます。テスト結果によって、スコアを上げるために必要な手順が決まることに注意してください。したがって、PageSpeed Insights (または使用する他のテストツール) によって行われたアドバイスや提案を考慮することが重要です。

以下は、Core Web Vitals スコアを上げるための実証済みの基本戦略です。

1.コンテンツ配信ネットワークを使用する

CDN を使用すると、サイトのパフォーマンスが大幅に向上します。 CDN を使用するサイトは比較的高速に読み込まれます。なぜ？ CDN を使用すると、サーバーとエンドユーザー間のデータ転送が迅速になるためです。

CDN は、相互接続されたサーバーの広大なネットワークです。 CDN を使用すると、Web サイトのコンテンツを多くのサーバーに保存できます。ユーザーがサイトにアクセスすると、地理的に最も近いサーバーがユーザーの Web サイトをレンダリングし、データ転送時間を短縮します。

CDN を使用すると、ユーザーの LCP 読み込み時間を短縮できます。最初のバイトまでの時間 (TTFB) を使用すると、短縮することもできます。

2.画像を最適化する

LCP を向上させるもう 1 つの方法は、画像の最適化です。画像の解像度が高い場合、画像のサイズが大きくなり、読み込みにかなりの時間がかかるため、LCP スコアに悪影響を及ぼします。

圧縮画像を使用すると読み込みが速くなります。 TinyJPG などの多くのサイトでは、品質を損なうことなく画像のサイズを無料で縮小できます。画像のサイズと寸法が正しいことを確認することで、画像をさらに最適化できます。

したがって、サイトの特定の領域に不必要な画像サイズを使用しないようにすることが賢明です。適切な属性を含めることで、ブラウザーがページのパーツに理想的な量のスペースを提供できるようになり、レイアウトを定期的に変更する必要性が減ります。

ソースコードを変更することで、メディアファイルの幅と高さのプロパティを変更できます。

3.遅延読み込みを実装する

LCP とページの読み込み時間はどちらも、遅延読み込みを使用するとメリットが得られます。 Smush は、遅延読み込みを提供するいくつかの WordPress プラグインの一例にすぎません。

遅延読み込みはオンデマンド読み込みとも呼ばれ、Web コンテンツのパフォーマンスを向上させる方法です。

遅延読み込みは、Web ページ全体を一度に読み込み、一度にレンダリングする一括読み込みとは対照的に、必要な部分のみを読み込み、ユーザーが必要とするまで残りの読み込みを遅らせます。

4.ウェブサイトのフォントを最適化する

Web サイトで使用するフォントは、画像と同じように読み込み時間に影響を与える可能性があります。これは、フォントのウェイトの組み合わせごとに、ブラウザがフォントファミリ全体を読み込む必要があるためです。

Web フォントの最適化は、サイトの速度を向上させる簡単な方法です。これは、最適化された Web フォントはユーザーのコンピュータ上で占有するスペースが少なくなり、読み込みがはるかに高速になるためです。

一方、関連する Web フォントがまだ読み込まれていない場合、ブラウザはテキストコンポーネントを自動的にレンダリングしない可能性があります。ただし、代替フォントに切り替えると、レイアウトが不要に変更され、CLS スコアが低下する可能性があります。

ウェブサイトのフォントを決めるときは注意してください。 3 つ以上のフォントを使用している場合は、各要素にそれぞれを適用するのではなく、グローバルフォントを使用して必要なタイプとウェイトを選択的に適用することをお勧めします。この方法を使用すると、フォントのダウンロードをコンテンツに厳密に必要なフォントに制限できます。

5. WordPress ホスティングをアップグレードする

サイトの読み込み時間が長すぎる場合は、ホスティングプランを変更する必要がある可能性があります。ホスティングを共有から専用に変更すると、FCP を大幅に向上させることができます。

最も安いものを選ぶのではなく、必要な機能をすべて備えた最高のホスティングサイトを選択するのが賢明な決定です。 WordPress ホストが提供するサービスの品質は、Web サイトの成功にとって非常に重要です。これは、ページの読み込み時間から安全性に至るまで、広範囲に影響を及ぼします。特に大規模な Web サイトや洗練された Web サイトを持っている場合は、ここで手を抜くことはできません。代わりに、ホスティングプロバイダーまたはプランをアップグレードすることは、Web サイトを最適化し、読み込み時間を短縮するための最も迅速かつ強力な戦略の 1 つです。

ホスティングについては、 Bluehost のレビューをご覧ください。

6.レンダリングをブロックするリソースを排除する

Web サイトのページは、付随する HTML、CSS、および JavaScript ファイルなしではレンダリングできません。これらのファイルにはすべて、ユーザーが見ようとしているものへのアクセスを禁止する可能性のあるスクリプトが含まれています。

ただし、レンダリングをブロックするリソースや不要な CSS またはスクリプトを削除することで、これらのスクリプトが UX に悪影響を与えるのを防ぐことができます (ひいては、Core Web Vitals の向上に役立ちます)。

これを実現するための方法は数多くあります。 1 つ目は、JavaScript と CSS から余分なスペースやコメントを削除することです。さらに、ファイルを結合することで JavaScript と CSS のサイズを削減できます。

7. JavaScript の読み込みを延期する

これはレンダリングをブロックする要素を排除するもう 1 つの方法であり、FID を大幅に強化します。

これにより、JavaScript ファイルの読み込みがブロックされるため、Web ページの読み込みが高速になります。

JS ファイルの読み込みを待つのではなく、ページの他のコンテンツを読み込みます。これに加えて、スクロールせずに見える範囲に表示される重要な CSS スクリプトを迅速に読み込むようにサイトを構成できます。これを実現するには、プライマリ CSS ファイルから素材を抽出し、それを Web サイトのコード内にインライン化します。

8.コンテンツキャッシュを実装します。

ユーザーエクスペリエンスの向上に関して言えば、スマートコンテンツキャッシュは自由に使える最も強力なツールの 1 つです。 HTTP プロトコルの中心的なコンテンツ配信技術では、キャッシュ、つまり以前のリクエストからのコンテンツの一時ストレージが使用されます。コンテンツのキャッシュポリシーで許可されている場合、配信チェーンのどの時点でもコンポーネントはコンテンツのコピーを保存して、後続のリクエストを高速化できます。

キャッシュは、コアウェブバイタルスコアの向上に大きく役立ちます。

9.ヒーロー画像をプリロードする

ヒーロー画像は通常、スクロールせずに見えるコンテンツの上に表示される最も重要な要素です。したがって、読み込みが速くなると、全体的な UX が大幅に向上します。 「rel=preload」リンク属性を使用すると、LCP を大幅に減らすことができます。これは、CSS または JavaScript でロードされたヒーロー画像に特に役立ちます。

10.他のコンテンツよりも広告やポップアップを優先しないでください。

CLS スコアが低いのは、上部にコンテンツを追加することによってページ上のコンテンツが移動した結果です。

広告、iframe、その他の形式の動的コンテンツ用のスペースを確保します。

画像やビデオと同様に、特定のスペースを割り当てないと、レイアウトが崩れるのは確実です。コンテンツがコンテナからあふれないようにするために、 overflow: hidden プロパティを使用し、適切なサイズのコンテナを選択します。

11.長いタスクを分割する

これは最優先事項でなければなりません。長いタスクによってメインスレッドが遅延すると、メインスレッドはユーザーからのリクエストに即座に反応できなくなります。 Web サイトを分割すると、パフォーマンスが大幅に向上します。これにより FID が削減され、UX が向上します

12.不要なサードパーティ製スクリプトの実行を停止または延期します。

独自の Web サイトのスクリプトがサードパーティのスクリプトと競合すると、予定通りに実行されない可能性があります。どのスクリプトがエンドユーザーにとって最も役立つかを検討し、優先順位を高くします。広告やポップアップのスクリプトをリストの一番上に置くべきではありません。

Searchmetrics SEO Visibility に基づいた Core Web Vitals の観点から、米国のトップ 10 ドメインがどのように活動しているか。

すべての指標とドメインが Core Web Vitals に合格するかどうかは、ドメインレベルで毎月報告されます。 2022 年 2 月には、Wikipedia デスクトップページの読み込み時間全体の 75% が 1.1 秒未満で、ドメインのスコアは FID (ミリ秒単位) と CLS の両方で 0 となり、Core Web Vitals を合格しました。

ランク	ドメイン	LCP	FID (ミリ秒)	CLS	CWVに合格しましたか？
1	ウィキペディア.org	1.1	0	0	はい
2	youtube.com	6.2	0	0.15	いいえ
3	フェイスブック.com	3.7	0	0.05	いいえ
4	アマゾン.com	2.0	25	0.2	いいえ
5	Google COM	1.1	0	0	はい
6	imdb.com	2.3	0	0.15	いいえ
7	インスタグラム.com	3.2	0	0.1	いいえ
8	merriam-ウェブスター.com	2.2	25	0	はい
9	ツイッター.com	3.4	0	0.05	いいえ
10	ブリタニカ.com	2.2	25	0	はい

Searchmetrics SEO Visibility metric に基づくモバイルデバイス CWV のトップ 10 。

可能な場合は、ドメインのモバイルバージョンが使用されました。ただし、これは主に CrUX データ収集に依存します。モバイルサイトのシェアがデスクトップよりも Core Web Vitals を上回っています。

ランク	ドメイン	LCP	FID (ミリ秒)	CLS	CWVに合格しましたか？
1	ウィキペディア.org	1.3	0	0	はい
2	m.youtube.com	2.3	0	0.1	はい
3	m.facebook.com	2.9	0	0	いいえ
4	アマゾン.com	1.9	0	0.1	はい
5	インスタグラム.com	4.4	0	0.25	いいえ
6	imdb.com	2.3	0	0	はい
7	Google COM	1.2	0	0	はい
8	merriam-ウェブスター.com	1.6	50	0	はい
9	ブリタニカ.com	1.7	25	0	はい
10	リンクドイン.com	1.4	0	0	はい

結論

Core Web Vitals は、あらゆる人の Web エクスペリエンスを向上させる革新的なツールです。これらの測定値は引き続き Google のランキングシステムに含まれます。

そのため、何も異常が見られない場合でも、常に監視することが重要です。

Web サイトの運営を成功させ続けるには、ユーザーエクスペリエンスを継続的に向上させることが重要です。数多くの便利なツールやプラグインが利用できるため、このプロセスは他の方法よりもはるかにシンプルかつ簡単になります。あるいは、それが難しいと思われる場合は、開発者を雇って代わりにそれを行うこともできます。