The heart of any good performance analysis

Jan Hornung Last updated 15.01.2021
4 Min.

For a successful online business or blog, it is essential that you know how fast your site loads. And how you can optimize WordPress for that. But good analytics tools provide tons of data. Especially the waterfall charts are not easy to read. Today I'll show you three simple tricks to get more out of your performance analysis with just one look and optimize WordPress in the right places.

When I first started looking into the topic of WordPress optimization, I also used for the first time. At that time, I was literally blown away by the results. Especially the waterfall diagram seems at first like a hardly graspable and ordering data beast: Colors, numbers, the length of the bars, their order, everything has a meaning.

Therefore, the charts can also tell you a lot of valuable things about your site . If you know what to look for.

Today I'm going to show you how you can use three simple tricks to capture important key data about your page load time at a glance and thus optimize WordPress in the right places.

Specifically, I'll show you:

  • how to recognize a slow web server
  • how to recognize uncompressed images and files that are too large
  • how to tell if your server supports HTTP/2

Imitation recommended

Much of the data I'm showing you today comes from This tool's waterfall charts are particularly complex, but also provide a lot of insight into your site .

If you want to follow the test results, just click here and check out the data in full in Webpagetest.

If you want to optimize your own site with the help of an analysis of Webpagetest you have to keep in mind that each test run is only a snapshot. If you really want reliable results, I advise you to run at least three tests. This way you reduce the chance of measuring outliers and get a better database for important decisions.

OptimizeWordPress  - Waterfall Diagram
This is only the first third of the waterfall diagram for And already here it becomes clear that the diagram is not easily penetrable.

How to recognize a slow web server

The most important value for evaluating the response time of your server is the so-called Time to First Byte (TTFB). The TTFB is the time that passes until the first data byte is downloaded from the web server. During this time nothing happens. At least nothing that your visitor could perceive as a page load. Therefore it is important to keep the Time to First Byte as low as possible.

Look at the first query of your waterfall diagram. This should be as short as possible. Preferably less than 200 milliseconds.

The first request of your web page should be as short as possible. Best under 200 ms.

This example illustrates what I mean: Before the migration to us, this customer site had a TTFB of more than 3.5 seconds in some cases. After the migration it was well below 200 ms. Especially the pale blue area of the first request has decreased massively.


OptimizeWordPress  - Example for extremely long Time to First Byte


OptimizeWordPress  - Time to First Byte with RAIDBOXES

So if you regularly measure a very high time to first byte on your WordPress projects, one optimization measure would be to switch hosts or upgrade your hosting plan accordingly.

Detect too large images and resources

Each line of your waterfall diagram represents a so-called request. This is a request from the browser to the web server. This request includes the download of data packets, for example images. In the example below, the purple part of the bars corresponds to the download time.

OptimizeWordPress  - detect images that are too large

As you can see, the images of this site take a very long time to load - almost 12, three and almost nine seconds. A clear indication for uncompressed images.

Long purple bars are a clear indication of a lack of image compression.

Webpagetest shows you for each request exactly which resource it is. So you can easily find out which image of your WordPress site is too big and should be optimized.

Of course, this also applies to all other file types that Webpagetest displays. For example CSS and JavaScript. These files can also be compressed, which reduces the loading time of your site once again.

Recognize HTTP/2

If you want to know if your WordPress projects benefit from the extra fast HTTP/2 standard, you can find out with just one look at the waterfall diagram.

If the requests of your site are processed in parallel, then HTTP/2 is active.

And this sentence already clarifies very nicely what HTTP/2 actually does. If your site is SSL-encrypted, then HTTP/2 allows multiple web server requests to be processed simultaneously. This reduces the overall load time.

Here is an empty WordPress site without SSL:

OptimizeWordPress  - The waterfall diagram of a WordPress site  without HTTP/2

And here the same site with SSL certificate, so also with HTTP/2:

OptimizeWordPress  - waterfall diagram of an empty WordPress site  with HTTP/2

You see: in the first case, the individual requests are loaded one after the other. In the second case, however, they are mostly loaded simultaneously.

Admittedly, there is no WordPress -sided optimization option here. The best thing to do is to ask your hosting provider if HTTP/2 is used.

Conclusion: Don't be afraid of the diagram!

With a little practice and the right knowledge, you can draw a lot of information from a waterfall diagram. You can see if your site is benefiting from certain technologies, how fast your web server is responding, and if your site is hiding any load time slowdowns. If you want to analyze and optimize your WordPress sites comprehensively, there is no way around the waterfall diagrams.

You know more tricks to quickly identify typical load time brakes? Then always give it to me!

RAIDBOXER from the very start and our Head of Support. He loves talking about PageSpeed and website performance at BarCamps and WordCamps. The best way to bribe him is with an espresso – or a Bavarian pretzel.

Comments on this article

Post a comment

Your email address will not be published. Required fields are marked with *.