Google のツールを組み合わせて、ウェブサイトを効果的に監査、改善、モニタリングします。
Core Web Vitals は、読み込みパフォーマンス、ユーザー入力に対する応答性、レイアウトの安定性などの基準でユーザー エクスペリエンスを評価する一連の指標です。
このガイドでは、ウェブサイトの Core Web Vitals を改善するためのワークフローについて説明しますが、そのワークフローの開始点は、自分でフィールド データを収集するかどうかによって異なります。Google のどのツールがユーザー エクスペリエンスの問題の診断と解決に役立つかによって、どこまでが行き詰まるのかは別です。
Core Web Vitals の測定は現場で実施することをおすすめします。
Core Web Vitals は、ウェブサイトのユーザー エクスペリエンスを測定するために特別に設計された、ユーザー中心の指標です。Lighthouse などのラボベースのツールは、潜在的なパフォーマンスの問題やベスト プラクティスを明らかにできる診断ツールです。ラボベースのツールは、事前定義された特定の条件下で実行されるため、ユーザーが利用する実際の Core Web Vitals の測定値が反映されていない場合があります。
たとえば、Lighthouse は、シミュレートされたデスクトップ環境やモバイル環境でスロットリングのシミュレーションを行うラボベースのツールです。低速なネットワークとデバイスの状態のシミュレーションは、パフォーマンスの問題を診断する際に役立ちますが、ネットワーク状態とデバイス機能の多種多様な一部にすぎず、サイトのユーザーが経験している内容を反映していない場合があります。
Lighthouse などのラボベースのツールは通常、「コールドロード」も行うウェブページをまったく新しい訪問者として識別します。多くの場合、これは最も遅い負荷ですが、実際には、訪問者が以前にアクセスしたことがある場合、またはサイトをブラウジングしているときに、一部のアセットがキャッシュに保存されている可能性があります。新規の訪問者やツールでも、Cookie バナーなどのコンテンツによってサイトのエクスペリエンスが変わる可能性があります。
つまり、ラボベースのツールは、潜在的なパフォーマンスの問題を把握し、デバッグとイテレーションを行うのに役立ちますが、実際にウェブサイトを訪れたユーザーの数を反映しているとは限りません。実際のパフォーマンスの測定にはフィールド データを使用し、改善方法の診断には Lighthouse などのラボベースのツールを使用します。Lighthouse を使用するタイミングもご覧ください。
Google では、Core Web Vitals を Chrome ユーザー エクスペリエンス レポート（CrUX）で測定しています。これは実際の 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 データセットに十分なサンプルがある場合）。BigQuery データは CrUX ダッシュボードでも表示できるため、サイトはサイトの過去の傾向を確認できます。
CrUX を使用する場合
独自のフィールド データを収集する場合でも、CrUX は有用です。CrUX は Chrome ユーザーの一部を対象としていますが、ウェブサイトのフィールド データを比較して、CrUX データとの整合性を確認することをおすすめします。それぞれに長所と短所があり、相違が生じる可能性があります。ウェブサイトのフィールド データを収集しない場合、CrUX は特に概要を把握するのに役立ちます（ウェブサイトがデータセット内で表現されている場合）。
CrUX を直接使用することも、別のツール（下記のツールを含む）を使用することもできます。BigQuery または API で CrUX データセットを直接使用すると、他のツールには表示されないデータ（国レベルのデータは他のツールでは利用できないことが多い）を表示したり、他のツールでは表示されないことが多い CrUX の追加指標を表示したりできます。
CrUX を使用しない場合
CrUX は Chrome ユーザーのみを表し、さらには一部の Chrome ユーザーのみを表します。完全な RUM ソリューションでは、Chrome と、Web Vitals の指標をサポートしている他のブラウザで、より多くのエクスペリエンスを含めることができます。
十分なトラフィックを受け取っていないウェブサイトは、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 データを使用できない場合は、Lighthouse のラボデータしか表示されないため、PSI の有用性は低くなります。
同様に、テスト対象の特定の 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 を使用しない場合
類似性に基づいてページをグループ化するさまざまなサードパーティ ツールを使用しているプロジェクトや、ウェブサイトが CrUX データセットに含まれていない場合は、Search Console は適していません。
また、グループ内のサンプルページの特性がグループ内の他のページとは異なる特性である場合も、ページのグループ化が多少複雑になる可能性があります。たとえば、グループの特定の 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 などのツールを使って本番環境サイトを診断できますが、本番環境に移行する前にパフォーマンスの問題に対処できるよう、開発環境や継続的インテグレーション環境での使用が理想的です。
Web Vitals 拡張機能
Chrome 拡張機能「Web Vitals」は、ウェブの閲覧中に Core Web Vitals の指標を表示する診断ツールです。また、現在のページが CrUX データセットに含まれている場合は、そのページの CrUX データも含まれ、Core Web Vitals のパフォーマンスの問題を特定するためのデバッグ情報も提供されます。
Web Vitals 拡張機能を使用するタイミング
Web Vitals 拡張機能は、あらゆる職務のユーザーが使用することで、ページのライフサイクルのあらゆる時点でページの Core Web Vitals を評価できます。ページを操作しながらパフォーマンスの問題を特定しようとする際に、パフォーマンスの「ライブ」ビューとして役立ちます。特に、CLS 指標と INP 指標で発生する可能性のある読み込み後のパフォーマンスの問題に役立ちます。
Web Vitals 拡張機能を使用しない場合
Web Vitals 拡張機能は、ページ パフォーマンスを包括的に評価するものではありません。さらに、レポートする指標は実行環境に大きく依存するため、開発者は多くの場合、より高性能なマシンを使用したり、より高速なネットワークにアクセスしたりできます。
Chrome DevTools の [パフォーマンス] パネル
Chrome DevTools は、[Performance] パネルなどのブラウザ内開発ツールのコレクションです。[パフォーマンス] パネルは、ページの読み込み中や記録された期間におけるすべてのページ アクティビティをプロファイリングするラボツールです。ネットワーク、レンダリング、ペイント、スクリプト アクティビティなどのさまざまな側面で観察されたすべての情報や、ページの Core Web Vitals について、詳細な分析情報が得られます。
パフォーマンス パネルを使用するタイミング
[パフォーマンス] パネルは、ページ パフォーマンスに関する詳細な分析情報を得るために、デベロッパーが開発時に使用する必要があります。これは、FID または INP に影響する応答性の問題をデバッグする際に特に役立ちます。レスポンスの悪いインタラクションが特定され、再現可能な状態になると、[パフォーマンス] パネルにブラウザで何が起こっているかに関する豊富なデータが提供されるため、メインスレッドのブロック、JavaScript コールスタック、レンダリング処理など、問題の理解に役立ちます。
パフォーマンス パネルを使用しない場合
[パフォーマンス] パネルは、ラボデータのみを表示するデベロッパー ツールです。フィールド データに代わるものではありません。多くのデバッグ情報が含まれていますが、そのため、初心者のデベロッパーや非デベロッパーの役割には理解しづらい場合があります。
ウェブサイトの Core Web Vitals を健全な状態に保つための 3 ステップのワークフロー
ユーザー エクスペリエンスの改善に取り組む際には、継続的なサイクルと捉えることをおすすめします。Core Web Vitals やその他のパフォーマンス指標を改善する方法として、次のものがあります。
- ウェブサイトの健全性を評価し、問題点を特定します。
- デバッグと最適化を行う。
- 継続的インテグレーション ツールを使用してモニタリングし、回帰を検出して防止します。
ステップ 1: ウェブサイトの健全性を評価し、改善の機会を特定する
まずはフィールド データからウェブサイトの健全性を評価することをおすすめします。
- PageSpeed Insights を使用して、オリジンに関する Core Web Vitals の全体的なエクスペリエンスの指標と、個々の URL に関する特定の情報を確認できます。
- Search Console を使用すると、ページグループ化機能がサイトでうまく機能している、改善が必要なページを特定できます。
- RUM データがある場合は、問題がある特定のページやトラフィック セグメントを特定するのに最適なオプションであることがよくあります。
自分で収集したフィールド データを分析する場合も、CrUX データを分析する場合も、この最初のステップは不可欠です。現場のデータを収集していない場合、CrUX データだけで十分かもしれません。繰り返しになりますが、自社のウェブサイトがデータセットに表れていれば十分です。
PageSpeed Insights でサイトのパフォーマンスを分析する
PageSpeed Insights では、過去 28 日間のユーザー エクスペリエンス データを 75 パーセンタイルでカバーする CrUX データが表示されます。つまり、ユーザー エクスペリエンスの 75% が特定の指標に設定されたしきい値を満たしている場合、そのエクスペリエンスは「良好」と見なされます。
具体的なページのパフォーマンスを確認したい場合は、そのページを使用してください。最適化を始めたばかりの段階でサイトの全体像を把握するには、ホームページから始めることをおすすめします。ホームページは通常、多くのサイトで最も人気のあるページの一つだからです。
最初は PSI の実際のユーザーが経験していることに焦点を当てます。入力した URL とオリジン全体について、モバイルとパソコンの 4 つのデータビューが表示されます。両者を比較して、違いを確認しましょう。モバイルはリソースに制約があり、ネットワーク環境が不安定な状況でも動作するデバイスであるため、通常はデスクトップよりもパフォーマンスが劣ります。URL と元のデータが大きく異なる場合は、その理由を探ってください。ホームページは最初にアクセスするページ（つまりランディング ページ）であることが多いため、ホームページのユーザーがブラウザ キャッシュの事前準備を怠って、それよりも遅くなる可能性があります。すべての共有アセットがキャッシュに保存されるため、後続のページはより高速に読み込まれる可能性があります。これにより、送信元レベルの集計データが減少します。
PSI には、3 つのウェブに関する主な指標（LCP、CLS、FID）と保留中の INP 指標のほか、診断用の TTFB 指標と FCP 指標も表示されます。Core Web Vitals のいずれかのエラーがどのくらいの割合で失敗したか。どこに力を注ぐべきかがわかります。
これらの数値の関係、特に LCP の関係を理解する。この例のように LCP が遅い場合は、TTFB と FCP に注目します。これらはいずれも指標のマイルストーンです。この例では、TTFB が 1.8 秒であるため、良好な LCP を実現するための 2.5 秒の推奨しきい値を満たすことは非常に困難になります。これは、バックエンドが遅い（サーバーの問題または CDN がない）か、ネットワークが遅いか、リダイレクトによって最初の HTML バイトが遅れている可能性があります。詳しくは、TTFB の最適化ガイドをご覧ください。FCP はさらに 1 秒かかります。これも、ネットワークが遅いことを示している可能性があります。この例では、LCP は FCP からそれほど時間が経っていません。ページ自体が読み込まれると、LCP リソースが十分に最適化されていることを示唆しています。
CLS の場合は、CrUX CLS と Lighthouse CLS スコアを調べて、これが読み込み CLS の問題（Lighthouse で検出、アドバイスされる）か、Lighthouse では検出されない読み込み後の CLS 問題かを確認します。詳しくは、CLS の最適化ガイドをご覧ください。
対応については、FID スコアと INP スコアを確認します。Lighthouse の TBT 監査で、最初のページ読み込み時に JavaScript 処理が多数発生し、それが INP に影響を与えている可能性があるかどうかを確認します。INP は改善が難しい指標になる場合があるため、詳しくは INP の最適化ガイドをご覧ください。
Search Console でパフォーマンスの低いページを特定する
PSI は、テストしたい特定の URL やサイト全体がある場合に便利ですが、Search Console は、特定のタイプのページをテスト対象にすることができます。これは、多くのページでテーマやテクノロジーが共通しており、Search Console でそうしたページを特定できる場合に特に便利です。
Search Console の Core Web Vitals レポートでは、ウェブサイトのパフォーマンスの全体像を把握できるほか、注意が必要な特定のページをドリルダウンすることもできます。Search Console では、次のことも可能です。
- 改善が必要なページグループと、優れたユーザー エクスペリエンスを提供しているページグループを特定します。
- ステータス別、指標別、類似ウェブページのグループ（e コマース ウェブサイトの商品の詳細ページなど）別にグループ化した、URL 別のパフォーマンスに関する詳細なデータを取得できます。
- モバイルとパソコンの両方について、ユーザー エクスペリエンスの各品質カテゴリで URL を分類した詳細なレポートを取得できます。
特定のページを確認したら、前述のように PSI を使用して、そのページの問題に関する理解を深めることができます。
ステップ 2: デバッグと最適化を行う
ステップ 1 では、パフォーマンスの改善が必要なページと、Core Web Vitals の指標のうち改善したいものを特定しました。Google のツールを使用すると、さらに情報を収集して根本原因を把握し、問題を特定できます。
- Lighthouse の監査を実行してページレベルのガイダンスを取得する
- Web Vitals 拡張機能を使用すると、Core Web Vitals をリアルタイムで分析できます。
- Chrome DevTools の [Performance] パネルを使用して、パフォーマンスの問題をデバッグし、コードの変更をテストします。
さらに詳しいガイダンスについては、次のガイドをご覧ください。
Lighthouse を使用して機会を発見する
PageSpeed Insights は Lighthouse を実行しますが、ローカルで開発する場合は、ローカルで修正を検証するのに便利な Chrome DevTools から Lighthouse を実行することもできます。
解決しようとしている問題（LCP の遅延や CLS の問題など）が Lighthouse の監査で再現されていることを確認することが重要です。Lighthouse では、ページ読み込み時のユーザー エクスペリエンスのみが自動的に評価されます。ラボツールであるため、FID と INP も除外され、TBT が使用されます。
Lighthouse の指標から、解決しようとしている問題と同様の問題が示唆される場合、監査で得られた豊富な情報を利用して問題を特定し、解決策を提案できます。
関心のある Core Web Vitals だけに監査を絞り込んで、特定の指標に関連する問題の修正に重点を置くことができます。
FID と INP については、TBT 監査を使用して、これらの指標に影響を与える可能性のある問題を特定します。ただし、インタラクションがないと、Lighthouse では診断できる範囲が限られることに留意してください。
Web Vitals 拡張機能によるリアルタイムの分析
Chrome 拡張機能の「Web Vitals」では、ページの読み込み中およびページの閲覧中に Core Web Vitals をリアルタイムで表示できます。そのため、FID と INP、および読み込み後に発生するレイアウト シフトをキャプチャできます。デバッグ オプションを使用すると、各指標のさらに詳細な情報が表示されます。
Web Vitals 拡張機能は、パフォーマンスの問題を見つけるためのスポットチェック ツールとして捉えてください。包括的なデバッグ ツールではなく、Chrome DevTools の [パフォーマンス] パネルで行います。
掲載結果パネルでドリルダウンする
Chrome DevTools の [パフォーマンス] パネルでは、記録期間中のすべてのページの動作がプロファイリングされます。
LCP などの主要なタイミングは [タイミング] トラックに表示されます。これらをクリックして詳細をご確認ください。
Layout Shifts トラックはレイアウト シフトをハイライト表示します。これらをクリックすると、CLS をデバッグするためにシフトされた要素の詳細が表示されます。
長いタスク（FID や INP の問題につながる可能性があります）も、赤い三角形でハイライト表示されます。
これらの機能と [パフォーマンス] パネルの他の部分の情報により、修正によってページの Core Web Vitals に影響があるかどうかを判断できます。
実際の環境で Core Web Vitals をデバッグする
ラボツールは、ユーザーに影響する Core Web Vitals のすべての問題の原因を特定できるとは限りません。そのため、独自のフィールド データを収集することが重要です。ラボデータでは収集できない要素が考慮されます。
詳しくは、フィールドでパフォーマンスをデバッグするをご覧ください。
ステップ 3: 変更をモニタリングする
問題を修正したら、必要な効果が現れているか、新しい問題によって Core Web Vitals が妨げられないかを確認します。そのためには、パフォーマンスの問題が本番環境にリリースされるのを防ぐために、デベロッパー ワークフローの一環としてパフォーマンスの問題をモニタリングする必要があります。また、そのような状況であることを確認するために、フィールド データを定期的にモニタリングする必要があります。
継続的インテグレーション（CI）環境でパフォーマンス要件をモニタリングする
Lighthouse-CI を使用すると、コードの commit に対して Lighthouse 監査を自動的に実行し、コードへのパフォーマンスの低下を防ぐことができます。これにより、パフォーマンスのタイミング（ばらつきがある）を確認できます。また、パフォーマンス監査では、コード内の不適切なプラクティスを防ぐための lint チェックツールとして使用することもできます。
フィールド データを使用してウェブサイトの健全性の傾向を表示する
本番環境に移行する前に、すべてのパフォーマンスの問題を検出して修正する必要がありますが、見落としを見つけるには、RUM を使用してフィールド データをモニタリングすることが重要です。これに役立つ商用 RUM 製品は数多くあります。web-vitals JavaScript ライブラリは、ウェブサイトのフィールド データの収集を自動化し、必要に応じてこのデータを使用してカスタム ダッシュボードやアラート システムを強化します。
RUM ソリューションがないサイトでは、フィールド データの基本的な傾向分析として CrUX ダッシュボードを使用できます。CrUX のサイトについて以下のことが報告されます。
- サイトの概要: Core Web Vitals をパソコンとモバイル デバイスのタイプに分類します。
- 指標タイプ別の過去の傾向。CrUX レポートデータの月次リリースごとの指標の経時的な分布です。
- ユーザー属性: デバイスや効果的な接続タイプなど、各ユーザー属性のユーザーのオリジン全体におけるページビューの分布。
CrUX ダッシュボードは CrUX BigQuery データセットに基づいており、月に 1 回更新されます。これにより、Core Web Vitals を定期的に確認することをおすすめします。
まとめ
高速で快適なユーザー エクスペリエンスを実現するには、パフォーマンス重視の考え方と、確実に進歩するためのワークフローの導入が必要です。監査、デバッグ、モニタリングのための適切なツールとプロセスがあれば、優れたユーザー エクスペリエンスを構築し、Core Web Vitals の望ましい状態を維持することができます。