Slow Performance Troubleshooting - Waterfall Tool

Waterfall Output

What does the waterfall tool do?

• The waterfall chart is also known as the waterfall graph. It provides you with a visual representation of how all the assets on your website load. This includes CSS, JavaScript, HTML, images, plugins, and third-party content.
• Another vital point is that the waterfall chart lets you see the order in which assets are rendered in your browser. The order can be very vital as this can affect all sorts of things, from render-blocking CSS to FOIT issues.
• The Waterfall graph can simply be used as a timeline to track requests. It provides a visual representation of the duration of the requests spent in the queue, the duration to get the response, and to download the resources.
• Additionally, when you hover over any of the queues inside the graph, it displays in-depth information about it.
• A useful feature of the Waterfall graph is the ability to narrow down the scope of requests that are displayed to a certain point in the timeline.

How To Use It

When you notice a page, or multiple pages, taking longer to load than usual.  One thing you can do is check for anything that can be causing the page to load slower.  One tool for this is the waterfall tool.

• Navigate to the page on your instance that is slow
• Right click and choose "inspect"

• Then click on "network"

• Then simply reload your webpage

This will provide some information as to whats loading, and the longer the line is in the "waterfall" column should help determine what is taking longer to load on the page.