The Changes
There’s been a recent change in the overall way GTmetrix functions; namely, they switched to using Google’s Lighthouse metrics as their base. In addition to this, the GTmetrix Report went through a redesign to accommodate the new Lighthouse data, and now has new tabs, visualizations, and some additional insights.
The main difference between the new Lightouse-based reports and the previously used Legacy GTmetrix reports is that the latter were mainly focused on the front-end structure. In effect, this means that the Legacy reports paid most attention to how things were structured on the front-end side of things, without putting much focus on deeper performance insights and how well and fast your page loads from the user’s perspective.
This way, users might’ve scored high on Legacy-based page loading reports, but there was not always a direct, completely reliable correlation between these results and the actual page performance.
Due to GTmetrix’s Lightouse switch, many users have reported having much lower scores than before when using GTmetrix. This article will cover the matter in more detail in order to help you understand the aforementioned changes better, and to help you improve your website performance along the way.
The Report
Now let’s take a closer look at the new GTmetrix report layout, now powered by Lighthouse. The report consists of the Performance Score and the Structure Score.
The Performance Metrics show you how well your page performs from the user’s perspective, checking for loading, interactivity and the overall visual stability.
Here are some specifics that the Performance Metrics take into account:
- How fast your visitors see something on your website (First Contentful Paint-FCP, Largets Contentful Paint-LCP, Speed Index-SI)
- How soon your visitors can use the page and the metrics of Total Blocking time- TBT and Time to interactive-TTI
- Visual Stability of your page where unusual layout shifts are checked during the page load.
The Structure Score will let you know whether your website is built well enough for optimal performance.
And you also get an overview of suggestions and learn more about improving the metrics in question.
Tips
First thing’s first – all other advices & tips on how to speed up your website are very much still valid, server speed still being one of the most relevant aspects.
It’s important to note that it might prove to be a bit difficult to achieve scores of 90-100% without considering some heavy optimization having done, which may even include complete website rebuilds due to the extremely high number of factors that may have an impact on your Performance score.
However, there’s no need to fret as providing your visitors with a smooth experience on your website is not that demanding of a task.
Web Vitals
What we’d recommend is focusing on key metrics and starting with Web Vitals. Once you make sure that your Web Vitals scores are reasonably high, you can rest assured that your visitors are having an enjoyable experience when browsing your website.
Web Vitals focus on 3 Performance Score metrics:
Largest Contentful Paint (LCP)
Largest Contentful Paint measures how long it takes for your largest content element (a hero image, heading text, a large image, etc.) to become visible, and it accounts for 25% of the Performance score.
What you can do to improve your website’s LCP is to:
- Reduce the initial server response time
- Consider using a Content Delivery Network (CDN)
- Serve static assets with an efficient cache policy
Total Blocking Time (TBT)
Total Blocking Time measures the total amount of time your webpage spent in a blocked state, preventing the user from interacting with your page.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift measures the unexpected shifting of web elements while the page is being rendered.
Here’s a few more things that you can pay attention to and improve the performance of your website.
Optimize Your Images
The images take up a significant chunk of data in the internet traffic, and in most cases the images are what most of the loading time on websites goes to. This is due to the fact that the image files are usually fairly larger than HTML and CSS files. Luckily, the image load time can be reduced by optimizing the image(s) in question.
Image optimization is a straightforward process and it usually involves reducing the image resolution, compressing the files and sizing down their dimensions. There are many free tools available online you could use for image optimization, and one we found useful is JPEG mini.
Minify the CSS and JavaScript Files
Minifying is a process that involves removing any bits that the computer doesn’t require to understand and execute a particular piece of code – this includes code comments, empty spaces and unnecessary semicolons.
This process reduces the CSS and JS file size, so they can be loaded faster. Although minifying usually brings only slight improvements in speed, this is still an important step which along with other tips on how to speed up your site results in better overall performance.
Use a CDN – Content Delivery Network
CDNs increase website speed by caching the content to multiple locations across the world. The CDN caching servers are usually located physically closer to the end user than the actual hosting/server is. The content requests are transferred to the CDN server instead of the hosting server. By using CDN, you can reduce the page load time in a significant way.
Update Your PHP Version
Website speed can also be affected by several seemingly minor factors, like updating your WordPress theme, updating the plugins as well as the PHP version on your server. This is why it’s important to use the latest version of WordPress at all times, and the latest theme and plugin versions available – this will also prevent any potential security threats.
Avoid Redirecting
As you may know, redirecting is the process of automatically transferring visitors from one web page to another. Redirecting ads a few fragments of a second to the page load time, and when it comes to optimizing your website, every second counts. Redirecting is sometimes unavoidable, but you should steer clear of it unless of course it is necessary.
Deactivate Any Unused Plugins
If you happen to still have a left over plugin or two which you planned on using, but ended up going with another one, or you simply did not find the plugin useful after you installed it, you should deactivate and/or delete the said plugin. This way you will free up a small portion of server resources, which will have a positive effect on your website’s performance.