For a successful online business or blog, it is essential that you know how quickly your website loads and how you can optimize WordPress accordingly. However, good analysis tools provide a huge amount of data. The waterfall charts in particular are not easy to read. Today, I'm going to show you three simple tricks that will help you get more out of your performance analysis at a glance and optimize WordPress in the right places.

When I first started looking into WordPress optimization, I also used webpagetest.org for the first time. At the time, I was literally overwhelmed by the results. The waterfall chart in particular initially seemed like a data beast that was hard to grasp and organize: Colors, numbers, the length of the bars, their order, everything has a meaning.

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

Today, I'll show you how you can use three simple tricks to record important key data about your website's loading 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 recognize whether your server supports HTTP/2

Imitation recommended

A lot of the data I'm showing you today comes from webpagetest.org. The waterfall charts of this tool are particularly complex, but also offer a lot of insights into your website.

If you would like to see the test results, simply click here and take a look at the complete data in Webpagetest.

If you want to optimize your own website with the help of a Webpagetest analysis, 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 will reduce the chance of measuring outliers and give you a better database for important decisions.

This is only the first third of the waterfall diagram for raidboxes.de. And it is already clear here that the diagram is not easy to penetrate.

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 it takes for the first byte of data to be downloaded from the web server. This means that virtually nothing happens during this time. At least nothing that could be perceived as a page load. It is therefore important to keep the time to first byte as short as possible.

Take a look at the first query of your waterfall diagram. This should be as short as possible. Ideally less than 200 milliseconds.

The first request of your website should be as short as possible. Ideally less than 200 ms.

This example illustrates what I mean: Before the move to us, this website from one of our customers sometimes had a TTFB of more than 3.5 seconds. After the move, it was well below 200 ms. The pale blue area of the first request in particular has been massively reduced.

Before:

With Raidboxes:

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

Recognize images and resources that are too large

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

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

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

Webpagetest shows you exactly which resource is involved for each request. This makes it easy for you to find out which image on your WordPress website is too large 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 further reduces the loading time of your website.

Recognize HTTP/2

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

If the requests from your website are processed in parallel, HTTP/2 is active.

And this mnemonic also illustrates perfectly what HTTP/2 actually does. If your website is encrypted with SSL, then HTTP/2 allows several web server requests to be processed simultaneously. This reduces the overall loading time.

Here is an empty WordPress website without SSL:

And here is the same website with SSL certificate, i.e. also with HTTP/2:

As you can see, in the first case, the individual requests are loaded one after the other. In the second case, however, most of them are loaded simultaneously.

Admittedly: There is no optimization option from WordPress here. It is best to ask your hosting provider whether 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 chart. You can see whether your website benefits from certain technologies, how quickly your web server responds and whether there are any hidden load time slowdowns on your website. If you want to comprehensively analyze and optimize your WordPress website, there is no way around waterfall charts.

Do you know any other tricks for quickly recognizing typical loading time brakes? Then let us know!