What is GTmetrix?
GTmetrix is an extremely popular and free page speed and performance analysis tool developed by the nice folks at GT.net, a web hosting company based in Vancouver.
It combines the best of Google’s PageSpeed tests with Yahoo’s YSlow scoring matrix.
What’s made this tool so popular is that it provides a wealth of graded data on exactly what’s causing your site speed issues.
And it does this in a far more practical and visual way than the equally popular Google Pagespeed Insights tool.
Plus there’s the added bonus that GTmetrix also fully interacts with WordPress via their plugin, available from the WP repository.
So you can do speed tests without ever having to lease your WordPress dashboard:
The issue with these speed analysis tools however is that the results they return are often a bit cryptic and not very clear.
So in this post, my goal is to identify the most common issues that could appear when you use GTmetrix and tell you what they mean and what to look into to fix them.
This way, you can DIY speed your site up, even if you are no nerdy tech person.
Note: You’ll have to register for a free GTmetrix account to generate the API key required to get this plugin running.
Setting Up The Perfect Test
We also strongly recommend creating a free account on GTmetrix if you want to make the most of this tool.
You don’t need to provide payment info, so there’s no excuse for not registering.
Oh, and it’s also really important if you want to correctly set the parameters for your test.
Test server location
Choose the server that is the closest geographical match to your own.
This will give you an accurate representation of real user experience based on localized page speed scores.
Browser type
Next up you can choose which desktop or mobile browser is used to test the rendering of your URL:
Connection speed
You can also choose what connection speed the test should be conducted against e.g. 3G vs. Fast Broadband.
This is a critical setting if you’re testing how pages load and display on mobile devices:
There are also some additional test options you can toggle on or off:
- Create video – this generates a short video that shows exactly how your page loads, allowing you to identify components that might block or slow rendering
- Adblock Plus – you can use this setting to disable ads to assess how they impact your overall site speed
- Stop test Onload – GTmetrix tests default to waiting for 2 seconds of network inactivity before grading your site, which can sometimes skew result data. You can leave this disabled in most circumstances.
How To Read A GTmetrix Performance Report
Let’s start from the top with the report dashboard – this is your “at a glance” overview of how your URL performed:
- PageSpeed – this is the grade your page receives based on Google’s metrics.
- YSlow – this is the grade your page received based on how Yahoo would score it.
In the above example, our PageSpeed score is 72% (C grade) so we have some work to do.
Our YSlow score is 81% (B grade) which isn’t perfect but we’ll probably only need to tweak things a little bit to get that closer to a 90% (A grade) rating.
The next set of results we need to consider are ‘Page Details’:
1. Fully Loaded Time
The length of time required for your page to become interactive in the test browser.
2. Total Page Size
The total amount of data downloaded to the test server, including all media assets such as images.
3. Requests
This the number of individual HTTP requests generated by your site via scripts, CSS, etc.
PageSpeed Recommendations
Now let’s take a look at the issues that have the highest impact on your page speed, and the steps you can take to remedy them.
Optimize Images
Images make up at least 60% of the total weight of a page, so unoptimized images are a primary cause of pages loading slowly.
As you can see we scored an F for this section, but we can fix this issue by using a plugin like Smush, or even better by using ShortPixel.
Serve Scaled Images
If you upload images that are too big or too small, then your theme and/or browser will attempt to resize them.
Doing this obviously causes that particular page to load more slowly.
So the trick is to serve scaled images that are “just right”.
Minimize Redirects
Redirects typically happen when you change the URL of a page, and you redirect the old page to the new one. If your site has dozens of redirects it can cause seriously impact your site speed.
The simple solution here is to avoid using redirects in the first place by learning best practices for URL structure.
If you already have a bunch of chain redirects, you can use a plugin like redirection to cut multiple redirects into a single one.
This one is important and will improve the quality of your internal linking structure and “link juice” is lost in long chain redirects.
Minify CSS and JS
Minification basically means removing all the unused space left in code due to formatting. Even a blank space has a size in bytes, so minifying CSS, JavaScript and HTML files can reduce file size, boosting page speed in the process.
Most free caching plugins offer at least some minification functionality, but WP Rocket (review) or is the best of the paid options out there.
Note that if you don’t want / can’t use a caching plugin, Cloudflare also does minify CSS and Javacript on a CDN level.
Inline CSS and JS
Best practice in optimizing site speed is typically to combine scripts from multiple pages into one single script that can then load asynchronously.
But if the scripts are made up of only a few lines of code, then it can sometimes make more sense to place them inline on the page.
So, if your score is really bad, have a dev move most of your inline CSS to your CSS stylesheet. But if it is still in the green, consider ignoring it, it doesn’t add much page load time anyway.
Defer Parsing Of JavaScript
JavaScript requests are one of the main culprits for slow page load times. This is because all
