Google’s Core Web Vitals Update: How to optimise your site

Last month Google introduced a new update to its ranking criteria. This new update to the algorithm looks at your website’s Core Web Vitals. In this article we’re going to look at exactly what these are and how they may affect your website quality scores. So let’s get right into it. 

What are Core Web Vitals? 

Your core web vitals measure certain aspects of your website’s user experience including page load time, interactivity and visual stability. They each come with their own abbreviations. 

• Loading time – Largest Contentful Paint or LCP
• Interactivity – First Input Delay or FID
• Visual stability – Cumulative Layout Shift or CLS

Each of these elements will now be utilised by Google to determine the overall quality of your site and will very likely affect your ranking on Google if you don’t see to them. But what are they? 

Largest Contentful Paint (LCP) 

As mentioned above it is directly related to your site loading speed but it is important to note that it’s not the load time from clicking on the Google link to your site coming up (although that is important too). It actually refers to your on-page links – your top navigation for example. Google will now be looking at how long it takes from link click to page transition. You are able to check your score using Google PageSpeed Insights. Lucky for you Google has also created some helpful guidelines for you. Your score can potentially fit into one of three categories: Good, Needs Improvement, Poor. 

How do you go about improving your LCP score?  

To begin with to receive a good LCP score your page needs to load in 2.5 seconds or less. There are at least five ways for you to improve your loading speed. These include: 

• Image optimisation 
• CSS and JavaScript Optimisation 
• Faster server response time 
• Limited and optimised client-side rendering pre-loading and pre-connecting. 

The article linked by NitroPack does quite a nifty job of explaining each of these optimisation options to help you improve your LCP and is well worth the read. Or at least forward it to your web-dev because it is fairly technical. 

First Input Delay (FID) 

FID measures the time between a user’s first interaction with a page to when the browser actually responds and begins to process event handlers in response to interactions. This would be in relation not only to link clicks but also to filling out forms or opening up accordion texts on mobile. Again, the measurements from Google rank from good, to needs improvement to poor. 

One of the critical reasons you might have a poor FID score can be because the browser the user is using is busy analysing and executing a JavaScript (JS) file loaded by your site or app. When the browser is trying to complete an action like this it’s simply not able to run any event listeners because the JS that’s being loaded may well tell it to do something different. 

Understandably some of this is difficult to understand if you’re not too tech-savvy, so it’s worth looking into getting help from a web dev or analytics professional to help you try and improve your performance. If you are looking to see how you’re doing we recommend using the Chrome User Experience Report, it will help you get real-world insights into how users are experiencing your website. 

How do you improve your FID

If you thought 2.5 seconds was a difficult mark to make then FID is going to feel like warp speed – 0.1 seconds is the amount of time set for a user to feel like their action has an immediate response. To receive a needs improvement score you’d be looking at between 100MS to 300MS. If you’re not making the grade it’s very likely that your CSS or JS usage has not been optimised. If it’s your CSS that’s causing the problem you can look into minifying or compressing files or removing unused CSS code. If JS is at fault, there are a number of ways to improve the score. 

According to Onely these include: 

• Break up long tasks into smaller, asynchronous tasks.
• Generate as much content as you can statically, server-side.
• Explore the on-demand loading of third-party code.
• Use web workers.
• Defer unused JavaScript.

In their article Onely does go into more detail about how to conduct these actions but ultimately your web dev should be able to help facilitate any fixes. 

Cumulative Layout Shifts (CLS)

This particular metric is all about the visual stability of each of your site pages. It is important that all elements load at the same time because if there is any lag on any visual items, you’re likely to be looking at a needs improvement to poor score. 

Your CLS score will be most affected by unexpected shifts in layout, this includes pop-ups, buttons and of course videos and images. A site with a low CLS would include a stable page display with not many shifting elements. Reducing your CLS is particularly important when it comes to mobile devices so when looking into this – remember to test for both desktop and mobile. 

This metric is especially important when it comes to user experience. The most common ‘unexpected’ layout shifts that can negatively affect the user experience are pop-ups. You know the one’s when you land on-site, you’re about to click on a navigational link but then a form or advert pop-ups so you’re redirected to a place you weren’t intending to go in the first place. 

How to improve your CLS

It’s quite important to note that CLS scoring is not based on timing but rather calculated using detected shifts in the browser. Bear with us for a moment as we get a little technical. “In order to calculate your shift score, a browser looks at the viewport size and the movement of the unstable elements in the viewport between two rendered frames.” the guys at web.dev continue to explain “The layout shift score is a product of two measures of that movement: the impact fraction and the distance fraction.” 

Now that we know how it’s measured, this is how you can go about improving your score according to Web.dev: 

• Specify your image dimensions – make sure you include the width and height required for website images and videos
• Reduce layout shifts caused by ads or embeds – you can do this by reserving an ad slot size before loading an ad library for example. 
• Don’t put new content above existing content – in other words carefully think about how you insert dynamic content around static content

Other need-to-have site optimisations

So there you have it, a quick guide to Google’s new Core Web Vitals update. However, before I close off there are a few honourable mentions that you need to also ensure you have in place to protect your website ranking and these include: 

• Mobile-friendliness – most people view online content via their mobile devices so when building your site think mobile-first. 
• Safe-browsing – ensure your site is protected from malware if you’re using WordPress here is a great plugin to help ensure your site is protected. 
• HTTPS – Ensure your site is secure by purchasing an SSL certificate. You’ll know it’s in place when you see the little padlock next to the URL in the browser bar. 
• Get rid of your pop-ups (intrusive interstitials) – Not all pop-ups are bad, but those that cover the full view of the content your user has tried to look at just ruin the user experience. 

If you take all of these things into account you’re well on your way to adapting to Google’s new update. This update is taking into account the user experience in a greater way than Google has ever done before. At WeAreBrain we are a user-first enterprise so we’re on board with the new algorithm and we believe every business should be too. 

David Roman

Previous story

Planning for success: e-commerce and project management

Next story

Introducing Jurgen, our Business Development Leader bringing ideas to the table