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?
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
- How to run a GTmetrix speed test
- 👉 PageSpeed tab
- 👉 YSlow tab
- 👉 Waterfall tab
- 👉 Timings, Video, and History tabs
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.
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.
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 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.
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:
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:
Once GTmetrix runs its test 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
Let’s go through the six tabs…
1. PageSpeed tab
The PageSpeed tab is the default active tab when you run a GTmetrix 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:
Here are some of the most common PageSpeed problems and how to fix them to improve your score…
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:Image optimization & Lazy Load by Optimole
Current Version: 3.0.1
Last Updated: March 16, 202196%Ratings 80,000+Installs WP 4.7+Requires
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.
<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).
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.Autoptimize
Current Version: 2.8.3
Last Updated: April 11, 202194%Ratings 1,000,000+Installs WP 4.9+Requires
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.
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.
Current Version: 2.20.12.09
Last Updated: December 9, 202094%Ratings 100,000+Installs WP 4.6+Requires
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.
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.Enable Gzip Compression
Current Version: 1.0.3
Last Updated: March 30, 202176%Ratings 30,000+Installs 3.0.1Requires
You may also be interested in:
- WordPress.com vs WordPress.org – What’s the Difference?
- 5 High-Quality Sketch Alternatives for Windows (2021)
- 10+ Best Themes for Thrive Architect in 2021 (Beautiful & Functional)
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 GTmetrix 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.
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.
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!)
- Any external scripts that you’re loading (like Google Analytics) will also be at least one HTTP request
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:
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:
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.
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, GTmetrix will display a description below that tells you what it means:
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.
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:Go to top
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 performance 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.How to improve your #GTmetrix speed score on #WordPress 🏎️🏎️🏎️🐎🐎 Click To Tweet
Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%:
Layout and presentation by Karol K.