健康なサイトインストールのメトリックを測定するためのクロム拡張機能
この拡張機能は、Chromeによって測定され、他のGoogleツールに報告される方法と一致する方法で、3つのコアWebバイタルメトリックを測定します(例:Chromeユーザーエクスペリエンスレポート、ページ速度洞察、検索コンソールなど)。
コアWebバイタルのすべてをサポートし、フードの下のWeb Vitalsライブラリをレバレッジしてキャプチャします。
また、診断メトリックもサポートしています。
Web Vitals Chrome Extenstionは、Chrome Webストアからインストールできます。
より多くの出血エッジビルドを探している場合は、マスターから拡張機能のバージョンをインストールすることもできます。
Google Chrome
web-vitals-extension-master
という名前のフォルダーが必要です。chrome://extensions
)に移動します。web-vitals-extension-master
フォルダーをページ上の任意の場所にドラッグしてインポートします(後でフォルダーを削除しないでください)。 アンビエントバッジは、ページがコアWebバイタルのしきい値を渡すかどうかを確認するのに役立ちます。
インストールすると、拡張機能はURLに移動するまで無効な状態バッジアイコンを表示します。この時点で、URLがコアWebバイタルメトリックのしきい値を渡すかどうかに応じて、バッジを緑、アンバー、または赤に更新します。
バッジには多くの状態があります:
1つ以上のメトリックが失敗している場合、バッジはこれらのメトリックの値をアニメーション化します(このアニメーションはオプション画面でオフにできます)。
Ambient Badgeアイコンをクリックすると、個々のメトリック値にドリルすることができます。このモードでは、メトリックにユーザーアクションが必要かどうかも拡張機能があります。
たとえば、次のペイントとの相互作用には、ページとの実際のインタラクション(クリック/タップ)が必要であり、 Waiting for input...
これが当てはまるまで述べられます。 LCP、CLS、およびINPのWeb.devドキュメントに相談して、メトリック値がいつ落ち着くかを理解することをお勧めします。
このポップアップは、Chrome UXレポート(CRUX)APIを介して、フィールドの実際のユーザーデータとローカルコアWebバイタルエクスペリエンスを組み合わせています。この統合により、コンテキストの洞察が得られ、同じページの他のデスクトップユーザーと個々の経験がどれほど似ているかを理解するのに役立ちます。また、必要に応じて、代わりに「ローカルエクスペリエンスを電話フィールドデータと比較する」という新しいオプションも追加しました。一部のページでは、Cruxデータが使用できない場合があることに注意してください。その場合、オリジン全体のフィールドデータをロードしようとします。
オーバーレイには、ページがオーバーレイするヘッドアップディスプレイ(HUD)が表示されます。開発中にコアWebバイタルメトリックの永続的なビューが必要な場合に役立ちます。オーバーレイを有効にするには:
Display HUD overlay
を確認し、[保存]をクリックしますWeb Vitals Extensionのコンソールロギング機能は、サポートされているすべてのメトリックの診断ビューを提供します。コンソールログを有効にするには:
Console logging
を確認し、[保存]をクリックしますWeb Vitals
をフィルターします不要なメトリックをフィルタリングするには、メトリック名にマイナスサインをプレイします。たとえば、フィルターをWeb Vitals Extension -CLS -LCP
に設定して、CLSとLCP診断情報をフィルタリングします。
各メトリックの診断情報は、拡張名[Web Vitals Extension]
で準備されたコンソールグループとして記録されます。つまり、グループを開いて閉じたグループを切り替えるには、この行をクリックする必要があります。
診断情報の種類はメトリックごとに異なります。たとえば、LCP情報には以下が含まれます。
一部のメトリック(LCPおよびINP)の場合、 performance.measure
を使用して、ユーザーのタイミングマークに内訳を保存できます。
他のメトリックでは、Chrome Devtoolsは通常、十分な情報を提供するため、追加の故障は必要ありません。
このプロジェクトへの貢献は、プルリクエストまたは問題の形で歓迎されます。詳細については、Converting.MDを参照してください。
フィードバックがメトリックの測定方法に関連している場合は、Webビジタルに対して直接問題を提出してください。
src/browser_action/vitals.js
:webvitals.jsを活用してメトリックを収集し、バッジとHUDのメトリック変更をブロードキャストするスクリプト。バッジに使用できるメトリックの全体的なスコアを提供します。src/bg/background.js
:vitals.jsが提供するデータを使用して、バッジアイコンの更新を実行します。より詳細なローカルメトリックの概要を表示するために、データに沿ってpopup.js
に渡します。src/browser_action/popup.js
:バッジアイコンをクリックするときに表示されるポップアップウィンドウにレンダリングのレンダリングを処理するコンテンツスクリプト。src/options/options.js
:HUDオーバーレイなどの高度な機能のオプションUI(保存された構成) この拡張機能の主な聴衆は誰ですか?
この拡張機能の主なオーディエンスは、デスクトップマシンでの開発中のコアWebバイタルメトリックでページがどのように行っているかについて即座にフィードバックしたい開発者です。
このツールで報告されているメトリック番号をどのように解釈する必要がありますか?
この拡張機能は、デスクトップまたはラップトップマシンのメトリックを報告します。多くの場合、このハードウェアは、ユーザーが持っている可能性のある携帯電話の中央値よりも大幅に高速になります。このため、LighthouseやReal Mobileハードウェアなどのツールを使用してテストして(WebPagetest経由)、すべてのユーザーが肯定的な体験をするようにすることを強くお勧めします。
コアWebバイタルを改善するためにどのようなアクションを実行できますか?
ページが特定のしきい値を渡さないことがわかった場合、各コアWebバイタルメトリックを最適化するためのガイドのセットを利用可能にしています。
Lighthouseには、これらのメトリックの追加の実行可能性監査も含まれています。
ユーザーは、メトリックに関するインスタントフィードバック(デスクトップマシン用)に拡張機能を使用することを想定していますが、(1)これらのメトリックが中央値モバイルデバイスでどのように見えるかについての診断ビューと(2)改善するためにできます。
Apache 2.0