コア ウェブ バイタルを理解する | それを改善する方法は?

公開: 2023-01-11

目次

コア ウェブ バイタルとは

Core Web Vitals は、Web サイトのユーザー エクスペリエンスを評価する際に考慮される一連の指標です。

Google は、より具体的で最高品質のコンテンツをユーザーに提供するために、コア アルゴリズムをほぼ毎年改善しています。

Core Web Vitals は、マーケターが気にかけるべき、新しく更新されたアルゴリズムの重要な部分になりました。 コンテンツの詳細を分析するのに役立ちます。

つまり、Google はコア ウェブ バイタル スコアを分析することで、ウェブサイトの UX (ユーザー エクスペリエンス) を判断します。

ただし、Google によると、優れた UX スコアが Web サイトをトップに押し上げるわけではありません。 むしろ、 200 の Google アルゴリズムのランキング要素の一部です。

Core Web Vitals が重要な理由

2021 年 6 月、Google はページ エクスペリエンスを Google の公式ランキング パラメータの重要なパラメータとして発表しました。

以前は、優れたユーザー エクスペリエンスを実現するために、いくつかのウェブサイトの要素は次のとおりでした。

  • HTTPS URL
  • 最小限の広告ポップアップ/邪魔にならないインタースティシャル
  • 安全なブラウジング
  • モバイルフレンドリー

ただし、 Google によると、全体的なページ エクスペリエンスを向上させるには、ウェブサイトに次の機能が必要です。

  • 中断のないインタラクション
  • 視覚的安定性
  • 素早い読み込み時間

そのため、Web サイトのコア Web バイタル スコアを改善すると、ユーザー エクスペリエンスと検索エンジンのランキングが向上します。

Core Web Vitals には何が含まれていますか?

コア Web バイタルには、次の 3 つの要素が含まれています。

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

Core Vitals とその重要性について理解できたので、次に Core Web Vitals を改善するためのヒントを見てみましょう。

ただし、コア Web バイタルをどの程度制御できるかは、使用している Web ホスティング会社とは別に、WordPress、Shopify など、Web サイトに使用している CMS/プラットフォームの種類にも依存します。

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

    最大コンテンツ ペイントしきい値の推奨事項

ユーザーの視点から見た Web サイトの読み込みにかかる時間は、Largest Contentful Paint として知られています。

簡単に言えば、ユーザーがそれぞれのリンクをクリックした後、Web サイトが画面上の主要なコンテンツを表示するのにかかる時間です。

LCPとは?

ウェブサイトがまったくないことよりも悪いことは何ですか?

遅いウェブサイト。

これで私を信頼してください。 ページの読み込み速度が遅いと、ユーザーは非常にイライラします。 彼らはあなたのページにアクセスするのを避け、代わりに競合他社のページにたどり着きます。

ただし、ページ上のエクスペリエンスを向上させるためにサイトの速度を最適化することは、多少技術的ですが、それだけの価値があります。

LCP は、TTFB や First Contextual Paint などの他のページ速度測定値とは異なります。

TTFB と First Contextual Paint は、実際のユーザーの視点からエクスペリエンスを測定しません。

一方、Largest Contentful Paint は、実際のユーザーがリンクをクリックしたときに体験することに重点を置いています。

LCP は、最も重要なコンテンツに焦点を当てています。 最大のコンテンツ ペイントと見なされる要素は次のとおりです。

  • <video> 要素
  • <img> 要素
  • <svg> 要素内の <image>
  • ブロックレベルの要素
  • 背景画像要素

ページ エクスペリエンスを向上させるには、LCP スコアを定期的に確認し、それに応じてページを最適化する必要があります。

Google によると、サイトの LCP スコアは 2.5 秒未満である必要があります。

LCP スコアを確認するには?

Google PageSpeed Insights使用して、サイトの LCP スコアを確認できます。

Google Search Console で LCP データを確認することもできます。

