On November 11, 2020, Google announced that the user experience of websites will become a ranking factor from May 2021. This user experience will be measured by a new set of metrics called the Web Vitals. I will not explain these metrics in detail as there are plenty of posts about the Web Vitals metrics, but I will show you how you can check your scores and will give you some insights how to improve the speed of your TYPO3 website. Don’t wait, start to focus on the Core Web Vitals, a subset of the Web Vitals and make sure you are prepared for the (near) future.
As said, there are plenty of good resources on Web Vitals metrics. My friends of Yoast, wrote some great posts about this, but also Erwin Hofman, a sitespeed consultant from the Netherlands, shares a lot of information about this topic. I will briefly explain the main Core Web Vitals metrics though.
This metric is used to check how fast a website loads. It will check how much time it will take to render the largest image or text block that is directly visible. The result is in seconds and if you have a LCP below 2.5 seconds, the metric tells you have a fast loading website. Improving your loading time, will lower the bounce rate as we all hate to wait.
The FID metric is used to check when a user is able to interact with your website. The result is in milliseconds. For an optimal user experience the metric tells your FID should be below 100ms.
Have you seen website where the page is shifting a lot? Not that nice to see and you will not start reading or clicking before the page is fully loaded. With the CLS, unexpected layout shifts are measured. The metric tells you to aim for a maximum layout shift of 10% to have a good scoring website.
As you can see, the Web Vitals are aiming for faster websites with a great usability. But how do you know if your website is passing these Web Vitals metrics? There are different options to do so. Let's have a look at the options.
There are several external tools that will analyse the speed of your website. Tools like Pingdom, GTmetrix and SpeedCurve, will all help you to optimise the speed of your website. They will monitor the speed of your website and will give you mostly technical suggestions on how to improve the performance and UX of your website. The main drawback of those tools is that the mobile performance is (as far as I know) all emulated on a desktop device.
This tool, which is built by Google, will measure the performance and will give you suggestions how to enhance your page speed and user experience. It will give you the information about the Core Web Vitals as well. I agree with Erwin Hofman, that I would prefer PageSpeed Insights over tools like GT Metrics or Pingdom. The downside is that if you want to see the information about Core Web Vitals, is that you need field data which will only appear when the Chrome User Experience Report contains enough speed data about your website. But Web Vitals are not only for the most visited websites, they are important for all websites. So if you want to check the Web Vitals metrics for other people, you need to measure these metrics yourself. Nevertheless, PageSpeed Insights is a very good tool which will give you information about how to improve your website.
As I'm really interested in this topic for quite some time already, I created two extensions.
The first one is EXT:page_speed_insights. It will tell you if there are enhancements for the page you are editing. It will use the lab data from PageSpeed Insights to inform you and will check all the pages you have marked which you want to check. This extension will not only give you feedback about performance, but also on SEO, Best Practices and PWA enhancements.
As said, if you are using the website of PageSpeed Insights to check your Web Vitals metrics, the Chrome User Experience Report needs to have enough field data about your website. This extension will add a very, very small piece of JavaScript to the frontend of your website which will use the official Web Vitals library to measure those metrics. It will post the data to the TYPO3 database and will present it to you in the backend of TYPO3. This way, you can see for every page if the page will pass the Web Vitals.
You can buy this extension for just € 35 for individuals or € 75 for agencies. A small "investment" to keep track of your website.
As said, there is a lot of great information about Web Vitals and how to enhance your website to pass the Web Vitals. I can only give you the advice to start now and not wait for Google to change the algorithm. If you will not pass the Web Vitals and your competitor does, you will most likely drop in the rankings. And I have not met someone that likes to drop in the search rankings...
Some of the resources I recommend to read:
Do you have great resources? Let me know by using the contact form and if I like the resource as well, I will add it to this list.
Do you have a question? Do you want to work together? Just send me a message and I will get in touch as soon as possible.
