Chrome User Experience Reportのデータを確認するための新しいツール
UI開発者 加藤Chrome User Experience Report（CrUX）は、ChromeでWebサイトを閲覧しているユーザーの体験を測定するための一般公開されているデータセットで、主にWeb Vitalsに関するスコアデータを提供しています。
CrUXのデータを確認する方法はこれまでもいくつかありましたが、最近新しいツールが公開されたのでご紹介します。
CrUX Vis
Googleは新しくCrUX Visというツールを公開しました。
CrUX Visは、CrUXのデータをグラフとして視覚化してくれるツールで、CrUX History APIを利用して最大約6カ月分のスコアの推移を確認できます。
使い方はとても簡単で、CrUX Visのページを開いて計測したいサイトのURLを入力し、Enterキーを押すだけです。
オリジンの要件を満たしているサイトであれば、誰でもいろいろなサイトのスコアを閲覧できます。（ミツエーリンクスのコーポレートサイトの例）
CrUX Dashboardとの違い
CrUX Visと似たようなツールにCrUX Dashboardというツールがあります。
CrUX Dashboardで確認できるデータは月に1度、第二火曜日に更新され前月分までのデータが閲覧できるようになりますが、CrUX Visは週次でデータが更新されるため、より短いスパンでパフォーマンス改善の効果が出ているか確認できるようになります。
またCrUX Dashboardはオリジン単位のデータが確認できるのに対し、CrUX Visではページの要件を満たしているページであれば、URL単位のデータが確認できます。（ミツエーリンクスのコーポレートサイトのサービスページの例）
オリジン単位の場合、パフォーマンスを改善するためにはまずどのページでスコアの低下が起きているのかを調査するところから始めることがありますが、URL単位のデータが確認できればどのページでスコアが低下しているのかも調査しやすいため、改善の方針を立てやすくなります。
「[CrUX Announce] Introducing CrUX Vis - a new experimental CrUX tool」によれば、CrUX Visはまだ実験的な試みではありつつ、将来的にはCrUX Dashboardを置き換える予定とのことです。
Chrome DevToolsのパフォーマンスパネル
9月にリリースされたGoogle Chrome 129から、Chrome DevToolsのパフォーマンスパネルにWeb Vitalsのスコアが表示されるようになりました。
こちらも使い方は簡単で、Google Chromeでスコアを確認したいページにアクセスし、Chrome DevToolsのパフォーマンスパネルを開くだけでスコアを確認できます。
最初に表示されるデータは閲覧しているデバイスで計測したラボデータのみですが、要件を満たしているサイトであればオリジン、もしくはページ単位のCrUXのデータを表示する設定ができます。
設定するとラボデータとCrUXのデータが並んで表示されるようになるので、2つのデータを比較することで、例えばラボデータは良いスコアでもCrUXのデータが悪いスコアであれば「何かを見落としているのではないか」と気付きやすくなります。
ちなみに、これまでブラウザの拡張機能としてWeb Vitalsスコアを確認するためのWeb Vitals拡張機能が提供されていましたが、DevToolsでWeb Vitalsが確認できるようになったことからWeb Vitals拡張機能は来年の1月にサポートを終了するとのことです。
CrUX VisもChrome DevToolsのパフォーマンスパネルも、将来的にはこれまでのツールを置き換えることになりそうなので、CrUX DashboardやWeb Vitals拡張機能を使っている方はぜひチェックしてみてください！