無料でウェブページのパフォーマンスを一発可視化できるツール「Firefox Profiler」レビュー

Firefoxにはウェブ開発者向けの開発ツールが搭載されています。この開発ツールにウェブサイトのパフォーマンスを可視化できる分析ツール「Firefox Profiler」が追加されていたので、実際に使ってみました。

Performance Tool in Firefox DevTools Reloaded - Mozilla Hacks - the Web developer blog
https://hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/

Firefox Profilerを使うには、分析対象ウェブページを開いた状態でキーボードの「Shift」と「F5」を同時押しして、現れたメニューから「記録を開始」をクリックします。

記録を開始したら、ウェブページを更新したりウェブページ内の要素をクリックしたりといったパフォーマンスをチェックしたい操作を行い、操作完了後に「記録をキャプチャ」をクリック。

すると、パフォーマンスの分析結果が新しいタブに表示されます。

分析結果では各要素が読み込まれた際のCPU使用率や……

通信時間を確認可能。

また、上部には分析期間内のスクリーンショットがズラリと表示されているので「この操作を実行した時のパフォーマンスが知りたい」というときに役立ちます。

分析結果はMozillaのサーバーにアップロードして共有可能。共有するには画面右上の「Upload Local Profile」をクリックし、アップロードしたい内容を選択してから「Upload」をクリックすればOK。

後は、表示されるURLをメールやメッセージアプリで共有すれば、他のマシンからも同じ分析結果を閲覧可能です。

また、共有設定画面で「Download」をクリックすれば……

分析結果を含むJSONファイルをgzip形式で保存できます。

Firefox Profilerの詳しい使い方は以下の公式ドキュメントで解説されているので、もっと詳しく知りたい場合は閲覧してみるのがオススメです。

User Guide - Firefox Profiler - Documentation
https://profiler.firefox.com/docs/