GSC に保存されているデータは、Chrome ユーザー エクスペリエンス レポートから抽出されます。

Google PageSpeed Insights では単一ページのレポートを表示できますが、GSC ではサイト全体の LCP データを表示できます。

そのため、手動で確認する代わりに、サイト全体の全体的なレポートを取得し、良い URL、悪い URL、醜い URL のリストを得ることができます。

それが私たちがそれを命名する方法ですが。 Google は、LCP スコアを 3 つのセクション (良い、改善が必要、悪い) に分類します。

良い LCP スコアを得るには、サイトのすべてのページが 2.5 秒以下の LCP スコアを維持していることを確認してください。

良い悪いぶさいくな
<=2.5秒2.5秒~4秒>4秒

大規模な Web ページで理想的な LCP スコアを維持することは容易ではありません。 さらに、CDN をインストールしても LCP は改善されません。

コードのクリーンアップからページからの画像の削除まで、サイトの LCP スコアを改善するには多くの労力が必要であり、その努力には価値があります。

LCPスコアを改善するには?

Google は、Web ページの LCP 指標を改善するための無限のヒントを提供しています。 Web ホスティング会社の変更から未使用のプラグインの削除まで、サイトの LCP スコアを改善するために、Web サイトで実践できるいくつかのことを以下に示します。

  • 余分なサード パーティのスクリプトを削除する

ブラウザがまだ Java Script を読み込んでいる間、ユーザーは Web ページを操作できません。

SEO の専門家は、Web サイトの LCP スコアを改善するために、最小限の Java スクリプトを Web サイトに配置することを提案しています。

Google Chrome DevTools の Coverage 機能を使用して、技術スタックに影響を与えずに削除または無効化できる Web サイトの JavaScript と CSS を分析および評価できます。

backlinko が実施した調査によると、サードパーティのスクリプトが読み込み時間に 34 ミリ秒の遅延を引き起こす可能性があることが示唆されています。

したがって、不要な JavaScript とレンダリングをブロックする CSS を削除して、LCP スコアを改善してください。

  • 遅延読み込みを設定する

Web サイトをスクロールしたときに画像が表示されたり消えたりする Web サイトにアクセスしたことがありますか?

まあ、それは遅延読み込みです。

遅延読み込みは、ユーザーがそのセクションまでスクロールしたときにのみ画像が表示されるため、LCP スコアを改善するのに役立ちます。

  • ウェブホストをアップグレードする

Web ホストと遅いサーバーの応答時間は、LCP に大きな影響を与える可能性があります。 TTFB (Time to First Byte) を使用して、Web サイトのサービス応答速度を分析できます。

TTFB が 200 ミリ秒 (ms) を超える場合は、サーバーを少し調整することをお勧めします。

たとえば、Web サイトが単一のサーバーで実行されている場合、CDN を使用してユーザーをルーティングできます。

最初のコンテンツと HTML ページをサーバー キャッシュすることもできます。

  • 大きなページ要素を削除する

Google PageSpeed Insights でウェブサイトを分析すると、読み込み時間を遅くしている大きな要素を含むページのレポートが見つかります。

Web サイトの画像、テキスト ファイル、ブロック要素、動画を圧縮または最適化できます。

LCP スコアを改善するためにサイトを最適化するときは、HTML に挿入された画像とともに、テーマ ファイルまたは CSS のデザイン要素または背景で使用される画像を考慮する必要があります。

最初の入力遅延 (FID)

最初の入力遅延しきい値の推奨事項

FID は、Google の 2 番目の主要なウェブ バイタルです。 FID は、ユーザーが Web ページをどの程度簡単に操作できるかを分析します。

LCP が Web サイトがコンテンツを表示するのにかかる時間を計算するように、FID は Web サイトがユーザーの操作に応答するのにかかる時間を測定します。

FIDとは?

First Input Delay は、ユーザーが Web サイトを操作してから Web サイトがその操作を処理するまでの時間を計算するパフォーマンス メトリックです。

