If you want to optimize your WordPress website, some measures are crystal clear, well-known and proven effective. But often even supposedly optimized sites still leave room for improvement. Therefore it is worthwhile to look beyond the edge of Google PageSpeed Insights and Co. Many performance tools are real "data goldmines"that you can use for a very comprehensive performance analysis – if you know what to look for. Today, i will show you how to conduct a performance analysisin only 7 seconds.
Simple performance tools like Google's Test My Site , Google PageSpeed Insights result primarily in a list of recommendations for action. This may be fine for a start. But if you want to efficiently monitor and optimize your WordPress projects, you should sooner or later rely on a performance tool that also displays the loading time of your site and shows you the exact loading behaviour of your blog, shop or your company site.
This includes for example Pingdom, GTMetrix , Webpagetest.org. These tools often provide a so-called Waterfall diagram . These somewhat bulky data sets are hardly noticed by many users. But if you use WordPress professionally, you should understand how they work. Because: There is no better data source that shows you how fast and efficient your site loads, how good your web hoster is and where your website's problems are located.
And – with a little practice – you can even analyze every website with just a quick look at the data and in only (hand-stopped) 7 seconds! 😉
You're asking "How do I do this?" No worries, today I'll show you just that, step by step!
Without the waterfall diagram, you're just scratching the surface
Maybe you're wondering now: What's all the fuss about? There are great performance tools that already show me all the important optimization measures. Moreover, it is usually limited to the following points anyway:
- Caching: Either server-sided or by plugins
- Image optimization:See for example our plugin comparison.
Sure, if you have followed and optimized these points, you have created a very good basis for a really fast website. That's why these reasons are (quite rightly) covered in actually all good performance guides.
- The comprehensive WordPress performance guide from Hootproof (German)
- From Trabbi to Porsche – 7 tricks to make your WordPress faster by WP Ninjas (German)
- 13 measures to prepare your WordPress for high load by our Head of Product Matthias (English).
And also with the most frequent speed brakes for WordPress sites these reasons always come out on top.
However, our experience from hundreds of systematic performance analyses with webpagetest.org and extensive site checks shows that even with supposedly "thoroughly optimized" WordPress sites there are always performance pitfalls. And this is exactly where the waterfall diagram helps. Because it can do something special: It shows you how yours site loads, which elements are loaded and how fast the whole thing takes place.
This is how you access the data treasure
All good performance analyses also output waterfall diagrams. For example, if you use the Pingdom Tools, you only have to scroll down far enough.
But to get all this information right, you need to understand how to read waterfall charts correctly.
How to read waterfall diagrams correctly
The concentrated density of information means that waterfall diagrams are not exactly known for their clarity. In fact, you only need to know four things to understand the data:
- The time is plotted on the x-axis.
Waterfall diagrams are structured chronologically: The x-axis shows you exactly when an element starts to load and how long it takes to load. It is this chronological structure that makes a waterfall diagram so valuable. Because this way, you can see exactly where loading time is lost and which processes you need to start in order to optimize your loading speed.
- Each HTTP request is depicted on the y-axis.
For most waterfall diagrams, you can click on the elements on the y-axis to get additional information.
- A legend shows which type of resource is loaded.
Webpagetest marks HTML, CSS, images, Flash, etc. with colors, Pingdom uses symbols for this purpose.
- An additional coding system provides information on how individual requests are executed - for example, how long it takes to connect to the server or whether HTTPS is used.
Optimizing WordPress with our 7 second analysis
So, it is clear now how you read a waterfall diagram. But what conclusions can you draw from it?
In the WordPress optimization process our 7 second analysis has proven itself successful: The chart gives you a quick overview of the seven important factors for your loading speed. These seven hacks help you to understand exactly how and how fast your website is rendered. And they show your website's problems and where there is potential to make your site even faster.
By the way, in our examples we will always refer to the waterfall diagrams of Webpagetest, since we actually always use this tool, no matter if manually or automatically.
Tip #1: Size matters
The longer the waterfall is (i.e. the more elements are on the y-axis), the more requests have to be processed and the slower the site. Nevertheless, a long waterfall does not necessarily have to be bad. There are features and external resources that you simply cannot do without. With us, for example, our integrated chat is one such tool. The loading of the chat program naturally slows down our website. However, the fast support via our live chat is crucial for our hosting services, which is why we keep using this plugin.
HTTP/2 also ensures that the mere number of requests no longer has the same significance as it did a few years ago.
Because with the new web standard, requests can be processed simultaneously – instead of one after the other. In addition, the server sends HTML files to the browser under HTTP/2 as a precaution. So, the new standard compensates for disadvantages that may arise from a large number of HTTP requests. However, to benefit from HTTP/2, your web page must be loaded over HTTPS, via a SSL certificate .
In any case, experience has shown that there is no direct correlation between the length of a waterfall and the actual loading speed. At least up to a certain limit: With well over 100 requests , there is potential for improvement.
If your website exceeds this threshold, you should take a closer look at your HTTP requests. Our homepage, for example, loads with over 130 HTTP requests. So there is potential for optimisation here.
If your waterfall contains more than 100 requests: Think about which of those you could do without.
Tip #2: Detect loading time
The maximum value on your x-axis is essential for analyzing the loading speed: Here you can see how much time passes until your website is completely rendered. The smaller this value is, the better.
If the maximum value of your x-axis is above 10, you should definitely consider the loading speed of your site.
The total loading time of your website should be under 10 seconds.
Tip #3: Detect perceived loading time
Most users don't care much about what values analysis tools spit out. The only thing that counts for them is: How fast does my website load?
For you as a site operator it is therefore important to improve this feeling of speed as much as possible. You can achieve this through optimal caching, above-the-fold optimization or – if your customers are located abroad – by using a content delivery network (CDN).
Fortunately, one also gets to know this felt loading time very well by means of waterfall diagrams. To our knowledge, Webpagetest is the only free tool that distinguishes between technically measured loading time and the perceived load time by the user .
The whole diagram represents the – less important – technical loading time. The perceived loading time is hidden between the blue and green lines in the diagram.
The green line indicates when the first visual element of the web page is loaded (this is called the "Start Render" point). The blue line indicates when the user perceives the visual element site as fully loaded. From this point on, the probability that the visitor will interact with your site increases significantly. These two lines should be as far left and as closely together as possible.
Webpagetest.org is the only tool that can give you that data. At least to our knowledge Pingdom Tools or GTMetrix don't include this in their diagrams. This rule therefore only applies if you use Webpagetest:
The green line should appear after about 2 to 3 seconds, the blue line after 7 seconds at the latest.
Tip #4: HTTP/2 vs. HTTP/1
HTTP/2 offers a crucial advantage compared to HTTP/1: With the newr web standard websites load much faster. However, in addition to an SSL certificate, you are also dependent on your hoster providing this service. Many website operators are not sure whether this is actually the case with them or not.
One of the biggest advantages of HTTP/2 is the simultaneous processing of multiple requests. And you can clearly see this in your waterfall diagram. Since the requests are processed chronologically, several bars start at the same point on the x-axis when HTTP/2 is used.
If single requests load simultaneously in your waterfall chart, your website runs with HTTP/2.
Tip #5: Identify images that are too large
In about 30 percent of the websites we analyze, we still find potential in terms of image size. And this, although most webmasters assume that they have already made the best out of it.
In our experience, images are the most important factor of page speed – after caching. For each image you upload in the backend, a whole series of additional files, the thumbnails or featured images, are automatically created in WordPress. The correct compression of these files is one of the most effective ways to reduce image size and thus the loading speed of your site .
Suggested guides on how to optimize your images:
- WPMU DEV: "How To Properly Compress And Resize Images For WordPress“
- Our comparison of 5 image compression plugins for WordPress
- The makers of the Optimus plugin explain the basic differences between lossy and lossless compression
In the waterfall diagram, images can be quickly identified using the legend: Webpagetest displays them with purple bars, Pingdom with an icon. Only GTMetrix does not separately label images. In any case: If the corresponding bars are much longer than the bars of the remaining requests, this indicates a long image loading time.
In such a case as above, you should take a close look at your pictures. Just click on the corresponding request to see exactly which files are involved. This makes it much easier to search for speed brakes.
Long loading bars for image resources (purple) indicate potential for better compression of your files.
Tip #6: Track your redirects
A waterfall diagram helps you not only to understand when and how fast certain elements are loaded, but also how many redirects have been set up and where they direct to.
Requests with redirects are usually highlighted in color (here in yellow). The diagram also gives you information about the redirects that are set up and where these lead to.
So with a waterfall diagram you can see at a glance how many and which redirects have been set. By the way, this also helps to detect redirect loops after a DNS change. Thanks to the yellow markings, we have already been able to detect unnecessary or even harmful redirections several times.
Yellow highlighted lines mark redirects.
Tip #7: Detect errors at a glance
Occasionally it happens that elements of a web page are not rendered correctly. This can concern AdSense frames, for example, but also integrated maps and fonts.
In this case, the waterfall diagram ejects an error message and marks the line with the relevant query in red. The diagram also indicates the type of error and the resource that produces the error.
Lines highlighted in red indicate errors in the rendering process.
Find all tipps in our Performance Cheat Sheet
A waterfall diagram is probably the most valuable analysis you can get about your WordPress website. It combines various data, which you should keep in mind as a site operator: The loading times, the order of rendering and error messages. Armed with the tips from this article, you'll quickly identify in which areas there is still room for improvement:
- Is the waterfall too long (over 100 requests)?
- Is the maximum value of the x-axis too large (greater than 10)?
- Do requests load simultaneously (via HTTP/2)?
- Are the images too large (i.e. badly optimized)?
- Are the green and blue lines too far to the right or too far apart (does the user perceive the site as slow)?
- Are there unexpected yellow lines (redirecs)?
- Are there red lines (errors)?
Fair enough: The first time, it may take you a little longer than seven seconds to analyse the data. But with a little experience, waterfall diagrams will allow you to understand your WordPress projects much better and to optimize your sites more effectively. Good luck with your analysis!