What are the Core Web Vitals?

Back in 2020 – which seems like an age ago already – Google revealed that in May 2021 they will be including 3 new search ranking signals into their algorithm, named the ‘Core Web Vitals‘:

• Loading – Largest Contentful Paint (LCP)
• Interactivity – First Input Delay (FID)
• Visual Stability – Cumulative Layout Shift (CLS)

Google will use these new factors to determine the overall user experience on a website, which in turn will determine that website’s visibility on search engines.

The new ranking signals will be grouped together, and they will be added alongside the existing 4 ranking signals – Mobile Friendly, Safe Browsing, HTTPS, and No Intrusive Interstitials – to help build Google’s “page experience score” of a website.

In simpler terms, the Core Web Vitals will be looking at Page Speed, and answer questions such as: How fast does the page load? How fast can a user interact with the page? How quickly does the page become stable? We’ve often become frustrated when landing on a website, only to spend the next 15-30 seconds waiting while the page loads, the layout moves about, then we go to click on a link, and all of a sudden that’s moved again and we get sent somewhere completely different! So by introducing these new ranking factors, Google is challenging web developers to build better quality websites, with faster load times, and better overall user experience.

John Mueller, Senior Webmaster Trends Analyst at Google, talks more about the Core Web Vitals here: Core Web vitals & SEO

Where can I find my Core Web Vitals?

Now, you may be wondering where you can find your Core Web Vitals data? All that information is readily available in Google Search Console, under the “enhancements” section. The report splits the URLs that Google has in their index for your website into three categories – Poor, Needs Improvement, and Good. As mentioned earlier, your website is judged on the speed of each of the factors that make up the Core Web Vitals. The graphic below gives you an idea of what kind of speeds will determine which category the individual URLs on your website will fall into:

Image from Google

Whilst the data in Google Search Console gives you an overview of your entire website, and which pages in particular you need to pay attention to, you can also use Google PageSpeed Insights to see the performance data of an individual page. This article outlines more tools you can use to measure your Core Web Vitals.

Let’s take a closer look at what each factor actually means, and what you can do to make improvements and fix any URLs that are poor or need improvement.

Largest Contentful Paint (LCP)

This essentially looks at how fast the page loads from the point of view of the user. This is based on the amount of time it takes to render the largest content element visible in the viewport. Types of elements considered for Largest Contentful Paint can be things like images, videos, and text.

But what actually causes a poor LCP score? There are a number of factors, but the main ones tend to be:

• Slow Server Response Times
• Render-blocking JavaScript and CSS
• Slow Resource Load Times
• Client-side Rendering

We can list the many tasks we can perform to help improve your LCP score, but that could be a very long list. However, to put it all into one term, it would be Optimise.

You can optimise images and fonts to load in next-gen formats. Optimise and improve the efficiency of your server-side code, which will directly improve the time it takes for the browser to receive the data, thus reducing the load time for content. Optimise your CSS so that only the minimal amount of necessary CSS is blocking render on your site, and just remove any unused CSS entirely. Minify and compress JavaScript files. There are so many ways you can optimise your site to be LCP friendly, but it depends on the actual content and development of your site that will determine what exactly needs optimising.

Cumulative Layout Shift (CLS)

We’ve all been on a website, and we intend to click on a button or link, and all of a sudden the layout changes, and we press something entirely different. Or you could be reading a large portion of text, and without warning the layout changes, moving the text, and you’ve lost your place. As well as being incredibly irritating, this can actually cause real damage.

Video from Google.

Cumulative Layout Shift, or CLS, looks at how much the content on your page moves around as it loads, or in other words the “visual stability” of the page. If your content moves around and shifts places as it loads, then it is likely you will get a high CLS. For obvious reasons, this isn’t good, as it doesn’t provide a good user experience.

Google calculates your Layout Shift Score by looking at two measures of movement:

• The Impact Fraction – measures how unstable elements impact the viewport area between two frames.
• The Distance Fraction – Measures the distance that unstable elements have moved, relative to the viewport.

To help tackle unexpected layout shifts that can cause a high CLS, there are a number of tasks you can look at. But as a starting point, you should begin with:

• Include size attributes for images and videos, so the browser knows exactly how much space that element requires on the page.
• “Reserve” space for ads or embedded elements, even if the block is blank for a few moments while the content loads, the layout already exists, so once the content is retrieved it will simply appear in place of the reserved space.
• Minimise the impact from web fonts causing FOUT (flash of unstyled text) or FOIT (flash of invisible text) by modifying the rendering behaviour of custom fonts or by using a font loading API.

First Input Delay (FID)

The last Core Web Vital we’re going to be looking at is the First Input Delay. This tells us at what point a user can actually begin interacting with the page. Common examples of interactive content may include choosing an option from a menu, a ‘login’ field where the user is required to input their data, clicking on a link etc.

FID isn’t always that important. For example, if a page contains high levels of content, such as a blog or a news article, there aren’t usually many interactions a user will need to take. But for a login or sign up page, for example, FID will play a major part.

Let’s take a look at the Twitter login page as an example:

It doesn’t matter how long the surrounding content takes to load, what matters is how quickly the user can begin typing their login information, in other words, how quickly can they interact with the page.

A lot of websites and services have already begun simplifying their login pages. Take Google as an example:

All the focus is on the login form. There is no other content that is taking up loading times, thus making the form load faster, and giving the page a better FID score.

While this is one of the ways you can take FID into consideration for login or signup pages, there are instances where you need to consider FID on pages that require content. Here are some actions you can take to improve the FID score on your website:

• Remove any non-critical third-party code – third-party codes (such as Analytics, Hotjar, Advertising Networks etc) can have a negative impact on FID.
• Reduce JavaScript execution time – users will find it difficult to interact with a page while the browser is loading up JavaScript. Minimizing, compressing or deferring the JS on your page will be key to improving to FID score. You should also remove any unused code. You can also use a browser cache to help load content on your page faster, which then helps the browser load JavaScript even faster.
• Minimize main thread work – If the main thread is busy doing something such as parsing, compiling and executing JS, then the web page may not respond to user interactions. There are a number of ways to minimize main-thread work, so it depends on what exactly your main thread is doing as the page loads that will determine which areas you need to optimise.

Addy Osmani, Senior Staff Engineering Manager at Google, talks about ways to optimise for Core Web Vitals in this video.

What do I do now?

Understandably, there is a lot of information to digest here. There’s no shame in thinking “I haven’t got a clue what any of this means” or “I don’t know what to do next”. This is very much a ‘technical’ aspect of SEO, which can require some more expert guidance and abilities. So, if you want to get started on making sure your website is ready for these new ranking signals coming into effect, our teams will be happy to audit your site, provide recommendations, and assist with the implementation. Do not hesitate to Contact Us today.