GTmetrix is an awesome free tool that we’ve been using for a while now to assess how you can speed up your site by following their simple recommendations and tweaks. It uses Google’s Pagespeed and Yahoo’s Yslow services to test websites and then outputs the results with a A-F grade and lists the the main issues slowing your site down along with recommendations to improve that.
The best way to explain it is really to run through the whole process from start to finish.
Let’s take a sample e-commerce WordPress website, run it through GTmetrix and see what kind of grades we get.
http://gtmetrix.bwf.co is our sample WordPress + WooCommerce site (which for security reasons will be removed after our testing)
As you can see we get an F and a C to begin with along with a detailed list of what we need to do. Let’s start by fixing the ‘Enable Gzip’ and ‘Leverage Browser Caching’
We can actually do that with one .htaccess file in your ‘public_html’ folder. Below you’ll find a downloadable .htaccess file with browser caching and gzip enabled which you can upload to your hosting account. Alternatively if you prefer to add the code manually it’s listed below:
Enabling Gzip
Enabling Browser Caching
Now we come to one of my issues with GTmetrix. The better your grade becomes, the harder it gets to get that ‘A’ grade. New elements will appear that weren’t there before as you fix other issues. As you can see from the screenshot we now get an ‘F’ grade for ‘Remove query strings from static resources’
It’s common practice for developers to add a ‘query string’ on to the end of resource URLs to avoid those files being cached in the browser. For example, “http://gtmetrix.bwf.co/wp-content/themes/betheme/style.css?ver=9.7” You can see the, “?ver=9.7” on the end. The purpose of that is to avoid being cached until that version number changes. That way developers can make changes to files, update the version and not have to worry about users loading an old version of the file.
Luckily if you’re running WordPress like we are on our test site, there’s a plugin for that! Simply install, ‘Remove Query Strings’ plugin from here.
So the next issue we have to fix is “Serve scaled images”. It suggests we’re using images that are much larger in size than we actually need them to be. It also gives locations of where those images are. The simplest way to go about fixing that is to download each of the images it mentions, resize it to the dimensions suggested by GTmetrix and then re-upload it.
We’re up from an ‘F’ and a ‘C’ to an ‘A’ and a ‘B’!
It’s worth noting that the ‘B’ grade in Yslow is due to not using a CDN (content delivery network) to serve static assets such as images, CSS and JS files.
This generally can’t be added for free and of course Yslow recommends the CDN provided by Yahoo!