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
Before we get into the nitty-gritty, let’s go over some basic information and questions on what GTmetrix offers and how it works.
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 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
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:
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:
- GTmetrix vs PageSpeed Insights vs Pingdom Tools vs WebPageTest: Which Is Best
- How to Improve Largest Contentful Paint: 5 Tactics for WordPress
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.
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:
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.
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:
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:
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.
