Google のツールを組み合わせて、ウェブサイトを効果的に監査、改善、モニタリングします。
公開日: 2020 年 5 月 28 日
Core Web Vitals は、読み込みパフォーマンス、ユーザー入力への応答性、レイアウトの安定性などの基準に基づいてユーザー エクスペリエンスを評価する一連の指標です。
このガイドでは、ウェブサイトの Core Web Vitals を改善するためのワークフローについて説明しますが、そのワークフローの開始点は、独自のフィールド データを収集しているかどうかによって異なります。どこで終了するかは、ユーザー エクスペリエンスの問題の診断と修正に役立つ Google のツールによって異なります。
Core Web Vitals は実際のユーザー環境で測定するのが最適
Core Web Vitals は、ユーザーがウェブサイトをどのように体験しているかを測定するために特別に設計された、ユーザー中心の指標です。Lighthouse などのラボベースのツールは、潜在的なパフォーマンスの問題とベスト プラクティスを明らかにする診断ツールです。ラボベースのツールは、事前に定義された特定の条件下で実行されるため、ユーザーが実際に体験する Core Web Vitals の測定値を反映していない可能性があります。
たとえば、Lighthouse はラボベースのツールであり、シミュレートされたデスクトップ環境またはモバイル環境で、シミュレートされたスロットリングを使用してテストを実行します。このような低速なネットワークやデバイスの条件をシミュレートすることは、パフォーマンスの問題を診断する際に役立ちますが、これは多種多様なネットワーク条件やデバイスの機能のほんの一部にすぎないため、サイトのユーザーが実際に体験していることを反映していない可能性があります。
Lighthouse などのラボベースのツールも通常、完全に新規の訪問者としてウェブページの「コールド スタートの読み込み」を行います。これは通常、最も読み込みが遅いケースですが、実際には、訪問者が以前にサイトを訪れたことがある場合や、サイトを閲覧しているときに、一部のアセットがキャッシュされている可能性があります。また、新規訪問者やツールでは、Cookie バナーやその他のコンテンツが表示されるため、サイトの表示が異なる場合があります。
つまり、ラボベースのツールは、潜在的なパフォーマンスの問題を特定し、デバッグとイテレーションに役立ちますが、ウェブサイトを実際に利用しているユーザーの数を表すものではありません。フィールド データを使用して実際のパフォーマンスを測定し、Lighthouse などのラボベースのツールを使用してパフォーマンスを改善する方法を診断します。Lighthouse を使用するタイミングのセクションもご覧ください。
Google は、Chrome ユーザー エクスペリエンス レポート（CrUX）を通じて Core Web Vitals を測定します。これは、実際の Chrome ユーザーから収集された一般公開データセットです。これは、サイトの Core Web Vitals をレポートする多くの Google ツールやサードパーティ ツールのバックボーンとなっています。
ただし、CrUX には制限があります。多くの場合、問題が発生したタイミングはわかりますが、理由を特定するにはデータが不十分です。
可能であれば、独自のフィールド データを収集する
フィールドでのウェブサイトのパフォーマンスを向上させるために最適なデータセットは、自分で作成したものです。まずは、ウェブサイトの訪問者からフィールド データを収集します。この方法は、組織の規模や、サードパーティのソリューションに費用を支払うか、独自のソリューションを作成するかによって異なります。
有料ソリューションでは、ほぼ確実に Core Web Vitals（およびその他のパフォーマンス指標）が測定され、通常は、結果のデータを掘り下げるためのさまざまなツールが提供されます。リソースが豊富な大規模な組織では、この方法が好まれる場合があります。
しかし、大規模な組織に属していない場合や、サードパーティのソリューションを導入する余裕がない場合もあります。このような場合は、Google の web-vitals ライブラリを使用すると、すべてのウェブに関する主な指標を収集できます。ただし、そのデータのレポート、保存、分析の方法については、お客様の責任となります。
すでに Google アナリティクスを使用しているものの、独自のフィールド データの収集を開始していない場合は、web-vitals ライブラリを使用してフィールドで収集されたウェブに関する指標を Google アナリティクスに送信し、GA4 の BigQuery Export を使用してデータをレポートする機会があるかもしれません。
Google のツールを理解する
独自のフィールド データを収集しているかどうかにかかわらず、Core Web Vitals の分析に役立つ Google ツールがいくつかあります。ワークフローを確立する前に、各ツールの概要を把握しておくと、どのツールが最適か（または最適でないか）を理解するのに役立ちます。
Chrome ユーザー エクスペリエンス レポート（CrUX）
前述のとおり、CrUX は、数百万のウェブサイトから実際の Google Chrome ユーザーのセグメントから収集されたフィールド データの一般公開データセットです。これには、十分なトラフィックがあるウェブサイトの Core Web Vitals 指標やその他の指標が含まれます。
CrUX は、オリジンレベルの月次 BigQuery データセットとして、または URL またはオリジンレベルの日次 API として利用できます。ただし、URL またはオリジンに CrUX データセットの十分なサンプルがあることが条件となります。CrUX データは、さまざまな CrUX ツールを介して、プログラムによるアクセスとユーザーが使用するビジュアル ツールの両方で利用できます。
CrUX を使用する場面
独自のフィールド データを収集している場合でも、CrUX は有用です。CrUX は Chrome ユーザーのサブセットを表していますが、ウェブサイトのフィールド データを比較して、CrUX データとどのように一致しているかを確認すると便利です。それぞれにメリットとデメリットがあり、結果に違いが生じる可能性があります。ウェブサイトのフィールド データをまったく収集していない場合、CrUX は、ウェブサイトがデータセットに表示されている限り、概要を把握するうえで特に役立ちます。
CrUX を直接使用することも、別のツール（以下に記載されているツールなど）を使用することもできます。BigQuery または API を使用して CrUX データセットを直接使用すると、他のツールでは表示されないデータを表示できます。たとえば、国レベルのデータは他のツールでは利用できないことがよくあります。また、CrUX の追加指標を表示することもできます。これも他のツールでは表示されないことがよくあります。
CrUX を使用すべきでない場合
CrUX は Chrome ユーザーのみを対象としており、さらに一部の Chrome ユーザーのみを対象としています。完全な RUM ソリューションには、Chrome や、ウェブに関する主な指標をサポートする他のブラウザでのエクスペリエンスをさらに含めることができます。
十分なトラフィックがないウェブサイトは、CrUX データセットに表示されません。この場合、CrUX は利用できないため、独自のフィールド データを収集して、ウェブサイトのフィールドでのパフォーマンスを把握する必要があります。あるいは、ラボデータに依存する必要がありますが、前述のように、ラボデータは代表的なものではない可能性があるという制限があります。
CrUX が提供するデータは過去 28 日間の移動平均であるため、開発中に使用するツールとしては理想的ではありません。改善が CrUX データセットに反映されるまでにかなりの時間がかかるためです。
最後に、CrUX は一般公開データセットであるため、利用可能な情報の量と、このデータのクエリ方法に制限があります。独自の RUM データをキャプチャすると、より詳細な情報（LCP 要素など）を収集し、データをさらにセグメント化して問題を特定できます。ログインしているユーザーの Core Web Vitals は、ログインしていないユーザーよりも優れているか、それとも劣っているか。LCP が遅いユーザーに、特定の LCP 要素があるか。FID と INP の値が高くなる原因となっているインタラクションはどれか。
PageSpeed Insights（PSI）
PSI は、特定のページについて、CrUX のフィールド データと Lighthouse のラボデータをレポートするツールです。詳しくは、各セクションをご覧ください。
PSI を使用するタイミング
PSI は、モバイル ユーザーとデスクトップ ユーザーの両方について、ページレベルまたはオリジンレベルで CrUX のパフォーマンスを評価するのに適しています。ページまたはサイトの Core Web Vitals の概要を最初に把握するのに適しています。また、競合他社などの他のサイトの Core Web Vitals データも確認できます。
PSI は Lighthouse データも提供します。このデータは、指標が一致する場合に、Core Web Vitals を改善するための有用な推奨事項を提供します。これらが一致しない場合、Lighthouse の推奨事項の関連性が低くなる可能性があります。
Lighthouse はサーバーから実行されるため、DevTools から Lighthouse を実行するよりも一貫したベースラインを形成できます。
PSI を使用すべきでない場合
PSI は公開 URL でのみ使用できます。一般公開されていない開発サイトでは使用できません。
CrUX データは、サイトが特定の資格要件（サイトの人気度のしきい値など）を満たしている場合にのみ利用できます。ページまたはオリジンの CrUX データが利用できない場合、PSI は Lighthouse のラボデータしか表示できないため、あまり役に立ちません。
同様に、テスト対象の特定の URL ではなく、オリジンレベルの CrUX データのみがある場合も、オリジンレベルのフィールド データをページレベルのラボ診断に関連付ける有用性が制限されます。オリジンレベルのフィールド データは、サイトのパフォーマンスの概要として非常に有用な情報であり、Lighthouse の監査も役立ちますが、この場合は特に注意が必要です。
最後に、CrUX でページレベルのデータが利用可能であっても、Lighthouse のラボデータと異なる場合、Lighthouse の推奨事項の価値は限定的になる可能性があります。これは、特に読み込み後の CLS の問題や、ラボベースの監査があまり役に立たないインタラクティブ性の Core Web Vitals（FID と INP）で発生する可能性があります。
Search Console
Search Console は、Core Web Vitals を含むサイトの検索トラフィックとパフォーマンスを測定します。この機能は、サイトの所有権を確認したサイト所有者のみが利用できます。
Search Console の便利な機能として、類似するページ（同じテンプレートを使用しているページなど）を 1 つのグループにまとめて評価する機能があります。Search Console には、CrUX のフィールド データに基づく Core Web Vitals レポートも含まれています。
Search Console を使用するタイミング
Search Console は、デベロッパーとデベロッパー以外の役割のユーザーの両方に適しており、他の Google ツールではできない方法で検索とページのパフォーマンスを評価できます。CrUX データの表示と、類似性によるページのグループ化により、パフォーマンスの改善がページのカテゴリ全体にどのように影響するかについて、新しい分析情報が得られます。
Search Console を使用すべきでない場合
Search Console は、類似性に基づいてページをグループ化する別のサードパーティ ツールを使用するプロジェクトや、ウェブサイトが CrUX データセットに表示されない場合には適していない可能性があります。
また、グループ内のサンプルページがグループ内の他のページと異なる特性を持っている場合、ページ グループ化がわかりにくくなることがあります。たとえば、グループ全体が特定の Core Web Vitals に合格していないのに、サンプルページはすべて同じ Core Web Vitals に合格しているように見える場合です。これは、グループにロングテール ページや、アクセス頻度が低くキャッシュされる可能性が低いページが含まれている場合に発生することがあります。ロングテールにこれらのページが十分な量ある場合、グループ全体の合格率に影響する可能性があります。
灯台
Lighthouse は、ページのパフォーマンスを改善するための具体的な機会を提供するラボツールです。Lighthouse ユーザーフローを使用すると、デベロッパーはページ読み込み以外のパフォーマンス テスト用にインタラクション フローをスクリプト化することもできます。
Lighthouse-CI は、プロジェクトのビルドとデプロイ中に Lighthouse を実行してパフォーマンス回帰テストを支援する関連ツールです。pull リクエストとともに Lighthouse レポートを表示し、パフォーマンス指標を経時的に追跡します。
Lighthouse を使用するタイミング
Lighthouse は、ローカル環境とステージング環境の両方で、開発中にパフォーマンス改善の機会を見つけるのに最適です。Lighthouse CI は、ステージング環境と本番環境へのビルドとデプロイのフェーズでも同様に役立ちます。これらの環境では、優れたユーザー エクスペリエンスを維持するためにパフォーマンス回帰テストが必要です。
Lighthouse を使用すべきでない場合
Lighthouse（または Lighthouse CI）は、フィールド データの代わりにはなりません。Lighthouse は主に、事前定義されたページ読み込みから潜在的な問題とベスト プラクティスをリストアップする診断ツールです。表示される推奨事項は、ユーザーが実際に体験するパフォーマンスと必ずしも一致するとは限りません。
Lighthouse は、PageSpeed Insights などのツールを使用して本番環境サイトを診断するために使用できますが、理想的には、開発環境と継続的インテグレーション環境で Lighthouse を使用して、パフォーマンスの問題が本番環境に到達する前に対処することです。
Lighthouse が提供する監査は、Chrome DevTools のパフォーマンス パネルの「インサイト」でも確認できます。これにより、ページのパフォーマンスをより詳細に分析できます。
Chrome DevTools の [Performance] パネル
Chrome DevTools は、[Performance] パネルなどのブラウザ内デベロッパー ツールのコレクションです。[Performance]（パフォーマンス）パネルは、次の 2 つの「モード」で構成されるラボツールです。
[Performance] パネルを初めて開くと、[Live Metrics] リアルタイム指標画面に現在の Core Web Vitals 指標が表示されます。この画面では、CrUX からフィールド データをインポートすることもできます。これは、ページを操作してパフォーマンスの問題を特定しようとする際に、パフォーマンスの「ライブ」ビューとして役立ちます。特に、CLS 指標と INP 指標で確認できる読み込み後の問題に役立ちます。
次に、[Performance] パネルを使用すると、デベロッパーはページの読み込み中または記録された期間中のすべてのページ アクティビティのプロファイル（またはトレース）をキャプチャできます。このビューでは、ネットワーク、レンダリング、ペイント、スクリプト アクティビティなどのディメンションや、ページの Core Web Vitals など、観測されるすべての要素について詳細な分析情報を確認できます。また、Lighthouse で提供されるものと同様の分析情報も含まれます。
[パフォーマンス] パネルを使用する場面
[パフォーマンス] パネルは、デベロッパーが特定のページのパフォーマンスに関する詳細な分析情報を得るために使用します。
リアルタイム指標ビューを使用すると、ページの現在のパフォーマンス特性をすばやく把握できるだけでなく、ページが操作されたときに発生する可能性のある問題を特定することもできます。
トレースビューは、INP に影響する応答性の問題をデバッグする際に特に役立ちます。応答性の低いインタラクションが特定され、再現可能になると、パフォーマンス パネルは、メインスレッドのブロック、JavaScript コールスタック、レンダリング作業など、ブラウザで何が起きているかに関する豊富なデータを提供し、問題の理解に役立ちます。
[Performance] パネルを使用すべきでない場合
[パフォーマンス] パネルは、主にラボデータを提供するデベロッパー ツールです。ただし、CrUX のフィールド コンテキストも含まれます。フィールド データの代わりにはなりません。
トレースビューには多くのデバッグ情報が含まれていますが、そのため、初心者デベロッパーやデベロッパー以外のロールのユーザーにとっては理解しにくい場合があります。しかし、パネルを開いたときに表示されるリアルタイム指標ビューは、詳細な情報を必要としないユーザー向けに、より使いやすいインターフェースを提供することで、この問題に対処しています。
ウェブサイトの Core Web Vitals を良好な状態に保つための 3 ステップのワークフロー
ユーザー エクスペリエンスの向上に取り組む際は、そのプロセスを継続的なサイクルとして捉えることが重要です。Core Web Vitals やその他のパフォーマンス指標を改善するためのアプローチの 1 つとして、以下が考えられます。
- ウェブサイトの健全性を評価し、課題を特定します。
- デバッグと最適化。
- 継続的インテグレーション ツールでモニタリングして、回帰を検出して防止します。
ステップ 1: ウェブサイトの健全性を評価し、改善の機会を特定する
ウェブサイトの健全性を評価するには、まずフィールド データから始めることをおすすめします。
- PageSpeed Insights を使用すると、オリジンの Core Web Vitals エクスペリエンス指標の全体像と、個々の URL に関する具体的な情報を確認できます。
- Search Console は、改善が必要なページを特定するのに役立ちます。このツールのページ グループ化機能は、サイトで適切に機能します。
- RUM データがある場合は、問題のある特定のページやトラフィック セグメントを特定するのに最適なオプションとなることがよくあります。
自分で収集したフィールド データと CrUX データのどちらを分析する場合でも、この最初のステップは重要です。フィールド データを収集していない場合は、CrUX データが参考になる可能性があります。ただし、ウェブサイトがデータセットに含まれていることが前提となります。
PageSpeed Insights でサイトのパフォーマンスを分析する
PageSpeed Insights には、過去 28 日間のユーザー エクスペリエンス データの 75 パーセンタイルをカバーする CrUX データが表示されます。つまり、ユーザー エクスペリエンスの 75% が特定の指標に設定されたしきい値を満たしている場合、そのエクスペリエンスは「良好」と見なされます。
パフォーマンスを確認したい特定のページがある場合は、そのページを使用します。最適化を始めるにあたってサイトの全体像を把握するには、ホームページから始めることをおすすめします。通常、ホームページはサイトで最も人気のあるページの 1 つです。
まずは、PSI の [実際のユーザーが経験していること] セクションに注目します。入力した URL とオリジン全体について、モバイルとパソコンの最大 4 つのビューが表示されます。これらを比較して、違いを確認してください。モバイルは、リソースに制約のあるデバイスであり、ネットワーク条件が不安定な可能性があるため、通常はデスクトップよりもパフォーマンスが低くなります。URL とオリジンのデータが大きく異なる場合は、その理由を把握するようにしてください。ホームページは最初にアクセスされるページ（つまりランディング ページ）であることが多いため、オリジンよりも遅くなる可能性があります。ユーザーは、ブラウザ キャッシュが初期化されていない状態の影響を全面的に受けることになります。共有アセットがキャッシュに保存されるため、後続のページは読み込みが速くなり、オリジンレベルの集計データが低下する可能性があります。
PSI には、3 つの Core Web Vitals（LCP、CLS、INP）すべてに加えて、診断用の TTFB 指標と FCP 指標も表示されます。Core Web Vitals のいずれかが不合格になっているか、またその程度はどのくらいか。これにより、どこに力を注ぐべきかがわかります。
これらの数値の関係、特に LCP の関係を理解します。この例のように LCP が遅い場合は、その指標のマイルストーンである TTFB と FCP を確認します。この例では、TTFB が 1.8 秒であるため、良好な LCP の推奨しきい値である 2.5 秒を満たすのは非常に困難です。これは、バックエンドの速度が遅い（サーバーの問題または CDN の不足）、ネットワークの速度が遅い、またはリダイレクトによって最初の HTML バイトが遅延していることを示しています。詳しくは、TTFB の最適化ガイドをご覧ください。FCP にはさらに 1 秒かかります。これもネットワークが遅いことを示している可能性があります。この例では、FCP の直後に LCP が発生しています。これは、ページ自体の読み込みが完了すると、LCP リソースが適切に最適化されることを示しています。また、CrUX では、リソースタイプとサブパートに関するより詳細な診断情報も表示されるようになり、LCP の問題の診断にも役立ちます。
CLS の場合は、CrUX CLS と Lighthouse CLS のスコアを確認して、これが読み込み時の CLS の問題（Lighthouse が検出してアドバイスを提供）なのか、読み込み後の CLS の問題（Lighthouse が検出しない）なのかを判断します。詳しくは、CLS の最適化ガイドをご覧ください。
応答性については、INP スコアを確認します。Lighthouse の TBT 監査で、最初のページ読み込み時に大量の JavaScript 処理が行われているかどうかを確認します。これは INP に影響する可能性があります。INP は改善が難しい指標であるため、詳しくは INP の最適化ガイドをご覧ください。
Search Console でパフォーマンスの低いページを特定する
PSI は、テストする特定の URL やサイト全体がある場合に便利ですが、Search Console を使用すると、特定の種類のページに絞って取り組むことができます。これは、多くのページが共通のテーマやテクノロジーを共有しており、Search Console がそれらを正常に識別できる場合に特に役立ちます。
Search Console の Core Web Vitals レポートには、ウェブサイトのパフォーマンスの全体像が表示されますが、注意が必要な特定のページを詳しく調べることもできます。Search Console では、次のこともできます。
- 改善が必要な個々のページグループと、優れたユーザー エクスペリエンスを提供しているページグループを特定します。
- URL 別のパフォーマンスに関する詳細なデータを、ステータス、指標、類似するウェブページのグループ（e コマース ウェブサイトの商品詳細ページなど）別に取得できます。
- モバイルとデスクトップの両方で、ユーザー エクスペリエンスの品質カテゴリごとに URL を分類した詳細レポートを取得できます。
確認する特定のページを特定したら、前述のように PSI を使用して、それらのページの問題をさらに詳しく把握できます。
ステップ 2: デバッグと最適化
ステップ 1 では、パフォーマンスの改善が必要なページと、改善する Core Web Vitals 指標を特定しました。Google のツールを使用すると、問題を特定するための根本原因を把握するための詳細情報を取得できます。
- Lighthouse 監査で、ページに関する大まかなガイダンスを確認する
- [パフォーマンス] パネルのリアルタイム指標ビューを使用して、Core Web Vitals をリアルタイムで分析します。
- [パフォーマンス] パネルのトレースを使用して、パフォーマンスの問題をデバッグし、コードの変更をテストします。
さらに詳しいガイダンスについては、次のガイドをご覧ください。
Lighthouse で改善点を見つける
PageSpeed Insights は Lighthouse を実行します。Chrome DevTools から Lighthouse を実行することもできます。これは、修正をローカルで検証するのに役立ちますが、パフォーマンス パネル（次に説明します）は、パフォーマンスの問題をローカルで特定して修正するためのより包括的なツールです。
重要なのは、Lighthouse の監査で、解決しようとしている問題（LCP の遅延や CLS の問題など）が再現されることを確認することです。Lighthouse は、デフォルトではページ読み込み時のユーザー エクスペリエンスのみを評価します。ラボツールであるため、INP ではなく TBT が使用されます。
Lighthouse の指標が、解決しようとしている問題と同様の問題を示している場合、監査の豊富な情報が問題の特定と解決策の提案に役立ちます。
監査をフィルタして、関心のある Core Web Vitals のみに絞り込み、特定の指標に関連する問題の修正に集中できます。
INP の場合は、TBT 監査を使用して、これらの指標に影響する可能性のある問題を特定します。ただし、インタラクションがない場合、Lighthouse で診断できる範囲は限られます。
Chrome DevTools のリアルタイム指標画面でリアルタイムに分析する
Chrome DevTools の [Performance] パネルにあるリアルタイム指標画面には、ページの読み込み中およびページの閲覧中に Core Web Vitals がリアルタイムで表示されます。そのため、INP だけでなく、読み込み後に発生するレイアウト シフトもキャプチャできます。各指標の詳細情報を確認することもできます。
![Chrome DevTools の [Performance] パネルのリアルタイム指標ビュー](https://web.developers.google.cn/static/articles/vitals-tools/image/performance-panel-live-metrics.png?hl=ja)
このビューには、パフォーマンスの問題を特定するのに役立つ情報が多数表示されます。また、CrUX からフィールド情報を取得することもできます。さらに詳しい情報を得るには、トレースを使用してドリルダウンします。
[パフォーマンス] パネルでドリルダウンする
Chrome DevTools のパフォーマンス パネルでは、記録された期間中のすべてのページ動作のプロファイル（またはトレース）を記録できます。
![長いタスクがハイライト表示されたフレーム チャートを示す Chrome DevTools の [Performance] パネルのトレース](https://web.developers.google.cn/static/articles/vitals-tools/image/devtools-perf-trace.png?hl=ja)
パフォーマンス分析情報は、[分析情報] サイドパネルで確認できます。また、Core Web Vitals 指標と、利用可能な場合はそれらのフィールド値も表示されます。
[Layout Shifts] トラックでは、レイアウト シフトがハイライト表示されます。これらをクリックすると、CLS のデバッグのためにシフトした要素の詳細が表示されます。
LCP などの主要なタイミングは、トレースの下部にある [Timings] に表示されます。クリックして詳細を確認します。
長いタスク（INP の問題につながる可能性がある）も、フレーム チャートで赤い三角形でハイライト表示されます。
これらの機能と、[パフォーマンス] パネルの他の部分の情報は、修正がページの Core Web Vitals に影響を与えているかどうかを判断するのに役立ちます。
フィールドで Core Web Vitals をデバッグする
ラボツールでは、ユーザーに影響を与える Core Web Vitals の問題の原因をすべて特定できるとは限りません。ラボデータでは考慮できない要素を考慮できるため、独自のフィールド データを収集することが非常に重要です。
詳細については、フィールドでのパフォーマンスのデバッグをご覧ください。
ステップ 3: 変更をモニタリングする
問題を修正したら、修正が期待どおりの効果を発揮していること、そして新たな問題によって Core Web Vitals が損なわれていないことを確認する必要があります。そのためには、パフォーマンスの問題が本番環境にリリースされないように、デベロッパー ワークフローの一環としてパフォーマンスの問題をモニタリングし、フィールド データを定期的にモニタリングして、この状況を確認する必要があります。
継続的インテグレーション（CI）環境でパフォーマンス要件をモニタリングする
Lighthouse-CI を使用すると、コード commit に対して Lighthouse 監査を自動的に実行して、パフォーマンスの低下がコードに混入するのを防ぐことができます。これにより、パフォーマンスのタイミング（変動する可能性があります）を確認したり、パフォーマンス監査のみを対象として、コード内の不適切なプラクティスを防ぐリンティング ツールとして使用したりできます。
フィールド データでウェブサイトの健全性の傾向を確認する
パフォーマンスの問題はすべて、本番環境に移行する前に検出して修正することを目指すべきですが、見落としがないか確認するには、RUM を使用してフィールド データをモニタリングすることが不可欠です。これに役立つ商用の RUM プロダクトは多数あります。web-vitals JavaScript ライブラリを使用すると、ウェブサイトのフィールド データの収集を自動化できます。また、必要に応じて、このデータを使用してカスタム ダッシュボードやアラート システムを強化することもできます。
RUM ソリューションがないサイトでは、さまざまな CrUX ツールをフィールド データの基本的なトレンド分析として使用できます。
まとめ
高速で快適なユーザー エクスペリエンスを実現するには、パフォーマンスを最優先する考え方と、進捗を確保するためのワークフローの導入が必要です。監査、デバッグ、モニタリングのための適切なツールとプロセスがあれば、優れたユーザー エクスペリエンスを構築し、良好な Core Web Vitals のために定義されたしきい値内に収めることができます。