ScalenutがG2 Fall Leader 2022 - Content Creation部門に

公開: 2022-11-29

2021 年 6 月、Google は Core Web Vitals を主要なランキング要因として提案する主要なアルゴリズムを展開しました。これは、ページエクスペリエンスが SERP のランキングにおける重要な要素の 1 つになったことを意味します。

ページの信号に影響を与える主要な Web の重要な要素と、ページエクスペリエンスを改善する方法は? このブログでは、Core Web Vitals について知っておくべきことをすべて共有します。

Core Web Vitals とは何ですか?

Core Web Vitals は、Google のページエクスペリエンスシグナルの一部である速度指標であり、ユーザーエクスペリエンスを評価するために使用されます。メトリクスは、Largest Contentful Paint (LCP) を使用した視覚的負荷、Cumulative Layout Shift (CLS) を使用した視覚的安定性、First Input Delay (FID) を使用した対話性を評価します。

Core Web Vitals は、ページエクスペリエンスを改善するために次の指標を考慮します。

ページ読み込みのパフォーマンス
相互作用の容易さ
ページの視覚的な安定性

これらのメトリクスは、ユーザーが Web サイトと対話し、関与する方法に影響を与えるさまざまな要素について、独自の視点を提供します。開発者は「ユーザーエクスペリエンス」を総合的に考慮する必要がありますが、これらの独立した指標は、これらの変数を細かく分解して、サイト所有者が Web サイト全体の技術的な問題を特定して修正できるようにするのに役立ちます。

Core Web Vitals が重要な理由

コアウェブバイタルは Google のページエクスペリエンスシグナルの 1 つにすぎないため、SERP でのウェブサイトのランキングを自動的に変更することはできません。ただし、これらの指標で高いスコアを獲得すると、全体的なユーザーエクスペリエンスが向上し、Web サイトのランクが高くなる可能性があります。

コア Web バイタルファクターを改善する一般的な方法には、次のようなものがあります。

- 画像を最適化し、サーバーリクエストを減らすことで、LCP の読み込み速度を向上させます。

- 視覚的な安定性の向上。

- 最初の入力遅延を最小限に抑えることで対話性を向上させます。

ページエクスペリエンススコアが高くても、自動的に Google のトップになれるわけではないことに注意してください。たとえば、あなたの Web サイトの LCP スコアは高いが視覚的なデザインとレイアウトが貧弱である場合でも、スコアは低くてもデザインが優れているサイトほどユーザーフレンドリーではない可能性があります。

コアウェブバイタル指標

Google アルゴリズムは、主要な Web Vitals の 3 つの主要な要素をランキング要素と見なします。これらは：

最大コンテンツペイント (LCP)
最初の入力遅延 (FID)
累積レイアウトシフト (CLS)

ただし、いくつかの追加の Web の重要な要素もあります。これらは「Time to First Byte (TTFB) と First Contentful Paint (FCP)」です。「Total Blocking Time (TBT) と Time to Interactive (TTI) は、インタラクティブ性の測定に役立ちます。」

最大コンテンツペイント (LCP)

最大のコンテンツペイントは、Web ページ内のコンポーネントによって実行される最大のペイント操作です。このメトリックは、Web ページ上のすべてのコンテンツをレンダリングするために必要な作業量を測定します。

ページが大きくなると、正しくロードしてレンダリングするためにブラウザーからより多くのリソースが必要になります。

サイトの所有者は、快適なユーザーエクスペリエンスを提供するために、ページがすばやく読み込まれることを望んでいます。優れたユーザーエクスペリエンスには、読み込み時間の短縮が不可欠です。読み込みが速いページは、Google で上位にランクされる可能性が高くなります。

さらに、読み込み時間が短いページと比較して、読み込み時間が短いページはエンゲージメントとコンバージョン率に影響を与えることが示されています。

1.1 LCP は何を測定するのですか?

LCP は、ページが 1 つのビューポートにさまざまなコンテンツブロックを読み込むのにかかる時間を測定します。このメトリックは、コンテンツセクションが表示画面にレンダリングされる速度のみを考慮します。フォールドの下には何も考慮されません。

ページの最適な LCP は 2.5 秒です。

1.2 LCP を改善するには?

Page Speed のインサイトは、LCP 向けにページを最適化するための適切な提案を提供します。 LCP を改善するためのヒントをいくつか紹介します。

画像を最適化する:画像は、より軽量な形式と圧縮された画像で配信してください。 GZIP アクセラレーションを構成して、Web サーバーで圧縮を有効にします。
画像を適切な形式で配信し、画像を圧縮する画像圧縮プラグインを使用できます。
ほとんどすべての Web サイトは、モバイルファーストインデックスを使用して Google によってインデックス登録されています。その結果、LCP をモバイル向けに最適化することは、デスクトップ向けに最適化するよりも重要です。すべての画像は、レイアウトの仕様に合わせて縮小する必要があります。

