Understanding the Pingdom waterfall chart will help you speed up your WordPress website.
What if you had a way to spot exactly where your WordPress website is loading slowly at a glance.What if you could see exactly what you could do to speed up your site in just a few minutes?Reading a WordPress waterfall chart doesn’t sound like the best way to spend your precious time. But what if you took a little time to understand what that technical chart means for your website?It would mean a much deeper understanding of what’s going on with your site. And most importantly, being able to improve it so that Google and your visitors are happier.
What’s a waterfall chart?
A waterfall chart is simply a visual representation of your web page as it is loading from start to finish. It shows what loads, when it loads and how long it takes.
Contrary to popular belief, you need no expertise to understand the chart. And you need no expertise to see where you can use it to speed up your WordPress website.
The best part is that a waterfall chart can show you exactly what is slowing down your site.
Here’s an example waterfall chart for an average WordPress website.
At the top there is a time scale in seconds, beginning at 0 (the start of page load) and continuing to the right when the entire page has finished loading.
There is a row in the chart for every element of the web page that has to be loaded: images, CSS files, script files, fonts from Google etc. A coloured block is shown for each of these resources at the time it starts to load. Obviously longer blocks mean longer loading time.
The ideal site would have fewer rows and smaller blocks for each row, something like this:
Some of these blocks could be better but note that the page has only 12 requests, is only 364 kB in size and loads in less than a second!
I’ll explain what each part of the chart means and how you can use it to improve your WordPress loading time.
Where to see a waterfall chart
Most website speed testing tools will show a waterfall representation of your website page loading time.
I’ll use pingdom‘s chart as an example because it’s free, fast and one of the most widely used speed testing tools..
What The Waterfall Chart Colours Mean
Here’s a description of what each colour means from Pingdom themselves.
How A Waterfall Chart Can Help You Increase Site Speed
Each part of the waterfall chart can point you to different areas for optimising your overall WordPress website speed.
Pink: Web browser is looking up DNS information
DNS (Domain Name Service) is the internet equivalent of a telephone book for websites. This portion of the waterfall chart shows how long it takes to look up your internet name and find your IP address.
This shows how long it takes DNS servers to respond the first time a visitor visits your site.
A lot of people misinterpret this part: Pingdom does a fresh lookup the first time you run a test. If you run the test again, this lookup is cached (saved) so that it doesn’t need to be run every time. Thus, a second and third test on the same site may show a faster time for this DNS lookup. (In the example chart above, the pink clock in a second test would be negligible.)
DNS lookups also include looking up any sites that your site loads scripts from. So if you use Google Analytics on your site, that site must also be looked up before anything can be loaded on your page.
Purple: Web browser is performing a SSL handshake
If your site URL begins with HTTPS, you’re using SSL (secure socket layer).
SSL encrypts traffic to and from your website and you should be using it. This negotiation takes a bit of time but these days that time is usually not substantial.
Blue: Web browser is connecting to the server
This is the time it takes to make a connection to your web server.
The main takeaway from the Connect portion of the waterfall chart is that on a slow web server this blue bar will be significant, meaning your web server is probably slow. This is one good reason to use good hosting like Siteground.
Yellow: Wait Web browser is waiting for data from the server
This is the time it takes for data to get from your server to your browser. Generally a wait time of 100ms is good; anything over 400ms is slow.
This could mean that the particular resource is big and takes some time to download. It could also mean that the transfer speed of your web server is slow. If it’s the latter, it’s again time to think about upgrading to a better host.
A CDN (Content Delivery Network) will also be of obvious help here since it will deliver the data from a server nearest your visitor. Using a CDN like the one we offer has reduced this wait time for our customers by 70%!
In our example above, we can clearly see that there’s a long wait time from the very beginning. A look at the chart further down gives us a huge indicator of what can be improved for this site:
All those long yellow blocks? You can see from the file names that they are mainly images being downloaded.
Orange/Green: Web browser is sendingreceiving data to/from the server
This is where you can make the easiest changes to your website speed. A large image file will show a longer green bar than a small file. So, optimising your images is a great place to start. This is particularly important as images now make up 70% of the average web page.
Again, using a CDN will help a lot here since the download will be from the server nearest your visitor.
Other important measurements
At the bottom of the pingdom waterfall chart are some important metrics:
Total number of requests
This is the number of times the browser asks the server for some data. Clearly, less requests will be faster.
You can lower the number of requests by using a good caching plugin like WP Rocket to download a bunch of files at once. The plugin can gather all your HTML, CSS or Javascript files into a single file (concatenation).
Total page size
Google recommends an overall web page size of less than 500Mb. The average is 1.8Mb. If yours is bigger, find ways to reduce it. For most sites, dealing with image optimisation is a great place to start.
Total load time
Google’s recommended time to fully load your page is under 3 seconds. The average? About 8-9 seconds!
Clearly you can endear Google to your site by getting below this average and closer to the ideal.
Conclusion
Don’t be scared of Pingdom’s waterfall chart: it’s a simple tool anyone can use to make a great start at increasing your WordPress speed.
As always with speed testing tools, it’s important not to get obsessed with the overall score. More important is that you can make improvements over time i.e. the general trend is toward a faster WordPress website.
(Beyond the basics mentioned above, we use the Pingdom waterfall chart regularly to dive deep. With it we can investigate bottlenecks caused by individual resources. Finding a new way to load even a single file can have great benefits to a site’s appearance in search results.)
Sources
https://kinsta.com/blog/pingdom-speed-test/https://tools.pingdom.com/https://www.keycdn.com/blog/waterfall-analysis/#1-DNS-Lookup-DNShttps://www.machmetrics.com/speed-blog/average-page-load-times-websites-2018/