Google’s Core Web Vitals: LCP, FID & CLS explained

You may or may not have heard of Google Core Web Vitals, but the importance of getting them right for your website is like Everest for website owners right now. So what are the Core Web Vitals and what should you do to make sure my website meets them? 

Google Core Web Vitals consist of 3 components that relate to page responsiveness, speed, stability, and how they affect the user experience. 

The 3 Core Web Vitals are:

• LCP (Largest Contentful Paint)
• FID (First Input Delay)
• CLS (Cumulative Layout Shift)

Already scrambling to Google what these mean? Don’t worry, all 3 will be explained in detail below. 

Core Web Vital scoring

Each Core Web Vital will be scored as either ‘Good’, ‘Needs Improvement’, or ‘Poor’. Interestingly, Google has recently started using its Core Web Vitals scores as a way to rank websites. So website owners now know that a good user experience is no longer a “would be nice to have”, but an absolute “must-have”, as it’s crucial for good SEO. 

Take this as an example. If a site scores ‘Needs Improvement’ or ‘Poor’ for any of the 3 Web Vital components, the site will receive an unfavourable ranking which could, in turn, damage their traffic, conversions, and ultimately, revenue.

So what should my website score be?

A website should ideally score ‘Good’ for all 3 components to pass the Core Web Vitals assessment. I know what you’re thinking, easier said than done right? But if you don’t get this right, it could have a huge negative impact on your website performance.

How do I know if my website passes the Core Web Vitals?

Google will eventually introduce visual indicators to identify which sites meet its Core Web Vitals criteria. This is particularly interesting considering that most sites do not pass all 3 tests, with an estimated 80% of websites failing at least one. Google has always used a multitude of measurements to rank a website and page relevance will always be the most important factor, but Core Web Vitals will become increasingly more important over the coming months, and in 2022. 

Where can I see my website Core Web Vitals report?

You can find your Core Web Vitals report in your Google Search Console to see how your site has been assessed. If your Core Web Vitals score poorly, you can run your site through the Google PageSpeed report tool. This report will recommend changes such as removing non-essential code, resizing images, and using web server efficiencies that will ameliorate your Core Web Vitals and steer them towards a ‘Good’ score, and in turn improving your rankings.

Core Web Vital number 1: Largest Contentful Paint

Largest Contentful Paint refers to the loading performance of a site. Largest Contentful Paint does not measure the time it takes for a site to fully load, but rather the largest content element on the page. This can be an image, video, animation, game, etc.

If a page has some text, a small image, and a large video, the video would be the largest element. The largest content element on the page is usually the centerpiece and therefore optimising it to load quicker leads to a better experience. 

Take Scopify’s homepage as an example:

A ‘Good’ LCP score is 2.5 seconds or less, 2.5 – 4.0 seconds scores ‘Needs Improvement’, and anything over 4.0 seconds would be scored ‘Poor’. 

Prior to Largest Contentful Paint, an FMC (First Meaningful Content) metric was used. This metric measured the time taken for the very first content element to appear on the page. The first element is not necessarily the most important to the user and so the metric is not as indicative of user experience as Largest Contentful Paint. 

Google has multiple tools such as PageSpeed Insights that can identify the LCP and give you a score as well as ways to improve the score. It’s important to note, however, that there are several factors that can influence LCP load time. These include:

• Slow loading resources on the page that should be optimised by compressing text, resizing images etc. 
• Render-blocking JavaScript and CSS can slow down load times, so you want to reduce CSS blocking time by minifying your CSS, deferring non-critical CSS and inline critical CSS. 
• Slow server response times means that a browser waits longer to receive content from the server. You can use TTFB (Time to First Byte) to measure response times and improve your TTFB by optimising the server, routing to a CDN, using signed exchanges and caching assets.

Core Web Vital number 2: First Input Delay

First Input Delay is a test to measure the time it takes for a browser to acknowledge the user’s first interaction on the page. A quicker response time leads to a better user experience that feels competent and satisfying. After all, who wants to be on a site with the page fully loaded and wait, for what feels like forever, when you click a link? 

Browsers are working harder than ever as sites become increasingly complex. The First Input Delay measures mouse clicks, trackpad taps, and key presses that require the browser to respond. A First Input Delay score of anything under 100 ms scores ‘Good’, 100 ms – 300 ms scores ‘Needs Improvement’, and anything above 300 ms is scored ‘Poor’. 

To measure the First Input Delay, you need field data from users. Field data isn’t as controlled or as reliable as lab data but Google cannot simply predict the FID. As users will inevitably enter your site on a range of devices, you may see some inconsistent data results. If you consistently see scores that are poor or need improvement, you should address them as soon as possible. 

The majority of bad scores are due to JavaScript. JavaScript can use complex code, that, while helps us create a site to our particular needs, can slow down response times. A browser executing JavaScript cannot simultaneously compute user interactions. You can improve FID scores by removing unused JavaScript, removing unused CSS, and by eliminating render-blocking resources. Managing Javascript is a good idea, but sometimes the code that causes input delays may be essential for your site to function properly and this can be a difficult compromise for site owners.

Core Web Vital number 3: Cumulative Layout Shift

Cumulative Layout Shift is the newest of the 3 Core Web Vitals. The CLS metric observes how many visible elements on a webpage shift around as the page loads, and by how much. What is more frustrating than clicking a button on a page just for the button to shift down as more of the page loads and you instead click an ad? 

The Cumulative Layout Shift metric uses multiple frames of the page as it loads to determine when the elements shift and by how much. Anything below 0.1 is a ‘Good’ score, anything between 0.1 and 0.25 ‘Needs Improvement’, and any score over 0.25 is ‘Poor’. 

Google’s PageSpeed Insights is a great tool to diagnose any CLS issues with a site. The origin of most layout shifts are ads, which are an important source of revenue for site owners, and removing them is sometimes not an option. However, ads in JavaScript are not optimised very well and the issue is exacerbated by the fact that ads typically come from external servers, delaying them from appearing as soon as the page loads. Images and videos can also shift around as they load and even move text around if the developer hasn’t specified the image dimensions in the code. 

Other less common culprits are different-sized fonts and widgets that resize dynamically. You can improve your CLS scores by always including size attributes for images and videos or by using CSS aspect ratio boxes for the given space. Avoid overlapping content over existing content, unless it is by design, specifically as a response to the user’s interaction with the element. Choose Transform animations over animations of properties that prompt layout shifts, for example.

Now you’ve read all the ins and outs of Google’s Core Web Vitals, hopefully, you’ll have a plan of action ready to implement on your website to help you pass Google’s newest test. One of the ways you can do this is by signing up for a free account with Scopify, so we can alert you to slow page speed as soon as it happens. That’s not all, we’ll monitor your uptime, your server performance, domain, and much more. Try it out today!