重要なリソースをプリロードする:サーバーがビデオやフォントなどの重要なリソースをプリロードして、ユーザーが要求したときに準備ができていることを確認してください。これにより、ブラウザのキャッシュからの要求が少なくなるため、ページの読み込み時間が短縮されます。

サーバーの応答時間を短縮する:サーバーが要求に応答するのに時間がかかると、画面にページをレンダリングするのにかかる時間も増加します。その結果、LCP を含むすべてのページ速度統計に悪影響を及ぼします。ベストプラクティスは、コンテンツ配信ネットワーク (CDN) を使用するか、サーバーを最適化および分析することです。

レンダリングをブロックするリソースを削除する:ブラウザーは、サーバーから HTML ドキュメントを取得するときに DOM ツリーを解析します。 DOM に外部スタイルシートまたは JS ファイルが含まれている場合、ブラウザは DOM ツリーの残りの解析を続行する前に停止する必要があります。レンダリングをブロックするリソースは、LCP 時間の遅延の原因となる JS および CSS ファイルです。

累積レイアウトシフト (CLS)

累積レイアウトシフトは、Web ページが読み込まれた後に調整されるリンクやボタンを特定するのに役立つ指標であり、ページがレンダリングされた後にユーザーがサイトの要素を操作する際の難易度を反映します。つまり、ページの読み込み中に要素が画面上を移動するかどうかを確認します。

強力なユーザーエクスペリエンスには、優れた UX とデザインが必要です。また、Web ページを読んでいるときに要素が切り替わると、ユーザーはイライラします。 CLS は、開発者が Web サイトの画像やリンクが変化するかどうかを判断するのに役立ち、サイトの所有者がアクセシビリティを改善し、クリック率を高め、オンライン販売を増やすことができます。

2.1 CLS は何を測定するのですか?

CLS は、表示されているビューポート内の要素が、レンダリングされた 2 つのフレーム間で位置を変更するかどうかを決定します。簡単に言うと、このメトリックは、サイトの所有者が、ユーザーが特定のページのコンテンツを読んでいる間に、テキスト、ボタン、バナーなどのコンテンツがプッシュされているかどうかを判断するのに役立ちます。

位置を変える要素は、ユーザーを混乱させ、ページでのエクスペリエンスを妨げる可能性があるため、ページがユーザーのデバイスに読み込まれた後も、すべてのコンテンツが所定の位置にとどまるようにすることが重要です。

サイトの所有者は、0.1 以下の CLS を維持する必要があります。

2.2 CLS を改善するには?

CLS を最小限に抑えるためのベストプラクティスは次のとおりです。

どのメディアにも設定されたサイズの寸法を使用する:メディアを使用するときは常に、正しい寸法と設定を使用してください。不適切な寸法を設定すると、要素がページ上で移動し、CLS スコアが増加する可能性があります。
Flash オブジェクトを最小限に抑える: Flash オブジェクトを使用しすぎると、DOM と対話する隠しコードが含まれていることが多いため、CLS が増加する可能性があります。不要な Flash オブジェクトを避けることで、サイト全体のパフォーマンスを向上させ、要素の読み込みが遅くなる可能性を減らすことができます。
折りたたむ前に新しい UI 要素を追加する:新しい UI 要素をページに追加するときはいつでも、それらがレイアウト内の折りたたみの前に追加されていることを確認してください。これにより、新しく挿入された要素が既存の要素の上に配置されないようになり、移動して CLS ペナルティが発生する可能性があります。

最初の入力遅延 (FID)

FID は、ユーザーがページを操作してからページが応答するまでの経過時間です。対応力とも言います。

FID は、ユーザーがページを操作した後、ページが応答するまでにかかる時間を測定します。目標は、遅延を減らして、ユーザーがコンテンツをブラウジングしている場合でも、サイトの質問やフォームを操作している場合でも、楽しいエクスペリエンスを提供できるようにすることです。

3.1 FID は何を測定するのですか?

ページがユーザーからの要素入力を読み込むと、FID はその応答性を測定します。 FID は、このモードでクリックやキーの押下などのイベントのみをキャプチャします。

適切なユーザーエクスペリエンスを確保するには、FID を 100 ミリ秒未満に保つ必要があります。

FID は、現場でしか得られない情報であるため、定量化が困難です。これは、ユーザーデバイスの容量や視聴者が経験するインターネット速度など、制御できない要因がスコアに影響することを意味します。

3.2 FID を改善するには？

FID スコアを改善するための唯一の解決策はありません。ただし、いくつかの簡単なガイドラインに従うことで、大きな影響を与えることができます。

