GTmetrix generates a performance report which includes various performance measures which includes your “GTmetrix Grade” and “Web Vitals”. The GTmetrix Grade is calculated from two metrics – Performance and Structure. GTmetrix Performance is the performance score from the Lighthouse site audit tool.
GTmetrix Structure is a proprietary performance metric that measures the overall performance of a page.
- GTmetrix Grade – B
- GTmetrix Performance – 85%
- GTmetrix Structure – 93%
- LCP – 1.5s
- TBT – 49ms
- CLS -0.57
In the above screenshot, you can see GTmetrix summary page also contains a speed visualization, which shows a timeline of key events during a page load. It includes :
- Time to interactive
- Large contentful paint
- Fully loaded time
- Onload time
Performance tab shows the number of useful metrics sourced from performance data. It shows the LCP, TBT and CLS, Speed index, time to interactive, FCP as shown in below screenshots.
GTmetrics also shows a ‘Browser Timing’ which includes onload time, time to First Byte, Fully loaded time, DOM interactive time, Backend duration and more.
GTmetrix ‘Structure’ tab provides you with actionable information like ‘reduce initial server response time’, ‘eliminate render blocking’ and more. Structure audits helps to address them and can serve as a good starting point to improve page load times.
Warnings to be displayed by fixing that you can improve the site performance.
Images are the selling factor of products in any online store. If images are clear & attractive then customers are always interested in buying products from your site.
Sometimes we see use of heavy size images on site, it is harmful for your site it slows the website speed. Higher resolution images have larger file sizes and that can negatively impact the site speed. Generally it takes time to load the speed on mobile devices. One of the effective ways to increase Magento 2 speed is by compressing all the prevailing images.
Using the below steps you can optimize images.
Serve scaled images
Scaled images useful to resize images and display size as close as possible to original size of the image. It is necessary to pay attention to image sizes and use perfect size images on your website.
For example, your website banner size is 1440 x 400 pixel and during display on the website the image size is using 2000 x 900 pixel. As a result, the browser has to download and scale the picture down before displaying it to the visitors. This process can slow down your website loading time.
However, this issue will not happen if you use scaled images. Smaller images use less space and speed up your site, which in return will improve your site’s SEO and ranking.
The Waterfall chart gives you a deeper insight by exposing the exact bottlenecks in your website’s loading speed. However, this chart might be slightly tough for beginners to understand.
In simple terms, every asset that your web page consists of is essentially an HTTP request made to your site server. By assets I mean the content, image files, CSS stylesheet, HTML script, etc.
There are a series of steps involved in loading each and every asset on your website. Each bar on the Waterfall graph displays each step involved in loading an asset, and the amount of time that step took.
The Waterfall chart is perhaps the most technical aspect of your GTmetrix speed test. But thankfully, GTmetrix provides a comprehensive guide on how to properly read the Waterfall chart. You can find this guide in the Waterfall graph section itself.