GTmetrix is a fantastic online measurement tool brought to you by the wonderful folks at Gossamer Threads. They have combined the results & scores from both Google PageSpeed and YSlow to provide you a handy checklist of where your site does well and where you could improve. They also provide straightforward (mostly) recommendations on what you can do to improve.
GTmetrix
It is very easy to get started with GTmetrix. Just go to their website and enter your URL into the Analyze Performance of box. Click on GO! and then wait a couple of moments while your site is analyzed by Google PageSpeed and YSlow.
Note: If you are looking for even more out of GTmetrix, such as storing your history of speed checks, checking your website weekly or daily for speed issues, and more; then sign up for a free account from them!
Once your site is ready you will receive a report card outlining how your site is doing. Just like in school, As are better than Fs.
Your report is divided up into three main sections.
On the left is an image of your page and some general info on what to do about your scores. Remember, this is a general purpose report card designed for ALL websites. So recommendations will be somewhat generic.
Top right of page includes your score a couple of specific notes relevant to your site. Since I’ve run this on a WordPress site, GT has automatically detected WordPress and loaded up a link to WordPress specific recommendations. They have also noted that the generation time was slow, and loaded some specific recommendations for that as well. And in the upper right corner there is a link to download all of this information as a PDF.
Lower right is the main content of your page
Breakdown of Page Loading Speed
Your breakdown is divided in 4 tabs:
Google Page Speed – Google’s website speed analyzer, Google does factor in your speed scores when evaluating your search result position.
YSlow – Yahoo’s speed analyzer, and since Yahoo & Bing have agreements in place, Bing is probably using this information in it’s search results.
Timeline – Listing of how long each piece of your site took to load.
History – Comparison to previous speed tests run by you on this website.
I’ve run GTmetrix on a site that I’ve been developing which doesn’t have any optimization done on it yet.
Google Page Speed
Your Google Page Speed results are presented first. They will be ranked by grade.
If you click on the name of the recommendation, then you will get more detailed information about exactly which resources are failing this test. There is also a tooltip What does this mean? which will have some additional information for you.
In this case the error is that these two resources, slide1.png and slide1.png?1402336672441 contain identical data. There shouldn’t be multiple copies of the exact same thing. A second copy like this is frequently created by a plugin, so you may or may not be able to fix it.
Some of the most common recommendations that you’ll see for websites include the following:
Serve resources from a consistent URL: This is common with images. You have multiple copies of the same thing, consolidate your resources if possible.
Specify image dimensions: As a general rule, you should always specific the dimensions of your images, this allows your website to allocate the correct amount of visual space in advance of the image actually loading. It prevents the annoying situation where text is bouncing around the page as images load.
Defer parsing of JavaScript: As a general rule most places providing JavaScript will suggest that you put it into the <head> section of your website. However, for site loading you should put most JavaScript into the footer.
Optimize images: Lossless compression of your images reduces file size which speeds up website loading. Using a service like Yahoo’s Smush.it is a great to accomplish that.
Minify CSS/Javascript/HTML: Minifying is removing unnecessary characters from files to reduce their file size. Caching plugins and online services are available to minify your files.
Serve scaled images: You shouldn’t using HTML or CSS to scale your images, you should load into your webpages images which are already the correct size.
Enable gzip compression: This allows your web server to compress files before sending the files to browsers who request them. Compressed files are smaller and transmit faster.
YSlow
The second tab is your YSlow results. Frequently the grades between the two services are similar, however their recommendations can vary some.
Some of the common YSlow recommendations that you’ll see include:
Add Expires headers: An expires header is a piece of information about your website which says how long a browser should cache files. Information which is very unlikely to change (such as images) should be given a long expiration period.
Make fewer HTTP requests: This refers to how many resources the page had to go out and get. You will frequently see references to JavaScript, stylesheets and background images here. When possible, you should try to combine files to reduce the number of requested resources (some files will be plugins and such that you don’t have control over).
Use a Content Delivery Network (CDN): Yahoo loves CDNs, and would prefer if you used them for well, almost everything on your site.
Reduce DNS lookups: This will likely be an item that can’t be changed. You will get this notice on any site that requests content from more than 4 domains. If you are using a few plugins, they will probably all request content from different domains.
Timeline
The key items you are looking for on the timeline view are purple bars. Here you’ll see I’ve got two purple bars, the first is 3.1 seconds and the second is 2.11 seconds. These are two areas where I should look at speeding up my site. Purple bars means that it is sitting around waiting for processing.
The second of these two purple bars is more straightforward. If I hover my mouse over the bolded GET at the beginning of the line it will tell me the resource that is taking so longer.
It says there is a style.php file in my theme which is taking some time to process. To speed this up, I’m going to have to look at what that style.php produces and see if it really needs to do all that processing, or if I can just hand out the results.
Many of the more advanced Premium themes have a lot of settings which means pretty much everything is processed in PHP. If I know for certain I’m not using some of those, I can create the appropriate files in a child theme to remove a lot of extra processing. This customization is more advanced and you should really consider hiring a developer to do it (in PHP files, forgetting a single semi-colon can break your whole site).
Side Note: PHP is a server side scripting language which can be used to dynamically build HTML files. WordPress and most other CMS are built with PHP.
History
If you don’t have a Gtmetrix account, your history is limited to the last 30 days. The history here has a section for Page load times, Page sizes and request counts, and Page Speed and YSlow Scores. One of the nice things about the history is if you are working on improving your site speed, you can see real data on how that effort is paying off.
If you do have an account (which is free), you can set up regular checking of your site and have them email you in the event of a sudden change. You will also be able to check your history over a much longer period than just 30 days to see if there are any trends.
If you start to see some strange variation in page load times and you haven’t been making any changes on your site, then it might be your hosting company. Many sites on shared hosting will experience fluctuation in load time based on server load. So when the other sites on the shared server you use aren’t busy, your site will load faster.
Simple Option: W3 Total Cache
So you aren’t a developer, you don’t want to even think about PHP files, but you want to do something about your website speed. An easy option for WordPress is using W3 Total Cache. It is a powerful caching plugin which turns your dynamically built PHP files into static HTML files. This has been known to vastly speed up sites without any fussy PHP modifications.
GTmetrix is a great tool for taking a good look at your website’s performance. It is also a great tool for monitoring your site over time and alerting you to issues (with free signup). With the combination of Google PageSpeed results, YSlow results, a speed Timeline, and History of how your site has performed, this tool should be in every website owner’s toolbox.
4 thoughts on “How to Use GTmetrix Website Speed Performance Analyzer”
Hi Gen Herres,
Nice and detailed explanation on Page Speed 🙂
Do you have any idea on fixing “Serve resources from a consistent URL” and “Adding Expires Header” in WordPress Blog?
“Server resources from a consistent URL” typically refers to outside scripts you are loading. If you are loading these from plugins or third party tools, there’s really nothing much you’ll be able to do about this.
“Adding Expires Header” means you are loading resources and either they don’t have an expired header or the system doesn’t like the one they have.
On most linux hosting environments the following added to your .htaccess file will add in expired headers if they don’t have them. Note of course with editing your .htaccess, it could take down your site so make sure you have a backup and can restore it before attempting to use this.
Hi Gen Herres,
Nice and detailed explanation on Page Speed 🙂
Do you have any idea on fixing “Serve resources from a consistent URL” and “Adding Expires Header” in WordPress Blog?
Thanks,
G. Praveen Kumar
“Server resources from a consistent URL” typically refers to outside scripts you are loading. If you are loading these from plugins or third party tools, there’s really nothing much you’ll be able to do about this.
“Adding Expires Header” means you are loading resources and either they don’t have an expired header or the system doesn’t like the one they have.
On most linux hosting environments the following added to your .htaccess file will add in expired headers if they don’t have them. Note of course with editing your .htaccess, it could take down your site so make sure you have a backup and can restore it before attempting to use this.
## EXPIRES CACHING ##<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##
Another tool, very different from gtmetrix: http://media4x.com/test/
Thanks Max, I didn’t know about that one. Quite interesting and useful results.