🧰

DevToolsのPerformanceパネルで余計な余白を削除する2つの方法

2021/07/03に公開

DevToolsのPerformanceパネルは、Webパフォーマンスチューニングにおいて不可欠な存在です。
しかし、下記のように余計な余白が出てしまう場合があります。

左側の余計な余白を削除して、見やすく使うための方法を2つご紹介します。

リロードしてすぐさま実行する

アドレスバーのURLを再度実行し、すぐさまPerformanceパネルで「🔄」を実行します。
どうやらブラウザを表示してからの時間がPerformanceパネルに影響を及ぼしているようです。

Lighthouseから実行する

もう1つの方法は、Lighthouseを実行し、「View Original Trace」から開く方法です。

下記のように綺麗に表示することができます。

(ZennのWepパフォーマンスの最適化レベルすごいですね...笑)

Discussion