GTmetrix Speed Test Overview (2020)

GTmetrix Speed Test Overview

What is GTmetrix?

 

GTmetrix is a free webpage speed test tool created by a Canadian company called GT.net in 2010. With this tool, you can check the page load time of any website of your choice.

 

How to use GTmetrix?

 

The answer to this question is simple – go to https://gtmetrix.com and type in your (or someone else’s) domain name or the URL address which you’re going to analyze.

Important hint:

In order to receive the most accurate results of your tests, you should always omit the beginning of the full URL (http, https, and www) just like you do when you type any URL in the address bar of your web browser. Usually, you do not type in https://www.google.com if you want to visit Google search engine. You just type in google.com and press Enter.

Similarly, you would probably type in alivebetter.com instead of https://www.alivebetter.com in order to visit my blog. 🙂

In short, you should type in the URL for testing speed in the same form as you’d type it in the address bar of your web browser.

This is why I check the loading speed of my blog by typing in alivebetter.com (which is equivalent to https://www.alivebetter.com) instead of its full URL.

GTmetrix Speed Test 01

Since GTmetrix is a very popular tool, there are times when you have to wait in a queue before testing your URL.

GTmetrix Speed Test 02

And when does it happen?

Every afternoon and each evening, GMT.

Why?

Because this is the time when there is the highest number of people (from all over the world) available online simultaneously.

As a result of the test, you will see a page size, page load time, number of requests, and some other metrics associated with that page’s performance.

GTmetrix Speed Test 03

 

What is a YSlow score in GTmetrix?

 

YSlow is a set of performance recommendations from yslow.org.

If you want to find more information about each one of them, just keep reading this article.

 

GTmetrix Speed Test Results Overview

 

There are 6 tabs available as a result of any website speed test you can carry out using GTmetrix:

  • PageSpeed,
  • YSlow,
  • Waterfall,
  • Timings,
  • Video,
  • History.

In this part of the article, I will quickly review them all.

I will also recommend the best available tools you can use to solve each of the issues reported by GTmetrix.

Screenshots showing settings of WP Rocket (this is the plugin that solves almost every issue reported by GTmetrix) are available in one of my other posts.

 

PageSpeed

 

Defer parsing of JavaScript

 

JavaScript is, in general, a type of render-blocking resources. This means it can prevent the web page from being displayed until it is downloaded and processed by the web browser.

Deferring JavaScript tells the browser to postpone downloading JS files until HTML code is fully loaded.

The best way to maximize your score in this area is to use WP Rocket.

 

Specify image dimensions

 

Each user of new technologies probably knows that any image you can see online or offline has its dimensions measured in pixels.

When you add an image to your site, you should specify at least one of its dimensions.

And here’s an example:

After adding the first image to this post, I switched from Visual to the Text tab and modified the piece of code marked blue.

specify image dimensions - GTmetrix

By default, it was like

<img class="..." src="https://www.alivebetter.com/wp-content/uploads/2020/08/GTmetrix-Speed-Test-01.jpg" alt="GTmetrix Speed Test 01" width="1280" height="609" />

I don’t need any classes in my code so I delete them in order to make the code more clear.

As it comes to dimensions of images, it’s enough to specify just one dimension. The other one will be automatically adjusted to the first one.

If you’d like to specify the width of your images, you should know that it shouldn’t exceed 700 pixels (your web page will not be able to display wider images without enlarging them).

Indeed, you can upload larger images, but you’ll have to use an enlargement system to allow your visitors to see those images in full size.

As it comes to a professional enlargement system for your images, it’s straightforward to implement one using one of the plugins from this list.

Just install Simple Lightbox WordPress plugin, activate it, and add a hyperlink to your image according to the example from my last picture above.

In short, you need to use the code

<a href="imageURL"><img src="theSameImageURL" alt="alternativeText" width="max700px" /></a>

Most guides will tell you that you also have to specify the height of your image.

You needed to do that in the year 2000.

You needed it too in 2010.

But now, you don’t have to. 🙂

 

Minify JavaScript

 

Minification is, in short, the process of removing all unnecessary characters from the source code without changing its functionality. The examples of such characters can be white space characters, newline characters, and indentations.

The best way to resolve this issue is to use WP Rocket.

 

Minify CSS

 

Minification of CSS files works the same way as it does with JavaScript.

In order to minify CSS files of your website, you should also use the WP Rocket plugin.

 

Avoid bad requests

 

In order to avoid bad requests, you should remove broken links from your site.

In other words, you need to find as many 404 and 410 errors on your website as possible and fix them all.

The best way to discover such errors on your site is to use a few online broken link checkers.

Then, you should just fix those errors manually one by one.

 

Avoid landing page redirects

 

Landing page redirects are another very common issue that occurs on millions of websites globally (usually, there are too many 301 or 302 redirects).

The thing is that during those redirects, there is nothing beneficial to happen, but they slow down the overall page load speed.

The best solutions to this problem are available in one of the other articles on this blog.

 

Enable compression

 

Enable compression notice reported by GTmetrix refers to gzip compression.

Using gzip compression, you can reduce the sizes of some pages by up to 70%!

In order to enable gzip compression on your site, you can obviously use the WP Rocket WordPress plugin.

 

Enable Keep-Alive

 

As GTmetrix explains, “Enabling HTTP Keep-Alive or HTTP persistent connections allow the same TCP connection to send and receive multiple HTTP requests, thus reducing the latency for subsequent requests.”

Personally, I have never had any issues with this technology.

Therefore, I am 100% sure that if you follow all my advice from this article and from here, you won’t have any issues with keep-alive.

 

Inline small CSS

 

Inlining small CSS code may improve the performance of small sites with a low number of requests.

This task can be easily fixed using WP Rocket.

 

Inline small JavaScript

 

Since you can inline the CSS code of your website, you can do the same with JavaScript.

This time, the WP Rocket plugin also turns out to be very helpful. 🙂

 

Leverage browser caching

 

Leverage browser caching reduces page load times for returning visitors.

To fix this issue, you should use WP Rocket and go through this excellent guide.

 

Minimize redirects

 

Minimizing redirects is usually the same as avoiding landing page redirects.

Solutions to this issue are available in this article.

 

Minimize request size

 

It is quite evident that the fewer requests your website has, the faster it loads.

In order to reduce the number of requests, you should do two things – minimize the number of external scripts and use a lightweight WordPress theme.

As it comes to this blog, I have separate articles about the tools and plugins that I use.

In the area of WordPress themes, my recommendation for you is to use the Astra theme – no matter it is free or paid.

 

Optimize images

 

Optimizing images is going to reduce their sizes with minimal (or without any) quality loss.

As it comes to compressing images, I have compressed all my pictures using two tools – first, manually, using tinyjpg.com, and then automatically with ShortPixel for WordPress.

As it comes to their dimensions, almost all my images have 1280 or 1920 pixels of width.

My GTmetrix score in this area amounts to 100/100.

 

Put CSS in the document head

 

According to GTmetrix, “Moving inline style blocks and <link> elements from the document body to the document head improves rendering performance.”

I’m not sure which tool helps to achieve the maximum score in this area, but I have 100/100.

On the other hand, I’m sure that using the Astra theme and going through my Speed Up WordPress Guide is enough to fix this issue.

 

Serve resources from a consistent URL

 

If GTmetrix shows you this notice, it means that you have some identical resources being served from various URLs.

Usually, you just need to remove query strings from static resources (WP Rocket deals with this issue easily), and the notice goes off.

 

Serve scaled images

 

This notice means that your images shouldn’t be resized using CSS.

Instead, you should prepare pictures with specific dimensions and define the width of each of them in HTML code.

For more information on this topic, you can scroll this page up to the Specify image dimensions subsection.

 

Specify a cache validator

 

This notice is described by GTmetrix very shortly, “All static resources should have either a Last-Modified or ETag header. This will allow browsers to take advantage of the full benefits of caching.”

No matter what it means, you can solve it using the tools and my other resources recommended in this article.

 

Combine images using CSS sprites

 

This is another complex WordPress speed factor graded by GTmetrix.

This time, I also didn’t have to do anything else than I write about here and there.

 

Avoid CSS @import

 

Using CSS @import instruction would naturally slow down your site by increasing the number of served requests.

If you use high-quality WordPress themes and plugins, you don’t have to do anything more in this area.

 

Prefer asynchronous resources

 

Fetching resources asynchronously prevents them from blocking the page load.

The best tool which provides a solution to this issue is naturally WP Rocket.

 

Specify a character set early

 

A character set (charset) is a list of characters that browsers use to display web pages. One of the most popular character sets nowadays is called UTF-8.

Character set should be defined as early as possible to reduce your website’s latency time.

The most recommended method of specifying charset is to declare it on the webserver.

From my own experience, I can say that I never had to specify any character set, although I have changed my hosting provider many times in the past.

Summing up, if you choose one of the best hosting providers in the world, you won’t have to declare any character sets because they will probably do that on your behalf.

 

Avoid a character set in the meta tag

 

As I mentioned in the last subsection, a character set should be specified at the server level, and there is nothing to worry about on your end.

 

YSlow

 

GTmetrix Speed Test 04

 

Use cookie-free domains

 

Although there are many different theories about cookie-free domains, there is one undeniable truth in this topic. If you choose Cloudflare to be your CDN, your GTmetrix score in this area won’t be too high.

As you can see on the screenshot above, my grade equals 55/100, which is an average score.

On the other hand, the overall website performance and security are more important for me than that single score.

Let’s assume you need a high-quality Content Delivery Network, which is not too expensive and is supposed to protect your site against malware and hackers. In that case, Cloudflare is definitely the best possible choice.

 

Avoid URL redirects

 

Avoiding URL redirects is the same as what I described in Avoid landing page redirects, and Minimize redirects subsections before.

 

Add Expires headers

 

Adding the Expires headers is, in fact, very helpful as it comes to improving WordPress performance.

If you have this issue and want to solve it, here’s a complete guide covering the best possible solutions to this problem.

 

Make fewer HTTP requests

 

Minimizing the number of requests was also described above.

Just go back to Minimize request size subsection, and here you’ll find a solution.

 

Compress components

 

Compressing components will help you reduce their sizes. And the less space your files take, the faster they load.

More information about compression is available in one of the previous subsections – Enable compression.

 

Use a Content Delivery Network (CDN)

 

A high-quality CDN helps improve not only your website’s performance but also its security.

Nowadays, there are a few well-known Content Delivery Networks on the market.

However, if you want to achieve the best results in both areas and use a CDN for a reasonable price (or even for free), there’s no better choice than Cloudflare.

 

Minify JavaScript and CSS

 

JavaScript and CSS minification was also discussed earlier in this article.

As a reminder, I will mention that the best WordPress tool created to solve this issue is called WP Rocket.

 

Make AJAX cacheable

 

Making AJAX requests cacheable prevents unnecessary delays in page loading time.

AJAX, in general, is not an especially efficient solution in terms of site speed.

My solution is to use a lightweight WordPress theme that does not contain any AJAX code.

 

Remove duplicate JavaScript and CSS

 

As a matter of fact, removing duplicate JavaScript and CSS code could improve the loading speed of your website.

On the other hand, this issue almost never occurs if you use high-quality themes and plugins, which are frequently mentioned on this blog.

 

Avoid AlphaImageLoader filter

 

AlphaImageLoader is a technique used to support transparent PNG images on older versions of Internet Explorer (about 6.0).

Since IE got many updates since that time and most people use web browsers other than Internet Explorer, you can ignore this notice even if your score was lower than 100/100.

 

Avoid HTTP 404 (Not Found) error

 

The 404 errors were already discussed earlier in this article.

For more details, go back to the Avoid bad requests subsection.

 

Reduce the number of DOM elements

 

The Document Object Model (DOM) is a structure of nodes that contain different objects of your website.

Those nodes create a multilevel tree of elements.

The more nodes (elements) the tree has, the more they slow down your site’s loading process.

By reducing the number of DOM elements, you’ll also reduce the number of requests directed to your server.

So, in order to reduce the number of DOM elements, you should choose a high-quality WordPress theme (such as Astra) and start using WP Rocket.

 

Use GET for AJAX requests

 

There are two very popular methods of transmitting data on the Internet – GET and POST.

GTmetrix recommends using GET instead of POST for AJAX requests.

Before I give you my recommendation in this field, I will go back to the beginning of my blogging career first.

When I started the AliveBetter blog in 2016, the theme of my choice was Bridge.

Visually, it was an excellent choice, but it was very bad as it comes to my site’s speed.

On the day of this writing, I decided to visit the Bridge theme’s sales page and look for words such as ‘AJAX’, ‘speed’, and ‘fast’.

As you can guess, there’s information about their AJAX animations, but there’s nothing about speed and performance on that site…

After switching to Astra, it turned out that the Bridge theme was a paid theme that performs significantly worse than the free Astra!

So here’s my recommendation in this area – if you use any AJAX-based template for your website, switch to the one which is AJAX-free.

Using AJAX, you will probably never achieve two A’s (90+/100) in GTmetrix.

And starting from the year 2021, the site speed becomes one of the most important Google ranking factors due to Core Web Vitals coming in.

In such a case, it’ll be much better for you to care about your website’s performance more than the visual effects.

 

Avoid CSS expressions

 

Avoiding CSS expressions was previously recommended on the PageSpeed tab, but then it was moved to the YSlow tab.

Nowadays, if you use only good-quality themes and plugins, you don’t have to worry about it at all.

 

Reduce DNS lookups

 

Whenever your site requests some resources from any domain other than your own, the number of DNS lookups goes up.

So in order to reduce DNS lookups, you should do two things – try not to load any resources stored on other people’s web servers and avoid using external scripts such as the ones loaded by Mongoose Page Plugin.

In general, that plugin is great, but in my opinion, it slows down the website too much.

 

Reduce cookie size

 

Reducing cookie size is now recommended by the YSlow tab of GTmetrix.

Previously, it was recommended on the PageSpeed tab but then merged into the Minimize request size notice, which has been discussed earlier in this article.

 

Make favicon small and cacheable

 

Favicon is a small image icon file that shows up on the left side of a specified tab of your web browser.

This guide will show you how to create a WordPress favicon and add it to the site.

This tutorial, in turn, will show you how you can make your favicon small and cacheable.

 

Configure entity tags (ETags)

 

According to GTmetrix, entity tags (ETags) are a mechanism that web servers and browsers use to determine whether a component in the browser’s cache matches one on the origin server.

The appropriate ETag header is automatically added to your site if you host it on Apache 2.4 or higher (most hosting providers belong to this group).

As it comes to the Nginx servers (companies such as Kinsta), the appropriate header is enabled by default since 2016.

So, there’s probably nothing to do in this area.

 

Make JavaScript and CSS external

 

If JavaScript and CSS files are inlined in HTML documents, they get downloaded whenever the HTML document is requested.

If they are stored in separate files, they can be cached by the web browser. The latter solution helps to increase the loading speed of your website.

The solution to this issue is the same as I mentioned a few times before – use good-quality themes and plugins.

 

Waterfall

 

The Waterfall chart of GTmetrix can help you analyze your (or anyone else’s) website’s performance.

This tab displays the load times of each request which is processed while loading the tested site.

In my case, there are 18 requests in the summary of the speed test, which implies that there is the same number of requests on the Waterfall tab.

GTmetrix Speed Test - the Waterfall tab

Each asset from the list above has a timeline representing the phases of its loading.

Usually, there are up to 6 phases for each asset: Blocking, DNS Lookup, Connecting, Sending, Waiting, and Receiving. One of them has an additional stage called SSL.

Below, I will shortly review every stage listed above. Their corresponding colors are put in parentheses.

 

Blocking (Creme)

 

Earlier in this article, I mentioned that some JavaScript and CSS resources prevent your web page from being displayed until they are loaded.

The time discussed here is defined as Blocking by the GTmetrix.

By the way, you can see that, in the case of my blog, there’s minimum blocking time for all the resources stored on my server.

 

DNS Lookup (Teal)

 

In order to clarify what is a DNS lookup, I have to mention about Domain Name Servers first.

When you type any URL or domain name in your web browser’s address bar, the Domain Name System (DNS) has to find an IP address associated with your website. Then, the requests are directed to that IP address.

Suppose you want to reduce the DNS lookup time of your website. In that case, you should do three things – choose one of high-quality domain name registrars (personally, I use Namecheap), high-quality CDN (I use Cloudflare), and high-quality hosting (this blog is now hosted at Cloudways, but I’ll move to Kinsta in 2021).

 

Connecting (Light Green)

 

This is the time needed to establish a connection between the visitor’s web browser and the server, which hosts the requested site.

There are two solutions to make this stage faster – use high-quality hosting (server) and high-quality Content Delivery Network (CDN).

 

SSL (Light Green with Green)

 

Nowadays, SSL certificates are considered to be helpful in SEO.

As you probably know, there are a few types of SSL certificates. Some of them are premium, while others are available completely for free.

On my blog, I use a free certificate called Let’s Encrypt, although there are rumors that premium certificates can load slightly faster than the free ones.

 

Sending (Shade of Red)

 

This value specifies the time needed to send requests from the visitor’s web browser to your server.

The better web hosting you have, the better results you’ll achieve.

 

Waiting (Purple)

 

The waiting time of the Waterfall tab indicates how responsive your server and its network are.

 

Receiving (Grey)

 

Receiving specifies how long it takes to receive data from the server.

Good-quality CDN and web hosting are crucial in this area.

 

Timings, Video, and History

 

Timings and Video tabs are available only for those who create a free account on GTmetrix.

The Timings tab shows a visualization of such metrics as Time To First Byte (TTFB), DOM interactive, and First Paint. These values are taken into account while calculating your Web Vitals scores.

The Video tab allows you to create a video of your site loading process.

As it comes to the History tab, it is also available for free even without registration, and it shows three charts with historical measurements of a particular domain.

 

Quick Summary

 

This article reviews the excellent GTmetrix speed test tool, and it gives you straightforward and useful solutions to all possible issues.

As it turns out, you don’t have to do too many things to maximize your GTmetrix scores.

It’s enough to use high-quality hosting (such as Kinsta), theme (such as Astra), plugins (these are really great and useful), and a high-quality CDN (such as Cloudflare).