FID には、Web ページにかかった時間が含まれます。

  • メニューセクションから要素を開くには、
  • ユーザーが検索ボックスに入力したクエリに応答し、
  • ユーザーがサイトのナビゲーションでクリックしたそれぞれのリンクを開く

なぜFIDがあなたのウェブサイトをランク付けするために重要なのか疑問に思うかもしれません.

Google は実際のユーザー エクスペリエンスを優先しています。 FID は、実際のユーザーが Web サイトを操作しやすいかどうかを判断するための指標です。

FID は、ブログやニュース記事などのコンテンツ中心の Web サイトではそれほど重要ではありません。 このような Web サイトでは、ユーザーは Web サイトを下にスクロールするだけでコンテンツを読むことができます。

ただし、ログイン ページ、サインアップ ページ、またはユーザーが資格情報を入力する必要がある場所など、何らかの種類の対話要素がページにある場合、FID は大きな要因となります。

FID はミリ秒 (ms) で計算されます。 Google によると、100 ミリ秒未満の FID スコアは良好と見なされます。 PSI によって設定されFID しきい値は次のとおりです。

良い悪いぶさいくな
0ms~100ms 100ms~300ms >300ms

FIDスコアを確認するには?

Chrome ユーザー エクスペリエンス レポート使用して、ウェブサイトの FID スコアを表示できます。 それとは別に、次を使用できます。

  • Google Search Console コア ウェブ バイタル レポート
  • PageSpeed インサイト
  • Web Vitals JavaScript ライブラリ
  • DevTools ライトハウス

FIDスコアを改善するには?

Web サイトの FID スコアが良くない場合は、すぐに対処する必要があります。

FID を改善するために取り組むことができる要因は 1 つではなく、いくつかあります。 ここにそれらのいくつかがあります。

  • サードパーティのスクリプトを最適化する

サードパーティのスクリプトには、分析、ソーシャル メディア ボタン、広告などが含まれます。これらすべてにより、Web サイトの読み込み時間が長くなります。 これらのサードパーティ スクリプトを最適化して、Web サイトの読み込み時間を短縮します。

  • CSS コードを最適化する

未使用の CSS を削除、圧縮、または縮小する

  • 画像の最適化

画像が Web サイトの応答時間に直接影響することはありません。 ただし、遅延読み込みを使用すると、貴重な帯域幅を解放してコード転送に使用できます。

使用されていないポリフィルを削除する

  • 高品質の WP プラグインとテーマを使用する

ウェブサイトが WordPress で実行されている場合は、最高品質のプラグインとテーマを使用することをお勧めします。 FID スコアを妨げる可能性があるため、不要なプラグインを削除します。

  • 未使用の JavaScript をスキップ

JavaScript ダウンロード構成を変更して、Web サイトにとって重要な JavaScript のみをダウンロードします。

  • キャッシング

キャッシュは、以前にダウンロードしたコンテンツを保存するのに役立ちます。これにより、ユーザーが再度 Web サイトにアクセスしたときに、コンテンツを再ダウンロードする必要がなくなります。 キャッシュからコンテンツをロードすると、Web サイトのパフォーマンスが向上し、サーバーの負荷が最小限に抑えられます。

FID スコアが重要な理由

FID スコアは、ユーザーが Web サイトをどれだけ簡単に操作できるかを決定します。 FID スコアが低いほど、ページ エクスペリエンスは優れています。

Core Web Vitals スコアのトップに立つには、FID スコアを最適化して改善することが重要です。

  • 累積レイアウト シフト (CLS) 累積レイアウト シフトしきい値の推奨事項

最後になりましたが、Google の Core Web Vitals は CLS です。

CLS 指標は、ウェブサイトの読み込み中の視覚的な安定性を測定します。 視覚的な安定性とは、クリック可能で目に見える要素を意味します。

ページの読み込み中にこれらの要素が狂ったように変化し始めると、Web サイトの CLS が高くなり、コア Web バイタル スコアに悪影響を及ぼします。

