This is part 2 to our guide using WebPageTest.org – if you have not read that post, you may want to start there first before reading this post. This post will focus on the waterfall diagram and how to diagnose issues your website may have!
SO, WHAT IS THE WATERFALL DIAGRAM?
Basically, the waterfall diagram on any page speed testing tool shows you an easy to read view of every resources on your website in a list format, in the order in which those resources were loaded along with the time it took to load each resource.
It is critical to analyze this information to ensure your website is running at top speed and finding the reason(s) it isn’t.
WHAT THIS POST WILL COVER ABOUT WATERFALLS
As you can imagine this is a COMPLEX and very TECHNICAL tool – we can get really deep into the who, what, where, when and why – but because we focus on writing easy to understand tutorials we won’t be doing that.
We are ONLY going to tell you what you need to understand to read the waterfall.
We will do future posts that outline how to fix items. But for now we just want you to understand what the waterfall is telling you!
ACCESSING THE WATERFALL DIAGRAM
- Run your page speed test as outlined in this post.
- The waterfall results will load under the performance results table. Click on any FIRST VIEW waterfall result that is returned on the page after the page speed test is complete. FYI, We typically look at the waterfall of the slowest loading view time.
- The resulting page will show several items including waterfall view, connection view, request details and request headers. For this post we are only focusing on the waterfall view.
WHAT IS THE WATERFALL VIEW?
Below is a screenshot of a piece of a waterfall.
What is shown above is OVERWHELMING! We get it. So we will do our best to make it as easy as possible.
Basically the waterfall is a cascading chart of each resource loaded by a browser – and in a nutshell the shorter the horizontal lines are the better!
THE COLORS MAN – THE COLORS!
As you can see in the image below everything is color coded and every color has a significance.
DARK GREEN – DNS: In order for the browser to deliver your website, it has to lookup your DNS to be able to deliver the IP address properly to let the website be seen.
ORANGE – CONNECT: A TCP connection must be created before the browser can deliver your website – this should only appear on the first few rows of the waterfall.
DARK PURPLE – SSL: Any resources that are loading from a secure website will need to be processed as such – the purple will signify how long it is taking to connect to that SSL item.
The above are items that are a little more complex and may require more technical resources to fix.
The OTHER colors that appear above the actual waterfall – blue, orange, green, purple, green, red and gray are all reflective of the type of content on your website.
For example, if you see a red line in a row – you will know that is a font file being loaded, if you see a green – then you know it is a CSS file that is being loaded.
REDUCING WATERFALL WIDTH.
For each line item in your waterfall you want it to be as low in width as possible – simply put, the less wide the waterfall is, the faster your website will load.
In viewing a portion of a waterfall for the website Playful Kitty – who we would like to thank for being a “subject” for us – we can see some really short rows – and some really long ones.
Playful Kitty is actually using Cloudflare with her website which makes things a bit more interesting!
Let’s review what we are seeing here:
Light colors versus Dark colors: The lighter time is the time from when the browser sends the request out on the web until the first byte comes back and makes a connection. The darker color is the time it takes to download the resource.
ISSUE #1 – First time to byte is almost 4 seconds! This is one of the more common issues which should actually could get a post of its own. But typically it is a server related issue if you are seeing the blue as it is shown here.
ISSUE #2 – You can see a lot of purple in her waterfall – lots of light purple and then small dark purples at the end. The light purple as noted above is the website calling to deliver the image – the dark is how long it took to download the image.
THE GOOD: On the good side her waterfall is left aligned – all the bars start pretty close to the left side of the waterfall which means all the resources are being loaded concurrently as opposed to waiting for one resource to load and then starting a new load.
RED AND YELLOW HIGHLIGHTS.
You may see a HIGHLIGHTED row in your waterfall – and it can be yellow or red as shown in the below image.
RED are errors, usually 404 as seen in the example above and simply means your website is calling something that does not exist. Think page not found. The best thing to do is to remove the call for the element that is missing if it is not something that is needed.
YELLOW errors are signs of redirect issues and are commonly shown as 301 or 302 redirects. This means you are calling the resource at one URL (maybe http://thiswebsite.com) – but the resource has moved to a new URL (maybe https://thiswebsite.com). With more sites moving to https this is becoming a more prominent issue for page speed.
Both of these can greatly impact page performance, so these should be addressed as quickly as possible.
CHECKING OUT THE IMAGES.
One of our favorite tools that we recommend to help website owners is the “View All Images” tool. This link is at the bottom of your waterfall as seen in the image below.
You can simply click on that link and you will see all of the images that are in your waterfall — but as actual images with the sizes that are reflected on the website as well as the size it could be if compressed.
This is a great way to easily see which images you need to resize or compress for faster download.
And because there is just so much to this I wanted to put together a brief video outlining the above as well as reviewing the PlayfulKitty website at a base level so you can see everything and understand everything in post 1 and 2 about the WebPageTest tool! Not the shortest video – and I know a little small so we will redo it soon so it is easier to see!
1) Review your waterfall.
2) Look for long lines of colors in the rows.
3) Make list of the resources you have concerns about that are reflective of those long color blocks.
4) Can you delete the plugins or resources that are of concern?
5) If you are seeing large purple lines – have you optimized and resized those images?
6) Ask questions! We are here to help if we can!