Web Vitals 拡張機能により、現地での実際のユーザー エクスペリエンスとローカル エクスペリエンスの位置関係を確認できるようになりました。
Core Web Vitals は、ユーザー エクスペリエンスを理解するために測定すべき最も重要な指標です。ユーザー エクスペリエンスが優れていると、良いことが起こるためです。Chrome の Web Vitals 拡張機能は、Web Vitals ツールボックスに含まれているツールの 1 つで、ウェブの閲覧時にアクセスしたページのパフォーマンス データを表示します。
ページのパフォーマンスは、ハードウェアやネットワークの品質など、さまざまな要因に左右されます。パソコン上でのページの動作は、大部分のユーザーの動作とは大きく異なる場合があります。そのため、Web Vitals 拡張機能のバージョン 1.0 には、Chrome UX レポート（CrUX）の実際のユーザーのデータをローカルのウェブに関する主な指標の測定値と統合する新機能が含まれています。この機能では、他のユーザーが同じページを閲覧したときのローカル測定値が表示されます。きわめて新しい UI が搭載されています。その仕組みをご紹介します。
CrUX のフィールド データ
CrUX は、Chrome での実際のユーザー エクスペリエンスに関する一般公開データセットです。これは、Search Console や PageSpeed Insights など、Core Web Vitals ワークフローのいくつかの重要なツールを強化しています。何百万ものウェブサイトの元データは、BigQuery の CrUX データセットと CrUX API で一般公開されたクエリを実行することもできます。この Web Vitals 拡張機能の更新では、CrUX API から取得したページおよびオリジンレベルのパソコンデータが統合されます。
ユーザー エクスペリエンス データは、良い、改善が必要、悪いという 3 つの定性的評価に分けられます。 各評価に使用されるしきい値は、Core Web Vitals の各指標（LCP、FID、CLS）のガイドに記載されています。たとえば、CrUX API を使用すると、あるページの実際のユーザー エクスペリエンスの 16% で、LCP が 2.5 秒未満と評価されていることがわかります。
新しい拡張機能の UI
新しい Web Vitals 拡張機能のインターフェースでは、ローカル エクスペリエンスが、実際のユーザー エクスペリエンスのより広範な配布の上に重ねられています。たとえば、ショッピング モールのような広大な場所にいて、すべての店舗が書かれた大きな地図と「ここにいる」というラベルが付いたピンが表示されるため、自分の方向性を把握して行き先を確認できます。
CrUX からの実際のユーザーデータの分布は、各指標の水平バーに表示されます。現地での経験は、水平バーに 1 つのポイントとして表示されます。バー上のローカル エクスペリエンスの位置は、実際のユーザーの分布に対するエクスペリエンスの相対位置を示します。自分のローカル環境が他のユーザーのエクスペリエンスと大きく異なる場合に、そのことがすぐにわかります。たとえば、LCP のエクスペリエンスが遅いものの、同様のエクスペリエンスを持つユーザーは 1% のみの場合は、何か異常が起きた可能性があります。
オリジンレベルのデータへのフォールバック
一部のページでは、CrUX データセットに URL レベルのデータがありません。これは、ページが新しくまだ取得されていないか、データセットに含めるのに十分なトラフィックがない場合に発生することがあります。このような場合、Web Vitals 拡張機能は可能な限り、より詳細なオリジンレベルのデータにフォールバックします。このデータは、ウェブサイトのすべてのページのユーザー エクスペリエンスを集計したものです。特定のページ エクスペリエンスに直接関係するとは限りませんが、サイト全体でのユーザー エクスペリエンスに関する分析情報を提供するものでなければなりません。
もう 1 つのよくあるケースは、「入力を待機しています...」というメッセージです。これは、FID がユーザー操作の測定を必要とする唯一の Core Web Vitals であり、ユーザーがページで操作を行うまで、拡張機能にはローカル FID データが表示されないためです。
エッジケース
拡張機能の使用中に発生する、あまり一般的でないエッジケースがいくつかあります。
オリジン全体のデータが不十分な場合があります。その場合、この拡張機能ではローカル エクスペリエンスのパフォーマンスのみが表示されます。
ページをどのように操作したかも、データの関連性に影響することがあります。たとえば、ページをバックグラウンドのタブに読み込むと、ページがフォアグラウンドに表示されるまで、LCP 指標にカウントされます。タブへの切り替えに 90 秒かかる場合は、LCP が 91.5 秒と表示されることがあります。この場合、LCP 値の横に小さな警告アイコンが表示されます。これは、人為的なインフレーションを警告するものです。このような無関係な LCP 値は、CrUX データセットでは無視されます。
最後に注意すべきエッジケースとして、FID に固有のケースがあります。ユーザーの操作に依存するため、ページビューの少ないページやウェブサイトについては、データセットで使用できる可能性が低くなります。そのため、そのようなページにアクセスした場合、LCP と CLS のフィールド データしか表示されない可能性があります。なお、LCP または CLS でも非常にまれな状況ですが、この問題は主に FID の影響を受けます。
スマートフォンのフィールド データを比較する
デフォルトでは、Web Vitals 拡張機能のすべてのデータは、現場での実際のパソコン ユーザーのエクスペリエンスに対応しています。結局のところ、この拡張機能は PC 版の Chrome でのみ使用できるため、同様の条件下でユーザーがページまたはオリジンをどのように体験しているかを確認することが最も重要です。
スマートフォンのユーザー エクスペリエンスを理解することは重要です。そのため、拡張機能の [オプション] ページに詳細設定があり、ローカル エクスペリエンスと実際のスマートフォンのデータを比較できます。
拡張機能で電話番号データを有効にする手順は次のとおりです。
- ツールバーの拡張機能アイコンを右クリックし、[オプション] を選択します。
- [現地の情報と電話番号のフィールド データを比較する] オプションをオンにします。
UI はいくつかの場所で更新され、現在どのモードであるかが示されます。実際のスマートフォン ユーザーのエクスペリエンスは、パソコン ユーザーのエクスペリエンスとは大きく異なる場合があるため、この機能は慎重に使用してください。
Web Vitals 拡張機能を入手する
Web Vitals 拡張機能の最新バージョンを使用するには、Chrome ウェブストアにアクセスしてインストールしてください。拡張機能の既存のユーザーである場合は、自動的にバージョン 1.0 にアップグレードされます。拡張機能の使用に関するフィードバック（機能リクエスト、バグレポートなど）がある場合は、GitHub のオープンソース リポジトリからお知らせください。ご自身のローカル体験が、現場の他の実際のユーザーとどのように関係しているかを理解するために、この情報がお役に立てば幸いです。
画像クレジット: Mark Garlick/Science Photo Library/Getty Images