Skip to content

How to Use GTmetrix Speed Test Tool + Improve Your GTmetrix PageSpeed Score on WordPress

Once you’ve built a website, you will want to improve its performance. First, you need to know where you’re at right now. That’s what the GTmetrix speed test tool helps you with.

With GTmetrix, you plug in your site’s URL and GTmetrix spits back your current performance metrics, along with scores, recommendations, and analysis tools to help you make a WordPress website optimized for performance.

But there’s a lot of information contained in those reports, so how do you make the most of it to speed up your site?

How to Use GTmetrix Speed Test Tool

That’s what we’re going to cover in our GTmetrix speed test tutorial. In this post, we’ll:

  • ✅ Take you through everything the GTmetrix performance tool offers
  • ✅ Tell you how to improve your GTmetrix scores (and how much emphasis to place on those scores in the first place)
  • ✅ Show you some of the advanced analysis tools, like the waterfall analysis

📚 Table of contents

Basic information and GTmetrix FAQs

Before we get into the nitty-gritty, let’s go over some basic information and questions on what GTmetrix offers and how it works.

GTmetrix FAQ:
What does the GTmetrix speed test offer?

The GTmetrix speed test helps you assess your website’s performance in several different ways.

At a high level, it lets you see how long your site takes to load.

But then it also helps you analyze why your site loads that way and how you can improve it. To that end, it:

  • Grades your site against two different metrics – Google PageSpeed and YSlow.
  • Provides a waterfall chart and timings analysis to let you see how each individual request loads and where potential bottlenecks are.
  • Takes video recordings so that you can see how your site loads to visitors.
  • Logs your historical test results for the past 30 days so that you can analyze how your site’s performance changes over time.
Where do the GTmetrix scores come from?

GTmetrix does not have its own scoring mechanism. Instead, it generates its scores using two third-party methods:

  • Google PageSpeed – these are a set of 26 different rules. Each rule gets its own score and is weighted differently. The aggregate score is where your overall PageSpeed score comes from.
  • YSlow – YSlow is an open-source project from Yahoo (remember Yahoo?) that grades your website against 19 different rules. Just like PageSpeed, your overall score comes from the weighted result of all those individual rules.
Are the GTmetrix scores important?

Yes and no.

Here’s the “Yes” part:

You should pay attention to GTmetrix scores because having low scores probably means that you haven’t implemented some important front-end performance best practices.

But here’s the “No” part:

Your visitors don’t care about your GTmetrix scores – they care about how long it takes your website to load and become interactive.

Having a WordPress website that loads in under two seconds and has GTmetrix scores in the 70’s is a lot better than having a WordPress website that takes four seconds to load but scores perfect 100’s.

Basically, pay attention to the scores because they’ll give you a quick estimate of how optimized your site is, but don’t obsess about them because, at the end of the day, the only thing that matters is how quickly your website loads.

Can a website with low GTmetrix scores still load fast?

Yes – absolutely.

Here’s one of the big reasons why:

Both GTmetrix scores (PageSpeed and YSlow) are mostly concerned with front-end performance optimizations, like how optimized your images are and what your code looks like.

However, back-end performance optimization is just as important, if not more. This covers things like how good your hosting provider is and your server architecture (e.g. using Nginx vs Apache).

If your back-end performance is horrible, your site can still load slowly even if you have perfect GTmetrix speed test scores. Similarly, if you choose excellent WordPress hosting, your site can still load pretty fast even if you have low GTmetrix scores.

For the best results, you need to optimize both front-end and back-end performance.

Can I run a GTmetrix mobile speed test?

Yes! And it’s highly recommended to test both desktop and mobile performance because most people browse the web on mobile devices these days.

Basically, understanding how your site loads for desktop visitors is only half the battle – you also want to test what it’s like for mobile devices.

Mobile devices might have different patterns. For example, it will take a low-powered mobile phone more time to render JavaScript than it will take even a cheap desktop. So if your site is JavaScript heavy, it might have a larger effect on your mobile page load times than your desktop load times.

You won’t know that unless you specifically test for mobile performance.

In order to run GTmetrix mobile speed tests, you need to sign up for a free account – more on this in a second.

How to run a GTmetrix speed test

The simplest way to run a test on GTmetrix is to just go to the GTmetrix homepage, plug in your site’s URL, and click Test your site:

GTmetrix anonymous test

However, I would recommend that, instead of doing that, you register for a free GTmetrix account before you run a test.

With the public version of the test, your speed test will always use the following configuration:

  • Test from Vancouver, Canada
  • Chrome browser on desktop
  • Unthrottled connection

But if you register for a free account, you can change all of those conditions to fit your needs.

For example, if most of your visitors are from the Southwest USA, you could change the testing location to Dallas, Texas to get a better idea of the performance for your target audience.

Beyond changing test locations, this is where you have the option to use a mobile test device or change the connection speed (for example, simulating a slower 3G connection vs a speedy wired connection).

