Server Setup

Testing client side performance with GTMetrix

by , , revisited on


In my earlier post, I’ve told you why you shouldn’t be really using GTMetrix of PageSpeed insights for testing your website performance. In most of the cases – yes, you shouldn’t.

That is because in most of the cases, you should only bother about server side performance, whereas those testing tools are only suitable for client side performance. What?

Client side vs server side website performance

Client side

In good all times of static HTML pages the website performance was only determined by simple things: HTML size, number of external CSS and Javascript files and how large they are, etc. All these metrics, measured together is client side performance. We can also give additional high level definition to it:

Client side performance is the size of website’s payload (HTML/CSS/JS/etc.) multiplied by the number of HTTP requests it is delivered with.

So the larger your HTML and external assets are – the worse. The more, even smaller CSS files you have – the worse. This is really all those GtMetrix and PageSpeed insights are all about. It’s more simple than you thought, right?. And wait, it’s not the performance metrics you should mostly care about!

Server side

Fast forward to today, and you’re in a world of WordPress, Magento, you-name-it-CMS websites where a single request to a PHP page results in more than a few seconds of waiting. Who / if ever(?) should care how big is the HTML you’re waiting for now? It can be as small as 100KB or as big as 1MB but you will end up waiting nearly same time, should the server side performance be terrible.

Let’s give it a formal definition.

Server side performance is the speed of releasing each and every single payload component of website by a server. In other words, it is how fast the PHP generates a page’s HTML. It is also how fast your server delivers the images, CSS and javascript.

When you should care about client side performance

Obviously, you should only deal with client side performance when your server side one is fine. You can minify and shrink your images, CSS and try to follow whatever GTMetrix / PageSpeed insights are telling you. Only to find yourself where you started in terms of time.

That doesn’t mean you shouldn’t care about client side performance at all. Naturally, once you have solved the server side puzzle and your WordPress server with several dozens of plugins delivers each page in fractions of a single second, it is time to look at the client side. Only then, not earlier!

Client side performance is good to look at when you’re done setting up proper server without control panel and want to further improve performance for mobile visitors where payload’s size is really important.

Now, how do we reliably test client side performance using GTMetrix?

To see how website itself (not third party js, css, etc) actually performs with the server settings, you can make use of special Page Settings in GTMetrix:

Proper GTMetrix settings

In existing test’s results, click on “Page Settings”. Choose Test URL in the nearest location to where your website is hosted, i.e. “London, UK”. Select “Chrome, Desktop”. Chrome has Brotli compression support and represents more average users than the Firefox’s default. Did you know that our server setup services comes with Brotli? 🙂

In URL whitelist, put your website’s domain like this:

https://www.example.com/*

If you have your website’s static files delivered under subdomains, don’t forget to add them to the list:

https://images.example.com/*

Click on Re-Test, and you will see results on your website’s client side performance, excluding performace bottleneck of everything external to it (yay, Google Analytics can go to heck with its Expires header value). The loadtime you see now is the time without all conversion tracking scripts you might have. If you’re following me – as funny as it is, you might (and you will) improve your conversions by removing all external (Google, etc.) conversion tracking scripts. More than 3 seconds load time will affect conversion rates.

External assets are major client side performance bottleneck. When I refer to external assets here I mean those Google Analytics, Facebook JS libraries, etc. etc. Please test with and without (empty) whitelist to see what I mean about external assets and how they affect performance or why it’s important to deal with them.

Random load time

You might find that GTMetrix might give you different loadtime every time you test with it. Now it’s 3 seconds, next thing it is 5, and now back to.. 2? This is normal since a GTMetrix testing server doesn’t always utilize its CPU in the same way. And neither do servers for external assets (on your own server or Google’s/Facebook’s).

To make your Before / After test results timing comparison more consistent, you can use throttled connections feature.

Meet a really throttled world wide web

The real users come from throttled connection and Gtmetrix has a nice feature to produce consistent results by using throttled connections as well. This will solve your “random” time puzzle by negating the “every time different CPU utilization” issue mentioned above. In Page Settings, choose “with 2G” connection.

I should wish you a happy testing with GTMetrix now. But wait, a shameless ad before you start – get a taste of perfect WordPress setup here.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.