Google Core Web Vitals Made Simple

What is Google Core Web Vitals?

In May 2021 Core Web Vitals became ranking signals for Google. This update combined existing UX-related signals. The purpose was to simplify some of these signals and help sites focus on the metrics that were most important in improving user experience on a site, those being the Core Web Vitals.

Core Web Vitals focuses on three key aspects of user experience;

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

You can find your site’s Web Core Vitals data in the “enhancements” section of your Google Search Console account.

Why Are Core Web Vitals Important?

User experience has always been key when it comes to ranking highly in Google. Creating a satisfactory experience for the searcher means they’re more likely to return. If your site is relevant and full of great content and useful resources then brilliant, you’re likely to appear in a good position in the rankings; but, if your site is slow, takes a while to load, badly structured or just generally hard to navigate then your user isn’t going to have a great experience. So they’ll leave, knocking up that bounce rate and losing you a potentially valuable conversion. Whether bounce rate affects your ranking is beside the point. You could be sat at number one in the rankings but not get any conversions because your website simply isn’t fun to be on. Simply put, Core Web Vitals are important because Google says they’re important. Frankly, that’s all that matters when you’re trying to rank highly. 

Largest Contentful Paint (LCP)

What is LCP?

First impressions are vital in any respect, especially when it comes to your website visitors. On average, your website has 15 seconds to capture a user’s attention. If the first 5-6 seconds of that visit is spent waiting for a page to load, you’re drastically reducing the time you have left to influence that user.

LCP measures when the largest content element in the viewport becomes visible. It can be used to determine when the page’s main content has finished rendering on the screen. Basically, this is the time it takes for the most visual aspect of your page to load, timed from the point the user clicks into that page to the point that media is fully loaded.  

What is a good LCP score? 

A good LCP score is 2.5 seconds to load. The size of the element is generally the size that’s visible to the user within the viewport. If the element extends larger than the viewport, or if it’s clipped or overflows, those portions aren’t counted toward the element’s size. You can find more on the various types of content elements are the way in which each of those are managed on Web.devs great guide to Largest Contenful Paint

Note that a browser’s viewport is the area of the window in which web content can be seen. This can sometimes be different to the size of the rendered page. So the browser provides scrollbars so that the user can access all the content. 

What negatively affects your LCP score?

Slow server response time is normally the biggest culprit for a long load time. Following this, if your image isn’t optimized or compressed, this may also increase its load time.

How to increase your LCP score

Following on from the above, these are some steps that you can take to increase your LCP score. 

• Optimize your server: 
• Route users to a nearby CDN
• Cache assets
• Serve HTML pages cache-first
• Establish third-party connections early
• Use signed exchanges

First Input Delay (FID): 

What is FID?

FID continues along the same vein as LCP in being vital to a user’s first impression. It’s all well and good a web page loading nice and quickly so you can see its content, but if you have to wait longer for that content to respond to interaction, it sort of defeats the purpose. With that, FID measures the time from when a user first interacts with a page, so clicks a link or button, to when the desired action takes place. 

What is a good FID score?

To provide the best experience for a user, websites should aim for a First Input Delay of 100 milliseconds or less. To be sure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

What negatively affects your FID score?

As FID is based on how quickly your web page responds to interactions, anything which slows your pages load time or general site speed is likely to negatively impact your FID score. Similar to LCP, this can include large images, poor server speeds or having lots of javascript or CSS running on a page. 

How to increase your FID score

Much like LCP, FID is concerned primarily with load speeds. That being, how quickly a web page has loaded enough that you can interact with it. Press buttons, play videos, start GIFs and all that good stuff. Therefore it makes sense that increasing your website speed would help improve this score. Below is a list of ways to improve your website speed and, ultimately, your users’ experience.

• Enable compression
• Minify CSS, JavaScript, and HTML
• Reduce redirects
• Remove render-blocking JavaScript (Google suggests avoiding or minimising the use of blocking JavaScript.)
• Leverage browser caching
• Improve server response time
• Use a content distribution network
• Optimise images

Cumulative Layout Shift (CLS):

What is CLS?

CLS measures visual stability. You know those times you’ve been reading an article and suddenly, out of nowhere, something on the page changes position, or the whole page just jumps down to make room for an annoying and creepily relevant advert for that watch you thought about buying but definitely didn’t tell anyone about? Or maybe you were about to car a video you definitely shouldn’t be watching at work only for the page to shift and -whoops- you’ve accidentally shared it across your entire social media network… just me? Fine, either way, it’s pretty annoying and doesn’t make for a great user experience. CLS provides a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. We won’t go into the technical stuff of what a layout shift or burst layout shifts here. Suffice to say that unexpected content movement on a page makes for a negative user experience and should be avoided. If you want a more in-depth explanation of how this score is measured take a look at Web.devs explanation on how CLS is measured in the lab and in the field.  

A layout shift is a visible element that changes its position from one rendered frame to the next. This happens when a visible element changes its position from one rendered frame to the next, affecting the content around it. A burst of layout shifts, known as a session window, is when one or more individual layout shifts happen in rapid succession with less than 1-second in between each shift, and a maximum of 5 seconds for the total window duration.

What is a good CLS score?

To provide a good user experience, pages should maintain a CLS of 0.1. or less. To understand this measurement it’s important to know how this number is calculated. It’s a little complicated so we will try to give a simplified explanation. 

The Cumulative Layout Shift score is a culmination of two measures of the movement of an unstable element; the impact fractions and the distance fraction. 

Impact fraction is basically a measurement of how an unstable element impacts the viewport area between two frames. So if you have a block of text which takes up half the viewport of a page in one frame, then, in the next frame that block of text shifts down by 25% of the height of the viewpoint, this means that 75% of the viewport is impacted—giving you an impact fraction of 0.75.

Distance fraction is slightly more self-explanatory and is just the distance that the unstable elements have moved relative to the viewport. The distance fraction is the largest distance any unstable element has moved in a frame, divided by the viewports largest dimension.

So if your largest viewport is height, typical on a mobile, and the unstable element has moved by 25% of the viewport’s height, this gives you a distance fraction of 0.25. 

These scores are then combined to give you your CLS, so if your impact fraction is 0.75 and your distance fraction is 0.25, the Cumulative layout shift score is 0.75 * 0.25 = 0.7875

What negatively affects your CLS score?

LCP is negatively impacted only by unexpected layout shifts. Many dynamic web applications frequently change the start position of elements on the page. The important thing to consider is whether the user is expecting it. Layout shifts occur in response to a user’s interaction, such as clicking a link or button or using a search box. so long as the shift takes place close enough to the user’s interaction so that it’s clear to the user that the shift is intentional and a result of their action. 

Conversely, an unexpected layout shift is as you would imagine, unexpected. For instance, an ad loading too slowly and suddenly appearing in the middle of some text after the rest of the page has loaded fully. Situations like this can be avoided by 

How to increase your CLS score

Simply put, the best way to increase your CLS score is to make sure your content loads quickly or at least display a load indicator in the area of the ad. This means the text will already be correctly positioned for when this does load and the users’ know something will appear in that area soon.  Below are some additional tips you can consider to increase your CLS score. 

• Include size attributes on your images and video elements.
• Avoid inserting content above existing content, unless in response to a user’s action.
• Use transform animations rather than animations of properties that trigger layout changes.

Need help optimising your business website? Get in touch with ROAR Digital Marketing today.