How To Use GTMetrix in 2020

Authored By: James LePage
Published On: May 31, 2020

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

amazon elementor E book

In this post, we're going to be answering the essential question of “how do you use GTmetrix”?

GTmetrix is a very powerful tool that you can use to test the speed and performance of your website, but understanding how best to use it and what the individual features of it are can help you identify and fix individual problems with your site.

As an agency, we use this tool in tandem with Google PageSpeed, and PingDom Tools to identify aspects of our web sites that we need to focus on improving. This could be anything from optimizing images, to removing CSS, to swapping entire plugins. This tool will allow us to identify what exactly we need to focus on to make the website as fast as it possibly can be.

This tool doesn't just measure the speed of your page, it offers a ton of advanced features like waterfall loading charts and video playback. You can use these advanced features to access more data and information then some other website speed performance tools on the web.

Now that we understand what GTmetrix is and why it may be so powerful, let's run through every aspect in feature of it, from start to finish, and discuss how to actually use the tool.

How To Use GTmetrix

GTmetrix is an online only platform, meaning that you can't download it. To access the tool, go to https://gtmetrix.com/.

Once you have loaded the tool, you can enter the page URL that you want to test, and then click analyze. you can enter the domain of your homepage, or the domain of an individual page that you want to test period for example, if you have blog posts that have a template applied to them, you can enter a single blog post to see how fast it loads.

There are a couple of options that you can manipulate before even running the analysis of your page with GTmetrix.

Analysis Options

If you click the “analysis options”, you'll get a dropdown menu like so, where you can change a bunch of aspects about the loading environment in which the test will run your web page.

The default location where the test is run is Vancouver, Canada, but you can change this location to be more geographically specific to your user base. You have the option for all major continents, and in most cases you should choose the location that is closest to you.

In the browser, (you can choose between Chrome or Firefox) you can toggle ad block on or off And choose to stop the test at window.onload. The default behavior is to stop the test after 2 seconds of network inactivity (after onload fires).

You can also create a video of the loading process of your page, which can then be slowed down by four times which will allow you to view individual elements and their loading behavior visually. This could be really helpful to see if anything breaks during the loading process that wouldn't be visible to the human eye in normal speed.

Our recommendation is that unless you have a specific set up that you need to run, you should leave everything in its default form.

For our use case, we're going to leave all of these default GTmetrix analysis options, as the base scan will give us an accurate representation of the loading speed for our website in a standard web browser and Internet connection.

Running The Scan

When you click analyze, GTmetrix will put your URL in a queue to be tested. It will then run it through its several different testing engines, and when complete, output put a report for you. It may take several seconds as only so many people can be using this tool at once, and they run your website through several different tests, which we will discuss below.

On the loading screen, there are always a bunch of interesting statistics, like the number of websites that GTmetrix has analyzed in the past 24 hours. This usually hovers around 400,000 to 500,000.

Once your page loads, you get access to your test and all the data behind it. In this next section, we're going to run through every single test, what it offers you, and how you can use the information to make your website faster.

Basic GTmetrix Report Elements

First, the controls on the right hand of the screen will allow you to re test your website, compare this test to previous tests you have run on the platform, edit the page settings, set up alerts (GTmetrix will automatically run your test at various intervals and then email you alerts about your PageSpeed if it is off) and more.

One of the most powerful features of this tool is the ability to export this report in PDF format. We're going to be talking about this report in its online format, but downloading a GTmetrix report as a PDF makes it printable, and easy to send to clients (if you're in the business).

The header section of your GTmetrix report will show your website, and the testing criteria. In the example above, we ran our website through a server in Vancouver, using the Chrome browser.

Aggregate Scores & Details

The performance scores will tell you the aggregate health of your website speed and performance. They won't identify individual issues that are wrong with your side, but if you are scoring above an 80 in both scores, have a page fully loaded time of under 3 seconds, a manageable page size (typically under two MB) and low requests, then you Know that the performance of your website is doing well.

Typically, if this is your first time running a GTmetrix report, and you're just trying to learn how to use it, you will be greeted with lower numbers than in this example. This is because you probably haven't optimized your website for speed and performance, which is what the GTmetrix tool helps you do.

PageSpeed Report

Now, we get to the individual reports, and their individual recommendations. The first report that will show when you load a GTmetrix scoring report, is PageSpeed.

this report will give you recommendations on individual things that you can do to improve the speed and performance of your website. Examples include serving scaled images, minifying JavaScript, enabling compression, differing parsing of JavaScript, and leveraging browser caching. It will then offer you a grade for each category, classify them under a sub category, and tell you how much of an impact it would have on your websites performance.

For example, inlining small CSS has a high priority because it makes a big impact on the speed of your website. At the same time, specifying a character set early has only a medium impact on your website speed. You should first address all high priority issues, and then work your way into the medium priority issues.

