Smughost

Facebook Twitter Linkedin
My Account

How to Use and Understand GTMetrix?

In this article we are going to be explaining a little bit about GTMetrix. GTMetrix is a tool that allows you to analyze your website to test loading speeds, coding problems, optimization ideas and a waterfall feature. GTMetrix is free to use and we use it for our own website which is why we recommend it here.

We could try and go through the hassle of creating our own GTMetrix but being frank we don’t see the point, they have done a fantastic job with it and there is no need to re-invent the wheel here (our opinion).

Using GTMetrix

Using GTMetrix is very simple, you can go to our webpage to access it or directly to their website and you don’t even need an account to get started!

Our Website / Directly on GTMetrix

To get started you simply need to enter your URL into the search bar and click “Test your site”.

We recommend you sign up for a free account with GTMetrix so you can choose the testing location and browser.

Understanding The Results

The first part of the report is the grading and the vitals. This is the summary of the report which shows how your website is doing with general performance and structure.

Performance: This is graded on a range of key points mainly being your google lighthouse performance. This is ultimately the percentage we are trying to increase.

Structure: The structure is also made up from multiple points such as lighthouse. It is essentially how well your website is structured for performance.

LCP (Largest Content Element): This is the largest piece of code or element that it takes to load from your website such as a hero banner, video or animation. They recommend keeping it at 1.2s or less.

TBT (Total Blocking Time): This is the duration of time blocked by scripts while loading your website. They recommend trying to keep it under 150ms.

CLS (Cumulative Layout Shift): This metric tells you how much layout shift is experienced by the visitor while the page is loading. They recommend keeping it at or below 0.1.

The second part of the report gives you the top issues on your website with the highest impact at the top. You can also see these as suggestions and get further information on each by clicking the arrow.

You can often use this part of the report to quickly identify what is causing your websites performance and how to imporve it.

The page details help you understand how large the files are for the different elements on your website such as fonts, html, css, images and javascript. It also shows you the amount of requests for each in percentage.

This can be very helpful as you can indentify what kind of files you can optimize better to help the website load faster and improve the general performance. (for example: If your images are taking up the most space and are the most amount of requests you can look to optimize your images)

The performance tab on the report gives you a quick breakdown of the speed performances of your website.

First Contentful Paint: This is how quickly content is painted onto your website for visitors to see, They recommend keeping this below 0.9s.

Speed Index: How quickly the contents of your website are visibly populated. They recommend keeping it at or below 1.3s

Largest Contentful Paint: This is the largest piece of code or element that it takes to load from your website such as a hero banner, video or animation. They recommend keeping it at 1.2s or less.

Time To Interactive: This is how long it takes for your website to become fully interative. They recommend trying to keep it below 2.5s.

Total Blocking Time (TBT): This is the duration of time blocked by scripts while loading your website. They recommend trying to keep it under 150ms.

Cumulative Layout Shift (CLS): This metric tells you how much layout shift is experienced by the visitor while the page is loading. They recommend keeping it at or below 0.1.

The structure part of the report is a more in-depth version of the suggestions. This lists all possible improvements that can help you improve the structure of your website. It is also listedin the most urgent improvements first.

The waterfall feature can be very useful, it allows you to view how your website loads in order. It also shows how long it takes for each element to load and how large them elements are.

You can use this feature to see what improvements you can made, such as image optimizations.

We hope this has helped and if you have any questions be sure to get in touch!

Our Services

Useful Links