🧰
DevToolsのPerformanceパネルで余計な余白を削除する2つの方法
DevToolsのPerformanceパネルは、Webパフォーマンスチューニングにおいて不可欠な存在です。
しかし、下記のように余計な余白が出てしまう場合があります。
左側の余計な余白を削除して、見やすく使うための方法を2つご紹介します。
リロードしてすぐさま実行する
アドレスバーのURLを再度実行し、すぐさまPerformanceパネルで「🔄」を実行します。
どうやらブラウザを表示してからの時間がPerformanceパネルに影響を及ぼしているようです。
Lighthouseから実行する
もう1つの方法は、Lighthouseを実行し、「View Original Trace」から開く方法です。
下記のように綺麗に表示することができます。
(ZennのWepパフォーマンスの最適化レベルすごいですね...笑)
Discussion