viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方はこちらまで。

きっかけ

パフォーマンス改善をする時に使う計測ツールとして

Lighthouse
PageSpeed Insights

は知っているが、

「・・・そもそも何がどう違うんや？」と思いちょっと調べてみた。

すると、上記のツール以外にも以下の2つが出てきた。

WebPageTest
Chrome DevTools

Chrome DevTools の方は計測ツールという分類に入れてなかっただけで普段から使っていて馴染み深いが、WebPageTest・・・って何？

まぁ WebPageTest のことを抜きにしたとしても、
各ツールの特徴を踏まえた上で、ちゃんと使い分けられているかというと怪しい・・・

そこで備忘録も兼ねて記事にしてみました

勝手に解釈している部分など、間違った内容があるかもしれません。
もし間違いなどに気づいた方はコメントで教えていただけると幸いです。

結論

Lighthouse は、「ラボ環境でのパフォーマンステストが必要」「パフォーマンスだけでなくSEOなども含めて詳細な改善アドバイスが必要」な場合に使う。

PageSpeed Insights は、「フィールドデータを重視して分析したい」「フィールドデータとラボデータを比較したい」場合に使う。

WebPageTest は、「複数のデバイス・ネットワーク環境をシミュレーションしたい」「Waterfallチャートなどで詳細情報を深く分析したい」場合に使う。

Chrome DevTools は、「リアルタイムでのデバッグや細かいランタイムのプロファイリングが必要」「個別のリソースのパフォーマンスを詳細に分析したい」場合に使う。

そもそもパフォーマンス計測ツールってどんなのがあるの？

現在使えるツールは以下4つ。

なんでこんなにツールがあるの？

それぞのツールで役割が違うため。
まずは前提知識として、web.devに記載されている「速度ツールに関する考え方」の内容を勝手な解釈を踏まえて要約すると、

1. UXは1つの指標で把握できない

特定の瞬間や特定の機能が優れているだけでは意味がない。
ユーザージャーニー(ユーザーがサービス等を利用する際の一連の体験)を通じて継続的に良好な体験を提供するためにも、複数の指標（例: パフォーマンス指標, アクセシビリティなど）を把握し、UXにとって重要な要素を評価・追跡することが大事。

2. UXは1人の「代表的なユーザー」だけに基づいて判断することはできない

実際のUXは、ユーザーが使用しているデバイスやネットワーク環境など、さまざまな要因によって大きく変わる。
例えば、デバイスがモバイルかパソコンなのか、ネットワーク接続が4GなのかWi-Fiなのか等、状況によていデータの読み込み速度や安定性は大きく異なる。

3. ウェブサイトの読み込み速度は開発者にとっては速く見える

多くの場合、開発者が使っているデバイスやネットワーク環境は、ユーザーが実際に体験するよりも遥かに高速なため、実際のUXとは異なる。
そのため、ラボデータだけではなく、フィールドデータも活用することがとても大事。

ラボデータとは
事前に定義されたデバイスとネットワーク設定を含む、制御された環境で収集されたパフォーマンスデータのこと。
再現可能な結果とデバッグ機能が提供されるため、パフォーマンスの問題の特定・修正に役立つ。

フィールドデータとは
ユーザーが実際に体験している実際のページ読み込みから収集されたパフォーマンスデータのこと。
実際のUXを捉えられるため、ビジネス側の重要業績評価指標との相関関係を調べる時に役立つ。

※「ラボデータ」と「フィールドデータ」はテストに出るレベルで知っておくべき用語なので、パフォーマンス改善に携わる人は覚えておくと良さそう

各ツールの概要

Lighthouse

Chromeブラウザのデベロッパーツールに組み込まれており、ウェブページのパフォーマンスを評価するための簡単な方法を提供する。

ラボデータとフィールドデータの両方を提供するが、主にラボデータ（シミュレートされた環境での測定）に基づく。
生成されるスコアは、パフォーマンス、SEO、アクセシビリティ、プログレッシブウェブアプリ（PWA）などの指標に基づいており、スコアは1～100で表され、100に近いほど良好。
各項目には具体的な改善提案が示され、開発者が問題を特定しやすい。

PageSpeed Insights

フィールドデータ（実際のユーザーが体験したパフォーマンスデータ）とラボデータの両方を提供する。

フィールドデータは、Chrome UXレポートに基づいており、ユーザーが実際にどのようにページを体験しているかを示す。
ラボデータは、Lighthouseを使って生成されている。
FCP（First Contentful Paint）やLCP（Largest Contentful Paint）などの主要なパフォーマンス指標が強調されており、これらの指標を改善するための具体的なアドバイスが表示される。

WebPageTest

ウェブページの詳細なパフォーマンステストが可能で、ラボ環境で多様な条件（デバイス、ブラウザ、ネットワーク速度）をシミュレーションできる。

特徴的な点として、複数回のテストを実行して平均結果を提示し、ページの読み込みにおけるボトルネックを細かく調査できる。
ファーストビューとリピートビューを個別にテストし、キャッシュがない状態とキャッシュを利用する状態の両方を分析できる。
Waterfallチャートや詳細なタイムラインを使って、リソースのロード順序や、レンダリングにかかる時間を視覚的に把握できる。

Chrome DevTools

ご存知のとおり、Chromeブラウザに組み込まれており、フロントエンド開発者がリアルタイムでページのパフォーマンスや動作を分析できる強力なツール。

パフォーマンスタブでは、ページの読み込みプロセスをプロファイリングし、各リソースの読み込み時間やレンダリングの詳細を把握できる。
ネットワークタブで、リソースがどのようにロードされているかや、どれくらいの時間がかかっているかを視覚的に確認できる。
JavaScriptの実行時間やDOMの操作時間を詳細に調べ、ボトルネックを特定し、スムーズなインタラクションのための改善点を見つけるのに役立つ。

まとめ

各ツールの特徴を踏まえた上で、適切に使い分けてサイトのパフォーマンスを良くして行きましょう！！

参考記事

https://developers.google.com/search/blog/2018/11/pagespeed-insights-now-powered-by?hl=ja
https://web.dev/articles/speed-tools?hl=ja

一緒に二次元業界を盛り上げていきませんか？

株式会社viviONでは、フロントエンドエンジニアを募集しています。

また、フロントエンドエンジニアに限らず、バックエンド・SRE・スマホアプリなど様々なエンジニア職を募集していますので、ぜひ採用情報をご覧ください。