Also, keep in mind that depending on how your website is built, you won't be able to score a perfect hundred in every category. For example, our agency website needs to defer JavaScript, but we can as the JavaScript that isn't deferred is essential to the usability of the page. With everything, including performance and website speed optimization, there are tradeoffs that you need to make between usability and speed.

However, the PageSpeed report will give you a good starting point, and recommend individual things that you can focus your speed optimization efforts on to end up with a faster website.

YSlow

The next report that you have access to with the GTmetrix tool is called YSlow.

YSlow works by crawling your website and comparing it against a list of 23 rules, based on Yahoo’s rules for high-performance websites.

Like the first report, you'll get a grade on the recommendation, a subcategory of the recommendation, and a priority. Again, addressing high priority issues should be on the top of your list -- once all of those are addressed you should address the medium and low priority issues.

With YSlow, examples include adding expires headers, minifying JavaScript, avoiding redirects, and more.

You'll notice that there's a lot of overlap between the two tests.

The difference between PageSpeed and YSlow is very minimal. Both will run your website through their own algorithms and determine what can be improved -- each will offer different suggestions, which gives you a good range of things that you can focus on improving in your website.

We typically just focus on the PageSpeed recommendations. Improving the grade in your PageSpeed recommendations will also improve the grade in your YSlow recommendations, and vice versa.

Waterfall

Now, we come across the waterfall chart, which is probably the most important and useful tool that GTmetrix has to offer. The waterfall chart offers you a visual representation of the loading time of every single asset in your website, from images, to fonts, to HTML, to JavaScript, and everything else.

This is really helpful to see which assets are taking up the most time to load. With this chart, you can identify slow loading assets, and see if you can replace them. you can also sort each asset by its own type - so you can isolate all JavaScript assets and focus your efforts on that, then you can isolate all font assets and focus your efforts on that.

If you hover over the bar of an individual asset, you'll be able to see more information about the actual loading time of it.

For example, the majority of the loading time for this asset was spent blocking. Because you know that blocking took up a lot of time, you can then focus on minimizing the blocking time by implementing specific strategies.

This tool is also helpful for identifying every single asset that is loaded in the page. If you see something that isn't meant to be loaded in the page, you can use a tool like Asset Clean Up to stop it from loading in the specific page, which would better your GTmetrix scoring and website performance.

Additionally, if you see an asset that's being blocked, or taking an extremely long time to be received, and you can focus all your efforts on that as it makes the most impact in your website.

Simply put, the longest bars on the waterfall chart are the assets that you should address 1st as they make the most impact on the page loading time.

If you Scroll down, you will also be able to see the CPU utilization, and memory utilization. This is helpful to understand if you're on a server that is too low powered for your website.

If you see that the CPU is maxed out at 100% power for the entire loading of the website, increasing the CPU power by moving to a new web host provider would be a good idea. In our example, or at the top of our range, and should probably look to upgrading our Cloudways plan in the coming future.

On the note of hosting, if you're looking for a host that offers scalable CPU and memory power, allows you to host your website an enterprise level cloud hosting, and offers killer customer support, take a look at Cloudways.

Timings

Your next tab on the GTmetrix report is called Timings, and offers you basic information on the timing of your page. There are several main milestone timings that every page goes through. Each milestone is displayed here, with the amount of time that it takes to get to. In this example, our time to 1st byte is 327 milliseconds, and our Dom loads in 0.9 seconds. Hovering over each box will bring up a dialogue on what it means.

Something to note is that each box has a color. If you want to visually see where each of these milestones are occurring in your waterfall chart, there are color coordinated lines to each milestone. So, the yellow line on your waterfall chart would be the time to 1st byte.

There's also another score on this page called the RUM speed index. As defined by GTmetrix, this score “is a page load performance metric that shows you how quickly the page was visibly populated. The lower the score, the better.”

Video

The next tab will show the video of your page loading if you have enabled it in the free analysis options which we discussed in the beginning of this post. It will allow you to identify, visually, which elements are causing loading problems. The waterfall chart is much more helpful to do this, but having the video is something need to look at, and can be helpful in some situations.

Report History (Compare reports overtime)

Under the report history tab, you can view the changes between major metrics in GTmetrix reports. For example, if you ran a report a month ago, and he just ran another one, you can compare everything between the two graphicly. This is actually very helpful if you are implementing speed optimization on your website, and want to see if it has made a difference.

Conclusion

This guide should have given you a great introduction to the GTmetrix performance scoring tool, answered the essential question “How do I use GTmetrix”, and offered you insight into each little category. We're big fans of this tool due to its simplicity, non technical users can easily understand most aspects of it, and power. Running this report will generate tons of things that you can do to make your website faster.

Even better, GTmetrix is a free tool , and everything that we just mentioned in this blog post is accessible by heading over to the domain https://gtmetrix.com/ And entering your URL into the analysis bar.

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback

[…] the industry to gain insight into the loading time of a web page. The second testing provider is GTMetrix which offers waterfall charts and more in depth metrics. The third testing platform is FastOrSlow, […]

James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.