ブラウザイベントでのウォーターフォールチャート

目的：

Mark Zeman　2017年9月8日

私たちは、すでにウォーターフォールチャートを改良し、全ブラウザイベントをハイライト表示する新しい折りたたみモードを提供しています。 これにより、ページが読み込まれるときに発生する全イベントをすばやくスキャンし、マウスをウォーターフォール側に置くと、その瞬間に各イベントの内容を見れて、それぞれを関連付けることができます。

全ブラウザのメトリックに加えて、 Hero rendering timesもコンテキストで表示されます。 イベントをクリックすると、その瞬間の大きなバージョンがフィルムストリップに表示されます。

 

ネットワークリクエストの詳細とブラウザイベントとの関連性を調べるには「Expand」またはウォーターフォールチャートの背景をクリックします。

これで、ページが読み込まれるときにユーザーが実際に見ているものと、ネットワークリクエスト、ブラウザイベント、ブラウザのメインスレッドを関連付けることが簡単になりました。 この強力な対話型ツールのおかげで、すべてのWebパフォーマンスを改良していくことができます