The new GTmetrix Report is powered by Google’s Lighthouse and surfaces a wealth of new information about a website’s performance.
In this article, we will be exploring the new GTmetrix report and see what it brings to the table. By the end of the article, you will be able to understand what key measures of the report mean.
GTmetrix has now completely changed how they evaluate web pages. The biggest change is that it is now powered by Lighthouse — an industry-leading web performance tool. The changes happened due to Google’s new Core Web Vitals, measures that are going to become increasingly important for UX design and SEO in 2021.
If you have used GTmetrix before, then you will instantly find the new report completely different compared to the old one.
And, that’s why in this post we will learn how to make sense of the new report.
The best way to understand the GTmetrix Report is to test the tool and go through each of its sections one by one.
For this purpose, we will grade GTmetrix.com itself. You may want to do the same as you read this article too.
At the top of the report, you will find the GTmetrix Grade. If you used GTmetrix before, then you will instantly notice that it replaces ‘Performance Score.’
According to GTmetrix themselves, it is the overall page performance assessment. So, a page will get a high grade if it loads fast. It also has two grades, performance and structure.
The performance score is the reflection of the Lighthouse Performance Score as captured by their custom browser, hardware specification, and analysis option.
The structure score, on the other hand, is based on proprietary Lighthouse assessment plus their Custom GTmetrix audits. In simple words, it reflects how the page is developed for optimal performance.
Web Vitals is the next section of the report. It replaces Page details from the old report. The Web Vitals shown here are part of the core metrics. These metrics determine not only how fast a page is delivered, but also try to evaluate the user experience of the visitor visiting the webpage.
It comes with three core metrics:
- Largest Contentful Paint (LCP). It determines how much time it takes for the page to load from the actual user point of view. In simple terms, it is the time taken for the web page to load the majority of its content until the first point of content. In short, it measures loading performance. According to GTmetrix, an LCP value of 1.2 seconds or less is considered a good user experience.
- Total Blocking Time (TBT). TBT is the new metric that is introduced by Google in 2020 to measure the page’s load responsiveness when it comes to user input.
Technically, it is the total time that a web page is blocked, not enabling the user to interact with the page. It replaces the First Input Delay(FID) metric.
According to GTmetrix, the TBT value of 150 ms or less is considered good.
- Cumulative Layout Shift (CLS). It is an interesting metric that measures how long it takes for the page to become stable. A page that changes layout at the very last moment of starting interaction is termed as non-stable. According to GTmetrix, the CLS value should be 0.1 second or less.
For more a more detailed look at this read our Measuring UX with Google’s Core Web Vitals post.
The summary section of the report provides some critical information about the web page. It’s possibly the most useful view as it tell the ‘performance story’ as a user lands on a web page.
Here, you can find three important sub-sections, Speed Visualization, Top Issues, and Page Details. Let’s learn what each of these subsections has to offer.
- Speed Visualization: Speed visualization is where you get to see visualization on how your site loads. You can see when the key events on a page load happen. For instance, you get to know about TTFB, First Contentful Paint, Largest Contentful Paint, Time to Interactive, Onload Time, and Fully Loaded Time. You can use it to optimize your site and make your site fast.
- Top Issues: The top issues section is where you will find the audits for your site. It lists all the top issues with your site that directly affects the performance of the site.
- Page Details: The page details section offers insights on the different page content according to size and type. If you hover over them, you will get more information as shown below.
Hover over the Page Details chart for more detail for each of the page’s components.
You can find Performance Metrics under the Performance tab. Here you will be greeted with the Lighthouse performance data.
As you can see, there are two familiar metrics here: Largest Contentful Paint and Cumulative Layout Shift from Core Web Vitals.
If you are not able to make sense of these, you can toggle the Metric details option from the top-right. Also, each metric comes with report flags that are color-coding. This way, you can know which one needs the most attention and take action based on it.
The structure tab provides you access to the old Pagespeed report. You can also use it to understand how your page performs. Also, not much has changed compared to the previous iteration of GTmetrix.
Waterfall, Video & History – The last three tabs are Waterfall, Video, and History. These are mostly unchanged compared to the previous GTmetrix report. Here, the Waterfall is still important as it gives devs the ability to identify the assets slowing down the page performance.
Missing: Timings – The new report doesn’t include the Timings that was present in the old one. However, it is covered nicely in the timeline in the Summary.
So, is the new version an improvement on the old one?
The new GTmetrix report is very different. As a webmaster, you need to learn a lot of new things. As you can notice, Google is committed to its approach to make the web a better place. With the new approach, webmasters can find new useful metrics that cover user experience and improve their site accordingly.
On the downside, such a big change will confuse many and those how have spent time optimizing for the old report may find the new one produce a more negative score. An example of this is our own page speed testing of over 1,500 homepages of agency websites. Results may look very different now.
The other consideration is that Google has further advanced its position in the web dev space, with their tools and standards reaching a wider user base. Many think that that’s not such a good thing.