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".You can use these tools for very comprehensive performance analysis – if you know what to look for. Today, I'll show you how to conduct a performance analysisin just seven 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 use performance tool that also displays the loading time of your site and shows you the exact loading behavior of your blog, shop, or company site.
These tools include Pingdom, GTMetrix , Webpagetest.org. They often provide a so-called Waterfall diagram too. 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's no better data source that shows you how fast and efficient your site loads, how good your web host is and where your website's problem areas are.
And, with a little practice, you'll be able to analyze every website in seven seconds with just a quick look at the data! 😉
You're asking yourself how? 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 all this fuss is about? There are already great performance tools available that show me all the important optimization measures. Moreover, it's usually limited to the following points anyway:
- Caching: Either server-sided or by plugins
- Image optimization:Check out our plugin comparison.
Sure, if you've followed and optimized these points, you'll have created a very good basis for a really fast website. That's why these reasons are, quite rightly, covered in all good performance guides.
Some good performance guides:
- The comprehensive WordPress performance guide from Hootproof (German)
- From Trabbi to Porsche – seven tricks to make your WordPress site faster by WP Ninjas (German)
- 13 measures to prepare your WordPress for high load by our Head of Development Matthias (English).
Even with the most common speed breakers for WordPress sites, these reasons always come out on top.
Our experience from hundreds of systematic performance tests with webpagetest.org and extensive site checks, however, shows that even with supposedly "thoroughly optimized" WordPress sites, there are always performance pitfalls. This is exactly where the waterfall diagram helps because it can do something special. It shows you how your site loads, which elements are loaded and how fast it all happens.
How to access this treasure trove of data
All good performance tests provide waterfall diagrams. If you use Pingdom Tools, for example, you just need to scroll down far enough to find it.
But to able to gather the information correctly, you first need to understand how to read waterfall charts.
How to read waterfall diagrams correctly
The concentrated density of information means that waterfall diagrams aren't exactly known for being very clear. In reality, 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. This chronological structure is what makes waterfall diagrams so valuable. They allow you to see exactly where loading time is lost and with 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 key shows which type of resource is loaded.
Webpagetest marks HTML, CSS, images, Flash, etc. with colors while Pingdom uses symbols.
- 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 know you know how to read a waterfall diagram. But what conclusions can you draw from it?
In the WordPress optimization process our Seven Second Performance Check (in German) 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 always refer to the waterfall diagrams from Webpagetest. This is because it's the tool we always use, either manually or automated.
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 isn't necessarily a bad sign. There are features and external resources that you simply can't 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. So we need to 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.
The new web standard allows requests to 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. The new standard thus 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's 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. There's certainly potential for optimization here.
If your waterfall contains more than 100 requests, consider which ones you could do without.
Tip #2: Detect loading time
The maximum value on your x-axis is essential for analyzing the loading speed. You can see here 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 quickly does this website (seem to) load?
It's therefore important that you, as the site operator, improve this feeling of speed as much as possible. This can be done by optimal caching, above-the-fold optimization or, if your customers are located abroad, by using a content delivery network (CDN).
Luckily, waterfall diagrams also help you get behind this felt loading time. As far as we know, Webpagetest is the only free tool that distinguishes between technically measured loading time and the perceived load time for users .
The whole diagram shows 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. Pingdom Tools or GTMetrix don't include this in their diagrams as far as we're aware. This rule therefore only applies if you use Webpagetest:
The green line should appear after about 2 to 3 seconds, the blue line after seven seconds at the latest.
Tip #4: HTTP/2 vs. HTTP/1
HTTP/2 offers a crucial advantage over to HTTP/1. Websites load much faster with the newer web standard. However, in addition to an SSL certificate, you're also dependent on your host providing this service. Many website operators aren't 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 that's despite most webmasters assuming they've already got the best out of the images.
In our experience, images are, after caching, the second most important factor of page speed. For each image you upload in the backend, a whole series of additional files i.e., 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 key. Webpagetest displays them with purple bars, Pingdom with an icon. Only GTMetrix doesn't eparately label images. In any case, if the corresponding bars are much longer than the bars of the remaining requests, it indicates a long image loading time.
In cases like the one shown above, you really 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.
A waterfall diagram allows you to 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've 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 elements of a web page aren't rendered correctly. This could be the case for AdSense frames, for example, or integrated maps and fonts.
In this case, the waterfall diagram displays an error message and marks the line with the relevant query in red. The diagram also indicates the type of error and the resource producing the error.
Lines highlighted in red indicate errors in the rendering process.
Find all tips 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 you need to keep in mind as a site operator. This include 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 ten)?
- 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 (redirects)?
- Are there red lines (errors)?
OK, we'll admit it. It may take you a little longer than seven seconds to analyze the data for the first time. But with a little practice, waterfall diagrams will allow you to understand your WordPress projects much better and optimize your sites more effectively. Good luck with your analysis!