Home 技術記事 個人用サイトのコアWebバイタルを測定する方法
Applications

個人用サイトのコアWebバイタルを測定する方法

About The Author

Outline

元のソース:Layer0

2021年4月、Googleはページエクスペリエンスアップデートの展開を開始し、検索結果の上位Webページを優先するランキングアルゴリズムの変更が含まれています。 パフォーマンスは、WebサイトのコアWebバイタルに基づいています。コアWebバイタルは、ユーザーエクスペリエンスに大きな影響を与えるWebページメトリックです。

サイトがCore Web Vitalsに合格するか失敗するかをすばやく理解するために、この記事をお読みください。

コアウェブバイタルとは

Googleは、すべての人にとってより高速なWebを作成するための取り組みの一環として、Chromeチームは、ユーザーがページのパフォーマンスをどのように体験するかを測定する一連の指標を標準化する作業に取り組んでいます。 Core Web Vitalsは、このパフォーマンスパズルを解決する上で重要な要素となっています。これらの指標は、ロード、インタラクティブ性、視覚的安定性に焦点を当てています。

Core Web Vitalsは、次の指標で構成されています。

  • 最大のコンテンツフルペイント(LCP):最大のコンテンツ要素が画面上で完全に表示されるタイミングを測定します。 2.5秒以下のLCPは、良好な積込み経験と見なされます。
  • 最初の入力遅延(FID):ユーザーが最初にページを操作したとき(クリックまたはタップ)から、ブラウザが実際にその操作に応答できるようになるまでの時間を測定します。 100ミリ秒以下のFIDは、優れたインタラクティブ体験と見なされます。
  • 累積レイアウトシフト(CLS):ユーザーが予期しないレイアウトシフトを経験する頻度を測定します。 CLSの値が.1以下の場合は、視覚的に非常に安定していると考えられています。

Core Web Vitalsに合格するには、上記の各指標が、モバイルデバイスとデスクトップデバイスでセグメント化された、ページにアクセスした全ユーザーの75%の推奨目標を達成する必要があります。

コアウェブバイタルの測定方法

サイトがCore Web Vitalsに合格すると、ユーザーがページを放棄する可能性は24%低くなります。 そうは言っても、ウェブサイトの所有者はこれらの指標を測定することができますし、測定するべきです。 サイトがコアウェブバイタルを通過したかどうかを確認する最も簡単な方法は、PageSpeed Insightsを使用することです。

1. https://developers.google.com/speed/pagespeed/insightsにアクセスします。

2.検索ボックスにWebサイトのURLを入力し、[分析]を押して5 ~ 10秒待ちます。

PageSpeed Insightsアナライザ

3.フィールドデータまでスクロールダウンし ます。 すぐに、サイトがCore Web Vitalsの評価に合格したかどうかが棒グラフの上のテキストに表示されます。

フィールドデータ

4. Core Web Vitalsメトリックを評価するには、フィールドデータの下にあるLCP、FID、およびCLSの測定値に注意してください。 青いしおり記号もこれらを示しています。

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

5.あなたの平均スコアを確認してください。 LCPが2.5秒 以下、FIDが100ミリ秒以下、 CLSが.1秒 以下の場合は、優れたユーザーエクスペリエンスと見なされます。

平均メトリックデータ

6. Core Web Vitalメトリックを1つだけ合格したかどうかを判断するには、緑色のバーの割合を確認します。 75%以上の場合は合格です。 これは、特定の指標に対して、誰かがWebページにアクセスする時間の少なくとも75%が優れたユーザーエクスペリエンスを提供することを意味します。

コアWebの重要しきい値–75パーセンタイル

検査データを無視

PageSpeed Insightsページには、ラボデータとフィールドデータの両方があります。 フィールドデータ は、実際にページをロードして操作する実際のユーザーからのものです。 ラボのデータは、理想的な条件下で制御されたテストで測定され、実際のボトルネック(デバイス、ネットワークの状態、設定など)をキャプチャすることはありません。

Google は、ラボデータやLighthouseパフォーマンススコアを使用してサイトをランク付けすることはありません 。 ランクは、下の画像に表示されている照射野データにのみ基づいています。

ランクはフィールドデータに基づいています

あなたの中心的な網のバイタルを増進する方法

いくつかの理由により、Core Web Vitalsに合格しない可能性があります。 PageSpeed Insightsは、LCPとCLSの監査を提供します。 FIDは含まれていませんが、Total Blocking Time(TBT)を改善する最適化によって、現場のFIDも改善されるはずです。

監査を表示するには、次の手順に従います。

ページのOpportunitiesセクションまでスクロールダウンし、「特定のメトリックの監査」を参照してください。

PageSpeedインサイトの機会

2.改善したい指標をクリックすると、ウェブページの読み込み時間、インタラクティブ性、視覚的安定性を向上させるためのより詳細なテクニックにアクセスできます。

PageSpeed Insights監査

一般的に、Core Web Vitalが失敗する一般的な理由はいくつかあります。

最大のコンテンツフルペイントは、次の要因の影響を受けやすくなります。

  1. サーバーのレスポンス時間の遅さ
  2. JavaScriptおよびCSSのレンダリングブロック
  3. リソースのロード時間が長い
  4. クライアント側のレンダリングの問題

最初の入力遅延は次の影響を受けます。

  1. メインスレッドを50ミリ秒以上ブロックする長いタスク
  2. ファーストパーティスクリプトの実行によるインタラクションの準備の遅れ
  3. 重いJavaScriptの実行時間

次の場合、視覚的な不安定性(累積レイアウトシフト)が問題になります。

  1. 画像、動画、または広告のサイズが自動的に変更される
  2. フォントの読み込みが遅く、表示されるサイズが意図したサイズより大きくなったり小さくなったりする

これらの問題を解決する方法については、このCore Web Vitals Optimizationブログを参照してください。

優れたユーザーエクスペリエンスのためのサイトの準備

8月までに、Googleはページ体験更新ランキングを完全に変更します。 サイトがCore Web Vitalsに合格すると、SEOが高くなり、直帰率が低くなります。 さらに重要なことは、ユーザーが滞在して戻ってくるのに十分な満足度を得ることができる優れたエクスペリエンスを提供することです。

Layer0は、Core Web Vitalsを追跡、測定、最適化するための無料ツールを構築しました。 これらの分析を利用するために、サイトをLayer0でホストする必要はありません。 scriptタグだけで対応します

アイスランド最大の旅行ウェブサイトであるGuide to Icelandは、Layer0プラットフォームにアクセスする前に、3つの指標すべてに失敗しました。 そのサイトの速度は55%向上し、鮮やかな色でコアウェブバイタルを通過しました。

ページエクスペリエンスの更新やサイトの高速化方法について質問がある場合は、サイトスピードの専門家に今すぐ連絡してください。 プラットフォームを試す準備ができている場合は、こちらからサインアップしてください。