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

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

About The Author

Outline

元のソース: Layer0

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

サイトがCore Web Vitalsに合格するか失敗するかをすばやく理解するために読む。

コアウェブバイタルとは

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

コアWebバイタルは、次のメトリックで構成される。

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

Core Web Vitalsに合格するには、上記の各指標が、モバイルデバイスとデスクトップデバイスにセグメント化された、ページを訪問するすべてのユーザーの75%の推奨ターゲットに達する必要がある。

コアウェブバイタルを測定する方法

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

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

2.検索ボックスにウェブサイトのURLを入力し、「分析」を押して5~10秒待つ

PageSpeed Insightsアナライザー

3.フィールドデータまで下にスクロールする。 すぐに、あなたの場所が棒グラフの上のテキストのCore Web Vitals評価に合格するか不合格になるかを見る。

フィールドデータ

4. Core Web Vitalsメトリックを評価するには、LCP、FID、およびCLSの測定値に注意を払う。 青いしおり記号もこれらを示している。

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

5.あなたの平均スコアを点検しなさい。2.5秒以下のLCP100ミリ秒以下のFID、および.1以下のCLSは、優れたユーザーエクスペリエンスと見なされる。

平均メトリックデータ

6. Core Web Vitalメトリックを1つ合格するかどうかを判断するには、緑色のバーのパーセンテージをチェックする。 75%以上の場合は合格。 これは、あなたのウェブページがその特定の指標のために良いユーザーエクスペリエンスを提供することを意味し、誰かがそれを訪問する時間の少なくとも75%。

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

検査データを無視

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

Googleはあなたの場所をランク付けするために実験データかLighthouseの性能スコアを使用しない。 ランクは、下の画像に示されているフィールドデータのみに基づいている。

ランクはフィールドデータに基づく

コアウェブバイタルを改善する方法

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

監査を確認するには、次の手順を実行する。

ページのOpportunitiesセクションまでスクロールして、特定のメトリックの監査を参照。

PageSpeedインサイトの機会

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

PageSpeed Insights監査

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

最大のContentfulペイントは、次の要因によって容易に影響される。

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

最初の入力遅延の影響:

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

視覚的な不安定性、つまり累積的なレイアウトシフトは、次の場合に問題となる。

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

これらの問題のそれぞれを修正する方法の解決策については、このCore Web Vitals Optimizationブログを参照。

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

8月までに、Googleはページエクスペリエンスの更新ランキングを完全に変更する。 あなたの場所がCore Web Vitalsを通過すれば、より高いSEOおよびより低い直帰率を見る。 さらに重要なことは、ユーザーが滞在して戻ってくるのに十分な満足度を持つ、優れたエクスペリエンスを提供することである。

Layer0は、コアウェブバイタルを追跡、測定、最適化するための無料ツールを構築した。 これらの分析を利用するために、サイトをLayer0でホストする必要はない。 スクリプトタグだけであなたのもの。

アイスランド最大の旅行ウェブサイトであるGuide to Icelandは、Layer0プラットフォームに移行する前に、3つの指標すべてに失敗した。 サイトの速度は55%向上し、コアウェブバイタルに合格した。

Page Experienceの更新やサイトをスピードアップする方法についての質問がある場合は、サイトのスピードエキスパートに今日連絡を取る。 プラットフォームを試す準備ができたら、ここでサインアップ!