What is GTmetrix and how does it work?
GTmetrix is the free performance testing tool built by the people of GT.net, a hosting company based in Vancouver, Canada. They provide dedicated, clustered, and private cloud hosting solutions, plus a specific toolset dedicated to performance: among them, there’s GTmetrix. Compared to other developer tools, GTmetrix is pretty easy to use and the beginner can pick it up pretty quickly. It uses a combination of Google PageSpeed Insights and YSlow to generate scores and recommendations.
GTmetrix also have premium plans, but in this blog post, we will be using the free version. If you have an account you can use specify a number of additional analysis options. The first is the ability to choose the location in which you want to test your URL. The physical location you choose is actually very important as it relates to where your website is actually hosted. The less latency, the faster your load times. Currently available locations include:
- Dallas, USA
- Hong Kong, China
- London, UK
- Mumbai, India
- Sydney, Australia
- São Paulo, Brazil
- Vancouver, Canada
You can choose which browser you want to use. You can test with Chrome (Desktop) and Firefox (Desktop). Mobile versions are available in their premium plans. They also allow you to change the connection speed, which means you can simulate various connection types to see how they affect your page loads.
Additional options include the ability to create a video. This can help you debug issues as you can see how the page renders. The Adblock Plus is a nice feature. If you are running a 3rd party ad network such as Google Adsense, you can enable this option to see the full impact ads have on your load times. Here is a great comparison report on Smashing Magazine’s site. It is no surprise that the one with ads was 2.3 seconds slower.
How to read GTmetrix tabs and interpret their results
Once you launch a GTmetrix report, you’ll see all the info concerning the performance of your site.
First of all, you have a summary of the testing options you chose:
The nice thing about GTmetrix is that it allows you to see several types of metrics, including those coming from other testing tools, like PageSpeed and Yslow.
That’s why you’ll see the external performance scores on the left (GTmetrix doesn’t calculate one of its own), and the page details on the right:
The page details are the most important and immediate info you can have on your website performance:
- Fully loaded time, expressed in seconds
- Total page size, in MB
- Number of HTTP requests
This is a great start to understand how your site is performing. 🙂
Below we are going to break up each GTmetrix section and explain in more detail what the information means as it pertains to the overall performance of your website and what to do about the recommendations.
Focus on the user experience and the actual loading time, rather than trying to get your scores to 100.
The Pagespeed Tab
The Pagespeed tab is the first step in analyzing your report. It shows the most basic information and the lowest hanging fruit for making your site load faster. Depending on your theme, the images you uploaded, the plugins you’re using, and many other settings, the Pagespeed tab will show different information for every site.
Here is a screenshot of what the results in the PagesPeed tab can look like:
As you can see, there’s quite a bit to talk about regarding GTMetrix. The report has shown plenty of potential for improvement.
The first recommendation is to minimize redirects, Minimizing HTTP redirects from one URL to another cuts out additional RTTs and wait time for users.
Sometimes it's necessary for your application to redirect the browser from one URL to another. There are several reasons web applications issue redirects. Whatever the reason, redirects trigger an additional HTTP request-response cycle and add round-trip-time latency. It's important to minimize the number of redirects issued by your application - especially for resources needed for starting up your homepage. The best way to do this is to restrict your use of redirects to only those cases where it's absolutely technically necessary, and to find other solutions where it's not.
Avoid CSS @import
Secondly, report suggests to avoid usage of css @import. Using CSS @import in an external stylesheet can add additional delays during the loading of a web page.
CSS @import allows stylesheets to import other stylesheets. When CSS @import is used from an external stylesheet, the browser is unable to download the stylesheets in parallel, which adds additional round-trip times to the overall page load. For instance, if first.css contains the following content:
The browser must download, parse, and execute first.css before it is able to discover that it needs to download second.css.
Compressing Files with Gzip
The third recommendation is to enable gzip compression. Without getting too technical, gzip is a webserver module that compresses the file size of your website and thus reduces the amount of data your visitor needs to download when accessing your site. We have a guide on configuring W3 Total Cache on our blog that includes enabling gzip compression.
Note that in some instances you cannot follow that recommendation completely. When expanding the block for gzip compression, GTmetrix presents you with a list of scripts to compress. Sometimes, it’ll show scripts you cannot control – like scripts from Google Analytics, Google Tag Manager, Facebook Pixel scripts, A/B testing tools, etc. You can recognize those by the URL is different from your page’s URL.
This example from a different page shows a css script that should be compressed with gzip. Post compress website owner would save only 8KiB in file size by compressing the file. There’s no reason to assume that this improvement would make a noticeable difference in loading speed – it’s too marginal. In these situations, I recommend you accept the “A(93)” rating for this subcategory as good enough.
Optimize images for loading fast
On most websites, you’ll also see the Optimize Images message showing up. That message relates to image files being bigger than they need to be. Often, images can be compressed in file size without losing quality or getting blurry. You’ll want to follow best practices and guidelines for image optimization. If you are on WordPress, many WordPress plugins can make reducing image file sizes a breeze.
The YSlow Score
The next tab in the GTmetrix report is called “Yslow Score.” It’s based on an algorithm created by Yahoo! to measure the performance of a website and can give complementary insights to the PageSpeed tab.
Here’s a report of blogabout.blog:
Missing Expires headers
Expires headers tell the browser whether they should request a specific file from the server or whether they should grab it from the browser's cache. The whole idea behind Expires Headers is not only to reduce the load of downloads from the server (constantly downloading the same file when it's unmodified is wasting precious load time) but rather to reduce the number of HTTP requests for the server.
Adding Expires Headers is important to reduce HTTP requests which reduces the time it take for the server to communicate with the browser. It also allows your users to reuse the cache files that have been stored in the browser to reduce the amount of files they need to download.
To know how to add Expires Headers, see PageSpeed's Leverage browser caching recommendation for details.
Use a Content Delivery Network (CDN)
Lastly, for the Yslow tab, I’d like to emphasize the importance of using CDNs. If your website visitors are located not just in a single location but all over the world, these make sense to implement.
If you’re not on any pre-configured CMS, you can create a free CloudFlare account and set up a CDN through their service. You can integrate them with your current caching plugin or install their own plugin from the Plugin Repository (for WordPress users).
Going through that process would be another article on its own though, so I’ll put links to relevant articles here:
Use Cookie-Free Domains
Setting up a cookie-free domain can be a significant boost in performance, as this allows you to ensure cookies aren’t sent with your static files (which usually don’t need to be cookied). Following this recommendation, you avoid unnecessary network traffic by not sending over cookies you don’t need.
To set up a cookie-free domain, you’ll need to set up a dedicated domain for your static content and point it to your wp-content directory. That domain could be static.yourwebsite.com. By setting the following constants in your wp-config.php file, you can tell WordPress to use that URL as wp-content URL and to set cookies for your root URL:
define(“WP_CONTENT_URL”, “http://static.yourwebsite.com“);define(“COOKIE_DOMAIN”, “www.yourwebsite.com”);
Some people recommend you should even go as far as getting your own domain for the static contents. They use examples of Yahoo! using yimg.com and YouTube using ytimg.com as reasoning.
Hint for CloudFlare users: you won’t be able to set this up. CloudFlare adds a cookie to measure their security rules against your website traffic, so you’ll need a different CDN than CloudFlare. That being said, CloudFlare caches static content by default, and you can verify that your content is being cached through Chrome’s browser tools (see screenshot below).
The Waterfall Tab
In this tab, you’ll see every single file that your site is loading. GTmetrix will show you all the details about how each file is impacting the loading time. The Waterfall Chart describes the loading behavior of your page, by dissecting every request and measuring its timing.
It contains every script, media file or external resource included in the tested page.
This tab is very useful to have an idea of what resources your page loads, and in which order.
For every request you have its loading time, represented by horizontal bars: the longer the bar, the slower the request will take to download/execute.
GTmetrix Waterfall Chart includes five columns; from left to right:
- File Name of the requested resources;
- HTTP Response Status returned from the server for that resource;
- File Origin, that is where the resource is coming from;
- File Size for each resource;
- Load Time Breakdown, which represents the time needed to download/execute each resource.
If you hover the file name, you’ll be able to read the full path of the selected file. And if you Ctrl+click on it, you can open the file in another tab, to better identify it and see its content.
Since you’re using WordPress, it will be easy to understand if that file is coming from one of the plugins or theme you’re using.
At this point, you have in front of you a very clear picture of how well your site is doing.
Before proceeding to the load time breakdown section, keep an eye on the fourth column, File Size.
If you notice large file sizes here, note down the file and try to fix it: are they images or videos? In this case, have a look at our comprehensive guide on how to optimize images and reduce their file size.
Load Time Breakdown
The color code that GTmetrix designed is helpful to distinguish the different parts of the loading process for each resource.
Hovering on the load time bar for each resource will open a pop-up where the different phases of the resource’s loading process are expressed in different colors:
- Brown for blocking
- Teal for DNS lookup
- Green for connecting
- Red for sending
- Purple for waiting
- Gray for receiving
In addition to the relative time of each phase of the request execution, GTmetrix also indicates the event timing, which is the specific timing at which certain milestones are reached.
There’s a color code for event timings as well:
- A green line depicts the moment when the very first rendering begins on the page (first paint);
- The blue line indicates the moment in which the browser considers the DOM ready.
- The red line is the Onload, that is when the page and all its components have downloaded and are processed by the browser.
- With the purple line we see the fully loaded event: the Onload has fired and there hasn’t been any network activity for 2 seconds.
Some of these lines are represented also in the next GTmetrix tab, labeled as Timings.
The Timings Tab
This tab is very helpful because it provides a clear and visual explanation of the different moments in which the loading time of your page is being split.
The first “Redirect” block shows how much time it takes for the visitor’s browser actually to get redirected to your web server. A typical example is that your visitors enter http://Blogabout.blog and then your domain provider has to redirect them to the HTTPS encrypted version of your website at https://blogabout.blog.
As you can see, in my blog site (not made up!), that process takes 0ms – which is already faster loading time of the website should be. My recommendation here is to change domain name registrars and double-check the SSL implementation with your web host, so you wouldn't experience issues while redirect.
The connection process itself is ok, taking up only 360ms. The web host takes 175ms to gather the data for the website for sending it back to the browser of my visitor, this is relatively fast.
The last two tabs of any GTmetrix report are Video and History.
The first one records a video of your page loading (bottlenecks included), while the second one shows the history of the performance of that same tested page.
In this article you were able to understand GTmetrix Performance Report, one of the best performance testing tools that you can use as an alternative (or along with) PageSpeed Insights.
The good thing about GTmetrix is that it provides not only instant indicators of speed and performance (like loading time in seconds, and scores), but also a comprehensive set of tabs to explore: from the Waterfall Charts to the Event Timings, to the Timings tab, plus a bunch of great insights and explanations about performance indicators.
If you would like to see more in-depth articles like the one above, please let me know through comments!