If you want to optimize WordPress, some measures are crystal clear, well-known and proven effective. But even supposedly optimized websites often still have potential. Therefore, it is worthwhile to look beyond Google PageSpeed Insights and others alike, because many performance tools deliver true data gold mines that enable very extensive analysis - if you know what to look for.
Simple performance tools like Google's Test My Site or Google PageSpeed Insights mainly throw out a list of recommended actions as a result. This may be fine for the beginning. But if you want to monitor your WordPress projects efficiently and optimize WordPress in a meaningful way, sooner or later you should resort to a performance tool that also outputs the load time of your website and shows you exactly how your blog, your store, your business website behaves when loading.
These include, for example, Pingdom, GTMetrix or Webpagetest. These often provide a so-called waterfall chart. These somewhat bulky data sets are hardly noticed by many. But if you work professionally with WordPress, you should understand how they work. Because: There is no other data source that shows you how fast your website loads, how good your web host is, how efficiently your website loads and where the construction sites of your website are.
And with a little practice you can analyze any website at a glance and in (hand-stopped) 7 seconds 😉 How to do that? I'll show you step by step today!
Without the waterfall diagram, you're just scratching the surface
Perhaps you are now asking yourself: What's the point of all this effort? There are great performance tools that already show me all the important optimization measures. Besides, it is mostly limited to the following points anyway:
- Caching: Either server-side or via plugin
- Image optimization: our plugin comparison, for example.
Of course, if you have clarified 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 all good performance guides.
Some good performance guides:
- The comprehensive WordPress performance guide from Hootproof
- From Trabbi to Porsche - 7 tricks to make WordPress faster by WP-Ninjas
- 13 measures how to make WordPress fit for high load - by our former Head of Product Matthias.
And even among the most common WordPress website load time slowdowns, these reasons keep landing on the top spots.
However, our experience from hundreds of systematic performance analyses with Webpagetest and extensive site checks shows: Even in supposedly "thoroughly optimized" WordPress websites, there are always performance pitfalls. And this is exactly where the waterfall chart helps. Because it can do something special: It shows you how your website loads, which elements are loaded and how fast the whole thing goes.
How to access this treasure trove of data
All good performance analyses also output waterfall charts. For example, if you use Pingdom tools, you only need to scroll down far enough.
In Pingdom Tools, you first have to scroll a bit to reach the waterfall chart. The corresponding section here is called File Requests. Webpagetest and GT-Metrix each have their own tabs for the diagrams. However, in order to capture all this information properly, you need to understand how to read waterfall diagrams correctly.
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:
- Time is plotted on the X axis. Waterfall diagrams are structured chronologically. On the X axis, you can see exactly when an element starts loading and how long it takes to load. It is this chronological structure that makes a waterfall chart so valuable. This way, you can see exactly where loading time is lost and which processes you need to address in order to optimize your loading speed.
- On the Y axis, each HTTP request is recorded. In most waterfall diagrams you can click on the elements on the Y axis to get additional information about them.
- A legend shows what kind of resource is loaded. Webpagetest marks HTML, CSS, images, Flash etc. in colour, Pingdom uses symbols for this.
- An additional coding system provides information about how individual requests are executed - for example, how long it takes to connect to the server or whether HTTPS is used.
In the following figure you will find these four areas just described.
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?
The 7-second analysis has proven itself in our performance analysis: The chart gives you information about seven important factors for the loading speed at just one glance. These seven hacks help you understand exactly how and how fast your website renders. And they show where there is potential to make it faster, fix problems or improve it further.
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 taken down on the Y axis), the more requests have to be processed and the slower the website loads. Nevertheless, a long waterfall does not necessarily have to be bad. There are features and external resources that you simply can't or don't want to do without. In our case, for example, the live chat is such a tool. Of course, loading the chat program slows down our website. However, fast support via chat is a central part of our hosting. So we can't do without the plugin.
HTTP/2 also ensures that the mere number of requests no longer has the same significance as it did a few years ago.
This is because the new web standard allows requests to be processed simultaneously instead of one after the other, as was previously the case. In addition, under HTTP/2 the server already sends HTML files to the browser as a precaution. The new standard therefore compensates for any disadvantages that you may have from a large number of HTTP requests. However, to benefit from HTTP/2, your website must be loaded via HTTPS, i.e. it must have an SSL certificate.
In any case, our 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 significantly more than 100 requests, there is definitely potential for savings in most cases.
If your website exceeds this threshold, you should take a closer look at your HTTP requests. For example, our home page loads with over 130 HTTP requests. So there is potential for optimization here. If your waterfall contains more than 100 requests, take a close look at which of them you can 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 elapses 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 look into the loading speed of your website. The total loading time of your website should be under 10 seconds.
"*" indicates required fields
Tip #3: Detect perceived loading time
Most users don't really care what values analytics tools spit out. The only thing that counts for them is how fast they think the website loads.
When you operate a website, 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 - the use of a content delivery network (CDN).
Fortunately, however, you can also get to the bottom of this perceived loading time very well via waterfall diagrams. To our knowledge, Webpagetest is the only free tool that differentiates between the technically measured loading time and the loading time perceived by the user.
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 website is loaded (this is called the "start render" point). The blue line indicates when the user perceives the website to be fully loaded - at this point, the likelihood of interacting with the website increases significantly. These two lines should be as far to the left and as close together as possible.
The orange area shows the phase in which no visible content is rendered. Until the end of this phase the visitor only sees a white screen. The blue area marks the time span between Start Render and Load Time, during which the visitor can perceive a visible rendering process (e.g. an hourglass). Together both values form the perceived load time.
Webpagetest is the only tool that provides you with this data. This is not known to us from Pingdom Tools or GTMetrix. 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 decisive advantage over HTTP/1: websites load much faster with the newer web standard. However, in addition to an SSL certificate, you are also dependent on your host providing this service. Many people are not sure whether this is actually the case for them or not.
One of the biggest advantages of HTTP/2 is the ability to process multiple requests simultaneously. And this is what you can clearly see 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.
On the left you can see the typical loading behavior of a WordPress website without HTTP/2. The single HTTP requests are executed one after the other. On the right you can see how the same website behaves with HTTP/2: The single requests are loaded at the same time.
If individual requests load in parallel, your website runs with HTTP/2.
Tip #5: Identify images that are too large
In about 30 percent of the websites that we analyze, we still find potential in terms of image size. And this is despite the fact that most webmasters assume that they have already achieved the optimum here.
Images are - in our experience - after caching the most important factor of page load time. For every image you upload in the backend, WordPress automatically creates a whole bunch of additional files, the thumbnails or featured images. Proper compression of these files is one of the most effective ways to reduce the size and thus loading speed of your website.
Suggested guides on how to optimize your images:
- WPMU DEV: "How To Properly Compress And Resize Images For WordPress"
- Our comparison of 5 image optimization plugins for WordPress
- The plugin manufacturer Optimus explains 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 the figure you can see an extreme, but very illustrative example of uncompressed images. Some of the files alone take over 8 seconds to load, slowing down the entire website.
In a case like the one above, you should take a close look at your images. By clicking on the corresponding request, you can usually see exactly which files are involved in a waterfall diagram. This makes the search for load time brakes much easier. Long loading bars for image resources indicate compression potential.
Tip #6: Track your redirects
A waterfall chart not only helps you understand which items are loading when and how fast, but also how many redirects have been set up and where they are pointing. Requests with redirects are usually highlighted. The diagram also tells you which redirect is set up and where it goes.
The website in this figure has several 302 redirects in a row.
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 forwarding loops after a DNS change.
Thanks to the yellow markings, we have already been able to detect unnecessary or even harmful redirects several times.
Tip #7: Recognize errors at a glance
Occasionally it happens that elements of a website are not rendered correctly. This can affect AdSense Frames, for example, but also embedded maps and fonts.
In this case, the waterfall diagram throws an error message and marks the line with the request in question in red. In addition, the diagram indicates what the error is and which resource is producing the error. The website in this figure throws a 404 error.
Red lines indicate errors while rendering the website.
All tips at a glance with the cheatsheet
A waterfall chart is probably the most valuable evaluation you can get for your WordPress websites. It combines various data that you should keep an eye on: Load times, render order, and error messages. Armed with the tips from this article, you can quickly and effectively see where there is still potential for optimization:
- 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 (i.e. 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!