Optimizing WordPress: How to Analyze Your Website in 7 Seconds

Jan Hornung Last updated 12.10.2020
9 Min.
With these tips and our cheat sheet you will analyze your WordPress sites  in only 7 seconds and even better than Google PageSpeed Insights
Last updated 12.10.2020

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:

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:

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.

WordPress  optimize Pingdom Waterfall
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.

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:

  1. 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.
  2. 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.
  3. A legend shows what kind of resource is loaded.
    Webpagetest marks HTML, CSS, images, Flash etc. with colors, Pingdom uses icons for this.
  4. 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: How to Analyze Your Website in 7 Seconds
WordPress  optimize areas of a waterfall diagram
This image shows the four areas described above.

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.

Note

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.

WordPress  optimise mapping of the perceived loading time
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 gives you 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 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.

WordPress  optimize loading behavior of a WordPress site  with and without HTTP/2
On the left the typical loading behavior of a WordPress site without HTTP/2. The individual HTTP requests are executed one after the other. On the right you see how the same site behaves with HTTP/2: The individual requests are loaded simultaneously.

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:

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.

WordPress  optimize this is how it looks when images are really too big
An extreme but very vivid example of uncompressed images. Some of the files alone take over eight seconds to load and slow down your whole site.

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.

OptimizeWordPress  Identify redirects
This site 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 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.

WordPress  optimize in the waterfall diagram errors are identified with red lines
This page produces a 404 error

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!

RAIDBOXER from the beginning and Head of Support. At Bar- and WordCamps he loves to talk about PageSpeed and website performance. The best way to bribe him is with an espresso - or Bavarian pretzel.

Comments on this article

Post a comment

Your email address will not be published. Required fields are marked with *.