Once you register for your free account, you’ll be able to expand the Analysis Options to configure more about how your test functions:

Advanced test configuration options

Once the GTmetrix speed test runs its calculations according to your conditions, it will spit back a results page with:

  • A quick summary at the top that contains your performance scores and basic page details
  • Detailed results, divided into six tabs
Summary results

Let’s go through the six tabs…

1. PageSpeed tab

The PageSpeed tab is the default active tab when you run a GTmetrix speed test. It grades your website against Google’s PageSpeed rules.

For each of the 26 rules, your website will get a score from 0-100. Then, GTmetrix adds up those scores to generate your overall PageSpeed score.

The 26 rules are not evenly weighted, so some will have a larger effect on your overall score than others.

If you click the arrow to expand one of the rules, you’ll see more details about the specific elements on your site that are causing issues:

GTmetrix speed test PageSpeed tab

Here are some of the most common PageSpeed problems and how to fix them to improve your score…

Optimize images

Compressing your images lets you shrink their file sizes with zero or minimal loss in quality, depending on your compression algorithm.

To automatically optimize and compress all the images on your WordPress site, you can use the Optimole plugin:

Leverage browser caching

Browser caching speeds up load times by storing certain static assets in visitors’ local browsers. This means that, on subsequent visits, visitors’ browsers can serve up those assets from visitors’ local computers rather than downloading them on each visit.

Many WordPress caching plugins already offer browser caching, including WP Super Cache, WP Rocket, and WP Fastest Cache.

Serve scaled images

A scaled image is an image that’s perfectly sized for the dimensions that you’re using it for – we have an entire post on the concept of scaled images over on Themeisle.

One easy way to serve scaled images on WordPress is, again, with the Optimole plugin – it can automatically do the work for you so that your images are always perfectly scaled no matter what device a visitor is using.

Specify image dimensions

This one involves HTML – you want to specify the actual width and height of an image when you embed it.

For example…

Not optimal:

<img src="https://yoursite.com/wp-content/uploads/pandabear.jpg">

Optimal:

<img src="https://yoursite.com/wp-content/uploads/pandabear.jpg" width="500" height="200">

WordPress will do this by default when you insert images in the editor, but you’ll want to make sure to specify images that you use elsewhere (like in a plugin).

Minify HTML, CSS, and JavaScript

These are technically three separate rules, but I’m lumping them together because the basic concept is the same.

Minification involves stripping out unnecessary characters in your site’s code without changing its functionality. For example, removing white spaces and line breaks.

Some WordPress performance plugins, like WP Rocket, include minification. Or, you can use the free Autoptimize plugin to minify your site’s code.

Avoid landing page redirects

URL redirects are useful for directing traffic. However, you want to avoid using them if at all possible because they will slow down your website.

To fix this, make sure that all of your internal links go directly to the current URL – don’t rely on redirects to fix things. For example, if you automatically redirect http://yoursite.com to https://yoursite.com to force SSL usage, make sure that you always link to the HTTPS version of your site to avoid unnecessary redirects.

Defer parsing of JavaScript

When you’re talking about page load times, how fast your website becomes visible is just as, if not more, important than how long it takes your entire site to load.

JavaScript can slow this down by forcing visitors’ browsers to pause rendering the page to download and parse JavaScript. This is why you’ll often see it called render-blocking JavaScript.

To fix this, you should try to defer parsing JavaScript so that your site only starts to load/parse that JavaScript once the visible portion of your website has already loaded.

WP Rocket includes a built-in tool to help you do this. Or, you can use the free Async JavaScript plugin, which comes from the same developer of the Autoptimize plugin.

Combine images using CSS sprites

This is an advanced technique that lets you combine multiple images files into a single file using CSS. This lets you reduce the number of HTTP requests required to load your page.

You should not use CSS sprites for all of your images because there are negative SEO and accessibility implications (because you can’t add image alt text anymore). Instead, you should only use CSS sprites for decorative images, like logos of your clients or social share icons.

Unfortunately, there’s no plugin to automatically set up CSS sprites – you need to do it manually. Here’s how.

Enable compression

We already talked about image compression earlier, but this “compression” is referring to compressing all of your website’s files at the server level using something called Gzip compression.

On average, Gzip compression can shrink the size of your site’s files by about 70%.

Many WordPress performance plugins can help you enable Gzip compression, including WP Rocket, WP Super Cache, and WP Fastest Cache. Or, you can use the simple and free Enable Gzip Compression plugin for a dedicated solution.

You may also be interested in:

2. YSlow tab

Your YSlow score follows a similar approach to your PageSpeed score, it just uses a different set of rules to test against. The list is a little smaller – the YSlow tab on the GTmetrix speed test contains just 19 rules.

Like your PageSpeed score, each rule gets its own score and your overall score is based on the weighted average of those scores.

GTmetrix speed test YSlow tab

Here are some of the most common recommendations that you’ll encounter…

Use a content delivery network (CDN)

A CDN speeds up your site’s page load times by delivering your site’s static content from a network of servers around the world. Learn more in this post.

