主要な計測ツール
先のフィールドデータとラボデータの概念に基づいて、計測ツールを紹介します。
PageSpeed Insights
- Webサイト：PageSpeed Insights
- 取得できるデータ：フィールドデータ、ラボデータ
フィールドデータとラボデータを同時に取得可能なツールです。URL単位でモバイル／PC向けのパフォーマンス計測ができます。また、その改善ポイントや方法も同時に表示されます。
フィールドデータはCrUXのデータから取得され、ラボデータのデータは計測タイミングで後述するLighthouseにより取得されます。ターゲットとなるページの現状と改善方法を取得する最も手軽なツールと言えるでしょう。値の読み取り方法については後半で解説します。
Lighthouseの新バージョンもDevtoolsより早く更新されやすいため、インターネットに公開されている環境を手軽に計測するのに向いています。はじめての計測はPageSpeed Insightsで感覚を掴んでみるところから始めるのがよいでしょう。
デメリットとして計測にURLが必要なため、インターネットから隔離されている開発環境や手元の環境を計測できません。実際の改善フェーズではそれらの環境での計測が必要になるため、PageSpeed Insights以外のツールも組み合わせる必要があります。
Search Console
- Webサイト：ウェブに関する主な指標レポート
- 取得できるデータ：フィールドデータ
主にGoogleの検索結果に対する改善に利用されるSearch Consoleですが、その中でもCore Web Vitalsの指標が確認可能です。「ウェブに関する主な指標レポート」でフィールドデータ（CrUX）に基づくパフォーマンス状況を確認できます。
Google Search ConsoleでのCore Web Vitals指標の確認
（出典：ユーザー体験を向上！Yahoo!ニュースにおけるCore Web Vitals対応事例）
特定のURLではなく、サイト全体の中からパフォーマンスを改善すべきページを抽出するのに便利です。またSearch Consoleはすでに導入されていることも多いため、ついでに確認できる点で導入コストが少ないという利点があります。
自身が保有しているサイトやサービスの値しか確認できないため、他サービスとの比較には向いていません。また、PageSpeed Insightsとは違いラボデータは確認できません。
Search Consoleは自サービスの全体傾向と改善箇所すべきページの抽出に利用するのがよいでしょう。
Lighthouse
- GitHub：GoogleChrome/lighthouse
- 使い方：Using Lighthouse in Chrome DevTools
- 取得できるデータ：ラボデータ
LighthouseはCLIのツールとして提供されています。npmからコマンドのインストールが可能です。
次のようにURLを指定しコマンドを実行すると、レポート結果のhtmlファイルが出力され、スコアや改善点の確認ができます。
$ npx lighthouse --chrome-flags="--headless" "https://www.yahoo.co.jp" # or $ npm install -g lighthouse $ lighthouse --chrome-flags="--headless" "https://www.yahoo.co.jp"
またChromeのDevtoolsにもバンドルされているため、Chromeを利用しているのであればより手軽に確認可能です。
PageSpeed Insightsと違い手元のマシンから実行できるため、インターネットから隔離されている環境でも計測が可能です。
主に社内環境やローカルで起動している開発サーバーのような環境で、改善状況を計測するシーンなどで利用します。
取得できるデータはラボデータであるため、スコアは計測したマシンの状態に左右されます。
例えば別のマシンで計測した結果と比較した場合、そのスコアの差がマシンやネットワークの性能差なのか、改善による差分なのかがはっきりとしません。Lighthouseの内部でCPUやネットワークのエミュレーションが行われるためある程度スコアは均一化されますが、ラボデータでスコアの比較をする際は注意が必要です。
例えば改善を加えた開発環境と同等の構成の環境を用意し、同じマシン／ネットワークから計測する、などなるべく条件を揃えて確認しましょう。
また、PCとモバイルのスコアを比較することもあまり意味がありません。Lighthouseではモバイルの環境を再現するために、モバイルの計測はCPUとネットワークを絞った値でスコアを算出します。そのため、モバイルのスコアはPCに比べ低くなりがちな点は意識しておく必要があるでしょう。
Lighthouse CI
- GitHub：GoogleChrome/lighthouse-ci
- 取得できるデータ：ラボデータ
LighthouseをCIツールから利用しやすい形に記録するサーバー／クライアントツールです。Lighthouse CIのクライアントをCIのステップに紐づけることで、行った修正によってパフォーマンスが変化したかを計測し、Lighthouse CIサーバーに送信できます。
Lighthouse CIサーバーでは送信されたデータがビジュアル化されます。また結果をMySQLなどのデータベースに保存が可能で、過去の推移もグラフとして確認できます。
Lighthouse CIのダッシュボード
個別の計測結果
また、Lighthouse CIで定期的に計測を実行することで「同じ計測環境におけるデータの推移」を記録できます。
通常ラボデータは比較には向きませんが、このように条件を揃えた定期的な計測を行った場合は、ある程度全体的なスコアの推移傾向を読み取れます。ひとつひとつの増減で一喜一憂はできませんが、スコアが上昇／下降傾向にあるのかを確認する用途としては非常に便利です。
ヤフーではLighthouse CIを利用してサービスの状況を毎日計測しています。これは先の通りラボデータであっても定点観測をすることで傾向を読み取れるためです。
CrUXのAPIを利用することでフィールドデータの収集も可能ですが、フィールドデータは一定期間の平均値となるため大きな変更があっても値の推移は緩やかです。ラボデータではそういった大きな変化を検知しやすいというメリットもあります。
最終的に改善すべき値はフィールドデータではありますが、改善にあたりどちらのデータだけみればいいというわけではありません。それぞれを適切に使い分け、パフォーマンスを改善するだけでなく、計測を続け下がらないよう維持する習慣が必要です。
その他の計測ツール
筆者は先にあげたツールの他にも、簡単にブラウザ上で確認するツールも利用しています。
Web Vitals Chrome拡張
- Chrome ウェブストア：Web Vitals
- GitHub：GoogleChrome/web-vitals-extension
- 詳細：Find your way with field data in the Web Vitals extension update
- 取得できるデータ：フィールドデータ、ラボデータ
現在アクセスしているページのフィールドデータを参照できる拡張です。また、全体傾向の中で今回自分がアクセスした指標（ラボデータ）がどのあたりに位置するかを確認できます。
単体で全ての計測を賄うことはできませんが、手早く現状を知るための手段としては有効です。
HUD（Heads-Up Display）
Devtoolsの機能でCore Web Vitalsの指標をChrome上で表示可能です。
上記のChrome拡張でも同様の表示ができますが、Chrome90からChromeの内部にも同等の機能が盛り込まれました。
この表示を行っている間に、CLSが発生するとその要素に対してoverlayで色が変わります。CLSが起きている要素を視覚的に確認する際に非常に便利な機能です。
