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

GIGAZINE



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/


この記事のタイトルとURLをコピーする

Source

タイトルとURLをコピーしました