To serve your images via a CDN, you can use the free Optimole plugin. To use a CDN for all of your site’s static files, Cloudflare is also a good option.

Minify JavaScript and CSS

I covered this in the PageSpeed section already. You can minify your CSS and JavaScript with a dedicated plugin like Autoptimize. Or, many WordPress performance plugins also include their own minification features.

Compress components

This is the same as the “Enable compression” recommendation from the PageSpeed tab. You can fix it by enabling Gzip compression.

Many WordPress caching plugins include a Gzip compression feature. Or, you can use the dedicated Enable Gzip Compression plugin.

Avoid URL redirects

This is the same as the “Avoid landing page redirects” in PageSpeed.

Try to always link to the current URL of a page, rather than relying on redirects to move people to the right destination.

Reduce DNS lookups

Visitors’ browsers need to perform a DNS lookup for each domain that your site has content from.

You’ll always have at least one DNS lookup for your own site. But if you use external services on your site (like Google Fonts or the Google Analytics tracking script), those are going to result in additional DNS lookups.

Two solutions are to:

  • Remove the external service if it’s unnecessary
  • Try to self-host the content if possible, like hosting Google Fonts on your own server instead of relying on the Google Fonts CDN. This plugin can help.

Make fewer HTTP requests

You’ll see HTTP requests in more detail in the Waterfall tab section (that’s next).

3. Waterfall tab

The Waterfall tab is a bit advanced, but it’s a very useful tool to understand how the different parts of your site load and where there might be small bottlenecks that slow down your entire site.

When you open the Waterfall tab, you’ll see a list of every single HTTP request for this page (these are the “Requests” from the GTmetrix results summary).

Every object on your page is a separate HTTP request. For example:

  • Each image is one HTTP request (unless using CSS sprites!)
  • Each CSS or JavaScript file is one HTTP request
  • Any external scripts that you’re loading (like Google Analytics) will also be at least one HTTP request
  • Etc.

All things equal, fewer HTTP requests generally means a faster-loading website.

Additionally, as you’ll see when you look at the list, each HTTP request takes a different amount of time to load and loads in a different order (some will even block others) – so if you can find and remove the slow-loading HTTP requests, you can make a big difference in your site’s page load times.

You can see the details for each HTTP request when you hover over it. For example, this Moroccan chickpeas image took 102.4 ms to load:

GTmetrix speed test waterfall analysis

You can also use the filter and search options at the top to find specific HTTP requests. For example, if you search for wp-content/plugins you can find the HTTP requests that are added by your WordPress site’s plugins.

You can even dig further to find requests from specific plugins. For example, searching wp-content/plugins/elementor will turn up all of the requests from the Elementor page builder plugin:

Searching the waterfall analysis

If you find that a plugin is adding a lot of slow-loading HTTP requests and doesn’t give you much benefit, you might want to consider removing it and finding a better alternative.

4. Timings, Video, and History tabs

I’m going to group the last three tabs of the GTmetrix speed test together because you probably won’t use them that often, and I don’t think they require a deep breakdown.

Timings

The Timings tab gives you more detail about how long it takes to reach various load time metrics. You can also find this information in the Waterfall chart – the Timings tab just makes it a little easier to visualize.

If you hover over one of the metrics, the GTmetrix speed test results will display a description below it, which will explain to you what it means:

Timings tab

Video

If you enabled page load videos when you started your test, you can view those videos in the Video tab.

You’ll also be able to slow them down to 1/4th the original speed to see things in more detail.

Videos are useful because they let you see not just when your site loads, but also how your site loads. For example, which parts of your site are visible first? Are there any weird glitches during loading like a “flash of unstyled content“? These are useful things to know as you’re optimizing your site’s performance.

History

Finally, if you test a page multiple times, the History tab lets you see the results of previous tests so that you can analyze how things have changed over time.

It will store all tests for this page for the last 30 days. After that, the historical test results are deleted.

For example, if you make some tweaks to improve your GTmetrix speed test scores, you could see how those changes translate into real page load time improvements:

GTmetrix speed test historical results

Get more from the GTmetrix speed test

If you want to get the most from the GTmetrix speed test tool, you should go beyond the summary box and dig into the details below.

You don’t want to get too hung up on your GTmetrix speed test scores, but the suggestions that go into the scores provide some useful guidance on areas where your site’s front-end performance optimization might be lacking.

Additionally, the Waterfall tab is a great tool to dig into specific aspects of your site’s performance, like finding images, scripts, or plugins that are having an inordinate effect on your site’s page load times.

If you want to dig into WordPress performance in more detail, check out our collection of 11 ways to speed up WordPress.

Do you have any lingering questions about how to test your website with GTmetrix? Leave a comment and we’ll try to help out.

Don’t forget to join our crash course on speeding up your WordPress site. Learn more below:

 

Layout and presentation by Karol K.

Yay! 🎉 You made it to the end of the article!
Colin Newcomer
Share:

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!