If you want to optimize WordPress , some measures are crystal clear, well-known and proven effective. But even supposedly optimized sites often still have potential. Therefore, it is worthwhile to look beyond Google PageSpeed Insights and Co. Because many performance tools deliver true data gold mines thatallow a very comprehensive analysis - if you know what to look for. Today I'm going to show you 7 tips that can help you analyze yourdata in just 7 seconds.
Simple performance tools like Google's Test My Site or Google PageSpeed Insights mainly throw up a list of recommended actions as a result. This may be fine for the beginning. But if you want to efficiently monitor your WordPress projects and meaningfully optimize WordPress , you should sooner or later resort to a performance tool that also outputs the loading time of your site and shows you exactly how your blog, your shop, your company page 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 users. 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 site loads, how good your host is, how efficiently your site loads and where the construction sites of your site 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! 😉
How do you do that? I'll show you step by step today!
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-sideor per Plugin
- Image optimisation: See for example 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
- From Trabbi to Porsche - 7 tricks to make WordPress go faster from WP-Ninjas
- 13 measures how to makeWordPress fit for high load by our Head of Product Matthias.
And also with the most frequent load time brakes of WordPress sites these reasons land again and again on the front places.
However, our experience from hundreds of systematic performance analyses with Webpagetest and extensive site checks shows: Even in supposedly "thoroughly optimized" WordPress sites performance pitfalls can be found again and again. And this is exactly where the waterfall diagram comes in handy. Because it can do something special: It shows you how your site loads, which elements are loaded and how fast the whole thing goes.
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:
- Time is plotted on the X-axis.
Waterfall diagrams are structured chronologically: Using 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. with colors, Pingdom uses icons 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.
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?
For performance analysis, the 7-second analysis has proven itself to us: The chart gives you information about seven important factors for the loading speed at just one glance. These seven hacks help you to understand exactly how and how fast your website is rendered. 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 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.
With the new web standard, requests can be processed simultaneously instead of one after the other as before. Furthermore, 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. In order to benefit from HTTP/2, however, your website must be loaded via HTTPS, i.e. it must have an SSL certificate.
Anyway, our experience has shown that there is no direct correlation between the length of a waterfall and the actual loading speed. Atleast up to a certain limit: With significantly more than 100 requests, there is definitely savings potential in most cases .
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 really care what values analysis tools spit out. The only thing that matters to them is how fast theyfeel site loads.
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).
Fortunately, you can also get to the bottom of this perceived load time very well via waterfall diagrams. To our knowledge, Webpagetest is the only free tool that can distinguish between the technically measured load time and the perceived by the user loading time.
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.
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 that it can handle multiple requests at once. And you can clearly see this in your waterfall diagram. Since the requests here 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 optimizationPlugins 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 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.
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 markers, we have been able to detect unnecessary or even harmful redirects on several occasions.
Yellow highlighted lines mark redirects.
Tip #7: Recognize 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.
All tips at a glance with the cheat sheet
A waterfall diagram is probably the most valuable evaluation you can get for your WordPress sites can get. Here, various data are combined that you should keep an eye on as a site operator: Load times, render order, and error messages. Armed with the tips from this article you will quickly recognize and effectively, 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 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!