JavaScript を延期する:多くのユーザーは、ブラウザーの設定を変更して「Java をブロック」することにより、JavaScript をオフにします。これは FID のスコアに影響します。スクリプトをブロックまたは延期する必要がある場合は、スクロールせずに見える位置にページを読み込んだ後、できるだけ早く実行してください。
重要でないサードパーティスクリプトを削除する:サイトの機能に不可欠ではないサードパーティスクリプトをすべて削除します。これには、「ソーシャルメディアプラグイン」、広告、Google アナリティクススクリプトが含まれます。スクリプトが必要だが延期できる場合は、ページ読み込みプロセスのできるだけ早い段階で延期して、ユーザーのエクスペリエンスを向上させてください。画像と Flash のダウンロードを最小限に抑えます。
ブラウザーのキャッシュを使用する:これにより、ページで素材をより迅速に読み込むことができます。これにより、ユーザーのブラウザーでの JS タスクの読み込みが高速化されます。

その他の主要な Web Vitals パフォーマンスメトリックとは?

Core Web Vitals は、開発者が Web サイトのユーザーエクスペリエンスを向上させるために利用できる大量のデータを提供します。開発者は、自分のコードがサイト上のコンテンツの消費方法にどのように影響するか、および上記の主要な指標についても学ぶことができます。

これらの指標は、オンライン視聴者が Web ページに接続する方法に悪影響を与える可能性のあるラグタイムやその他の技術的変数を表します。そのため、訪問者がサイトで経験したことを評価するために使用できる他のいくつかの指標を見てみましょう。

最初のコンテンツペイント (FCP)

First Contentful Paint (FCP) は、ユーザーのブラウザーが DOM 要素 (画像、白以外のキャンバスコンポーネント、および SVG) を表示するのにかかる時間です。

このメトリックは、次の FCP スコアの範囲で使用できます。

0 ～ 2 秒: 緑 (高速)
2 ～ 4 秒: オレンジ (中程度)
4 秒以上: 赤 (遅い)

対話までの時間 (TTI)

インタラクティブまでの時間は、ユーザーのブラウザがページを開始してから最初の単純なリクエストを実行するのにかかる時間です。これには、スクリプトの読み込み、サーバーからのデータの収集、HTML のレンダリングなどが含まれます。

インタラクティブになるまでの時間のスコアは次のとおりです。

0 ～ 3.8 秒: 緑 (高速)
3.9 ～ 7.3 秒: オレンジ (中程度)
7.3 秒以上: 赤 (遅い)

総ブロッキング時間 (TBT)

総ブロック時間 (TBT) は、Web ページが特定のユーザー入力に応答するのにかかる時間をサイト管理者が判断できるようにする指標です。ミリ秒単位で計算され、さまざまな TBT スコアを持つこのメトリックは、不要な JavaScript を含むページを検出します。

0 ～ 300 ミリ秒: 緑 (高速)
300 ～ 600 ミリ秒: オレンジ (中程度)
600 ミリ秒以上: 赤 (遅い)

よくある質問

Q. Core Web Vitals は SEO に影響しますか?

回答: はい。Google によると、Core Web Vitals はランキングシグナルです。 Google の web.dev は、LCP、FID、および CLS を最適化してユーザーエクスペリエンスとランキングを向上させるための優れたガイダンスを提供します。

Q. Core Web Vitals はモバイル専用ですか?

回答: いいえ、Core Web Vitals はデスクトップサイトとモバイルサイトの両方に等しく影響します。ただし、デスクトップとモバイルの両方のページエクスペリエンスアップデートを個別に取得できます。

Q. Google が Core Web Vitals を導入したのはいつですか?

回答: Google は、サイト管理者がウェブサイトの速度とパフォーマンスを測定する方法として、2021 年 6 月に Core Web Vitals を導入しました。

Q. Web サイトの Core Web Vitals を確認するにはどうすればよいですか?

回答: Chrome DevTools は、Chrome ブラウザーにプリインストールされている開発者ツールです。右クリックして [検査] を選択するだけで、Chrome DevTools が起動します。 Chome DevTools パフォーマンスパネルを使用して、いくつかの Core Web Vitals メトリックを見つけることができます。 Web Vitals に注目してください。

Q. 累積的なレイアウトシフトは SEO に影響しますか?

回答: 累積レイアウトシフトは、視覚的な安定性を判断するための重要な指標です。予想外のレイアウト変更にユーザーが驚いた回数をカウントします。その結果、CLS スコアが低いほどコンテンツが安定していて変化していないことを示し、CLS スコアが高いほどコンテンツが変化していることを示します。

結論

パフォーマンスを向上させるために Web サイトに組み込むことができるベストプラクティスには、コードの縮小、プログレッシブエンハンスメントの使用、画像の最適化などがあります。これらのヒントに従うことで、訪問者に対して Web サイトの読み込みが速くなり、検索エンジンでのランキングの最適化にも役立ちます。

GTMetrix や Lighthouse などのツールを使用して、ページ速度のインサイトを完全に無料で確認できます。