Core Web Vitals are the new metrics Google will soon start using when assessing a page’s experience score. As we mentioned in our blog An Insight Into Core Web Vitals, we’re doing a lot of behind the scenes improvements to get your websites ready for these changes Google are making. And while our platform changes can certainly do a lot for automatically improving the page experience, technology can’t solve everything.
Quick recap of Core Web Vitals
Web vitals are divided into the following 3 metrics:
- CLS (Cumulative Layout Shift): Calculates how often users experience unexpected shifts in a website's layout. For example, a button that unexpectedly moves when the user goes to click on it.
- LCP (Largest Contentful Paint): Measures how long it takes for the largest image or text block visible within the viewport to display, relative to when the page first started to load.
- FID (First Input Delay): Evaluates a visitor’s first impression of a site's interactivity and responsiveness. For example, it measures the time from when a user first interacts with a page to when the browser begins to respond to that interaction.
Now you've had a little recap, we’ve outlined 6 practices that you can follow when building and designing your website, to improve how the site scores according to Google’s Core Web Vitals.
1) Use no more than 2 fonts on your website
Fonts are automatically downloaded and embedded within the HTML of the page (up to a max of 50KB of fonts), speeding up how fast your browser is able to display fonts on the screen. This helps to prevent font flashes and CLS on a loading page. We advise you use no more than 2 different font families on a website, and only a few weights from each.
2) Only load a single image above the fold and place background videos below the fold.
Above the fold is the first part of the page you see once you click a link and below the fold refers to the section of a web page that is only visible after scrolling down. Images and background videos are typically the largest asset that browsers download on a website. When there are a lot of images, large images or videos, there can be a delay in LCP and an increase in CLS because the browser has to download the elements before they can be rendered properly.
In the case you need multiple images above the fold, reduce the size of the image to that of an icon or thumbnail.
3) Move custom/heavy widgets below the fold
Custom widgets aren’t always slow to load, but if they require calls to third party tools or external APIs, they may become slow to load. Heavy widgets are widgets that, by definition, require external API calls or third party code to load fully. Move all custom and heavy widgets to below the fold on site pages, to prevent them from having a negative impact on CLS and FID. Examples of heavy widgets are:
- Map widget
- Facebook widget
- Twitter feed widget
- Video widget
4) Avoid having multiple custom/heavy widgets on the same page
Custom and heavy widgets can have different load times from each other, and this can significantly decrease LCP and overall page loading experience. The exact opposite of what you want. Our advice, do not add these heavy duty widgets on one single page, spread it out and improve your customers' experiences on your website.
5) Place Product Gallery Widgets above the fold and place the Main Store widget below the fold on your eCommerce site
Did you know the Main Store Widget loads with JavaScript and this can affect CLS because it takes longer to load than the rest of the content on the page. With this in mind, use Product Gallery widgets to display your store products above the fold, and place the Main Store widget below the fold.
6) Remove Google Tag Manager (if possible)
Google Tag Manager may download extra libraries and code that you don’t need, which can negatively impact LCP. If you only have one or two tracking technologies, it might not be worth implementing Google Tag Manager as it could slow down your site.
Conclusion
Core Web Vitals are going to have a big impact on how websites are ranked by Google, and promise to do great things for user experience. The team at Avanty HQ are working night and day to ensure that your website does well when Google starts implementing its new rankings. Whilst other sites play catch up, you will be ahead of the game. We hope these tips give you some easy-to-implement and easy practices of improving things at your end as we've got the tech bit covered.