CLSとは?

私たちは皆、ページの読み込み中にページ要素が狂ったように変化し始める Web サイトを訪れたことがあるでしょう。

1 分間は検索ボックスが真ん中にあり、次の瞬間には上に移動し、前のスペースは別の要素に置き換えられます。 その結果、たいてい急いでいるときに、間違ったオプション/要素をクリックしてしまうことになります。

あなたは何をした? Web サイトを放棄して、SERP 内の別の Web サイトに移動したと思います。

Web サイト内の要素を移動することは、ユーザーにとってイライラさせられます。 すべての要素、ページ、およびフィールドが配置されている場所を見つける必要があります。

CLS を改善することは、ユーザーが誤ってクリックするのを防ぐため、UX 最適化の主要な部分です。

視覚的な安定性は、ページのユーザー エクスペリエンスを大幅に向上させ、全体的な SEO パフォーマンスをサポートします。

CLS スコアが 0 または .25 未満の場合、ウェブサイトが最適に CLS 最適化されていることを意味します。 数字が多ければ多いほど、Web サイトの変化する要素が多くなります。

良い悪いぶさいくな
<=0.1 0.1~0.25 >0.25

CLSを確認するには?

CLS は現在 Google のトップ ランキング ファクターであるため、注意が必要です。

CLS は、インパクト フラクションと距離フラクションの 2 つの異なる測定基準で測定されます。

Impact Fraction は、移動要素がビューポート内で占有するスペースを測定します。 最初から最後までの要素のシフト量をパーセンテージで合計します。

たとえば、ページの読み込み中、要素は画面/ビューポートの 50% を占めます。 ページが読み込まれると、さらに 30% シフトします。 したがって、合計金額は 50% + 30% = 80% または 0.80 になります。

距離の割合は、元の位置から最終的な位置までの要素の距離を測定します。 前の計算から、距離の割合は 30% でした。

最終的な CLS スコアを見つけるには、複数の Impact Fraction X Distance Fraction を計算します。

前の合計によると、それは 0.80 X 0.30、つまり 0.24 となり、これが最終的な CLS スコアです。

手動プロセスとは別に、CLS スコアを確認するための最適なフィールド ツールは次のとおりです。

  • Chrome ユーザー エクスペリエンス レポート
  • PageSpeed インサイト
  • Search Console (ウェブに関する主な指標レポート)
  • Chrome 開発ツール
  • 灯台
  • EXPERTEページスピードテスト

CLSスコアを改善するには?

優れた CLS スコアは、Web サイトが一貫したユーザー エクスペリエンスを提供するのに役立ち、最終的にランキングが向上します。 ウェブサイトの CLS を改善するためにできることは次のとおりです。

  • Web ページのすべてのメディアのサイズ属性ディメンションを設定する

画像、ビデオ、GIF、バナー、広告、インフォグラフィックなどのサイズ属性を設定すると、ユーザーは、要素がカバーするスペースの量を理解するのに役立ち、ページが読み込まれたときに変更されません。

  • 広告要素専用のスペースを用意する

ページのどこにでも広告要素が突然表示され、予約されたスペースがない場合、コンテンツが下に移動する可能性があります。

  • 要素をシフトするためのオンページ インジケーターを用意する

実際のユーザーがページを操作した後に移動する要素のオンページ インジケーターを使用すると、ユーザーは、ページがまだ読み込み中であり、要素が移動することを理解するのに役立ちます。 また、間違った要素/リンクをクリックするのを防ぎます。

結論

Google アルゴリズムは、よりユーザー中心の配信に近づいています。 新しく更新された Core Web Vitals によると、コンテンツの読み込み、FID、および視覚的な安定性に関して優れた UX を備えた Web サイトは、SERP で優先されます。

したがって、Web サイトの UX の改善を開始するのが早ければ早いほど、競合他社に対するパフォーマンスが向上します。