September 20, 2023

SEO 101: What are Google's Core Web Vitals?

Google’s algorithm is a bit of a mystery. We know there are hundreds of ranking factors, but we don’t know exactly what those are. However, now and again we’re given hints and one of those is when it comes to a user’s page experience -  Core Web Vitals. 


You may have seen Core Web Vitals mentioned here and there when learning about SEO, but what are they? And have they changed since they were introduced?

What does the term “Core Web Vitals” mean?

The term Core Web Vitals refers to a set of factors that are important to google when assessing a page’s user experience. In Google’s own words:


“Core Web Vitals is a set of metrics that measure real-world user experience for loading performance, interactivity, and visual stability of the page.”


To break it down word by word, “core” refers to the idea that these metrics are fundamental to a page’s experience. “Web Vitals” refers to the metrics being something measurable for a web page. These provide a “base” essentially for a user’s page experience - if a page fails on these, then it has a major impact. 


These metrics give Google a better understanding of the user experience in a more measurable way. They’re part of a set of ranking signals that Google uses, but are more quantifiable than other things like accessibility or mobile friendliness which are typically hard to measure in a meaningful way. 

What are Core Web Vitals?

At the moment there are three different Core Web Vitals - Largest Contentful Paint, Cumulative Layout Shift, and First Input Delay. This sounds like a lot of jargon at first, but when you break it down they all relate to page speed and experience. Let’s start with some quick definitions, then we’ll get more in depth. 


Largest Contentful Paint (LCP)

This is the time it takes a website to show the user the largest piece of content on the viewport or screen. This is measured in seconds - a good score is anything under 2.5 seconds.


Cumulative Layout Shift (CLS)

This is about the stability of the content on a page and how much the layout jumps or shifts. This is a "unitless" measurement - Google instead gives it a score, the ideal of which should be 0.1 or lower. 


First Input Delay (FID)

This is the time from when a visitor first interacts with a site, to when the browser processes that interaction. This is measured in milliseconds - a good score is anything under 100ms. 


It’s worth noting that in 2024, FID will be replaced by a new Core Web Vital called INP - Interaction to Next Paint. We’ll come back to this later!

Largest Contentful Paint (LCP)

Largest Contentful Paint measures the time taken for the main or largest piece of content of a web page to be fully loaded and ready to interact with. The content measured is anything “above the fold”, in other words everything you can see on a screen without scrolling. Anything that appears below this doesn’t count towards LCP. Elements that are measured will be things like images, layout elements, background images, etc. 


Google values this measurement as it gives a more accurate clue as to the experience of that page - how fast it loads. Load speed is a concern for users, so if a page is within the good range for LCP it can indicate that it provides a good user experience. It’s also straightforward for Google to measure, and for website owners to optimize. 

How to optimize for LCP

Largest Contentful Paint is the core web vital that you can probably do the most for in terms of optimization. Here are some of the elements that can trigger LCP:


  • Images including SVG files
  • Video elements 
  • Elements with a background image 
  • Text blocks 

These are all elements that can be easily optimized, so here are a few things you can do:


  • Utilize a content delivery network (CDN) - CDNs not only help to speed up page, but in many cases content which is delivered via a CDN doesn’t count towards LCP scores. If you’re a Shopify merchant, then you already will have use of Shopify’s global CDN.

  • Optimize image sizes - Google considers the original image file size over the defined size within a page’s code. This means that it’s important to resize and optimize that original file size, as that’s what will be used for measuring LCP.
  • Implement browser caching - Caching is a process of storing static page elements so that they don’t have to load every time a user loads a page. This cuts down on the time taken to load a page’s content, which can improve LCP.

  • Minify and remove unnecessary code - This is the process of optimizing code by reducing it down through removing line breaks, white spaces, etc. You can also remove unused or unnecessary code to cut down. 

Taking these actions will speed up the time taken to load, therefore boosting LCP. Click here for Google’s own article about Largest Contentful Paint.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift measures the visual stability or “jumpiness” of a page’s layout. If you load a page, how long does it take before the layout is stable and doesn’t move around. So for example if something unexpectedly jumps or shifts on the page, like an image loading causing other elements to jump around the page. 


Part of the reason why Google measures CLS is because layout shifts can be frustrating for users. If you’re reading something on a page and it suddenly shifts down for an ad or another page element, it’s not a great experience. When a page takes little time to become stable, that means it’s more likely to provide a good user experience. 

How to optimize for CLS

CLS is all about making a page’s layout stable, fast. So the kind of elements that will influence it might be:


  • Banner ads, embeds, and images/videos without specified sizes 
  • Dynamic content above the fold/in the viewport without a placeholder for screen size
  • Custom fonts that change rendering behavior 

The fixes for these are pretty straightforward:


  • Define dimensions for all visual content - Without defining dimensions, browsers won’t know how much space an element takes up on a page until it loads. So if it takes up more space than expected, this results in more layout shift. 

  • Preload any custom web fonts - Using a custom web font is common, but it can mean that while a page is loading the custom font is replaced. Then when the custom font has loaded, the layout might shift. Preloading fonts is essentially telling the browser to prioritize loading fonts, and so will do this faster. 

    • Click here for Google’s article about CLS.

    First Input Delay (FID)

    First Input Delay measures the time to interactivity, in other words how long it takes for a browser to respond to user action. For example, clicking “add to cart” - how long does it take before the expected action happens. In ecommerce, interactivity is a big part of most pages. After all, if you’re reading an article then there’s less chance that you’ll be clicking on an element so perhaps FID isn’t as important. However if you’ve got a product page with lots of interactive elements - variant selection, add to cart, zoom on images, clicking links - then FID becomes very important. 


    Again Google wants to measure this because of the frustration that slow FID can result in for users. Think about how annoying it is when you click on a button on a page and it just doesn’t do anything right away. Maybe you try a different link, and it still doesn’t do anything. The more this happens, the more frustrating it gets. So, Google wants to make sure that not only does a page load quickly, but that it becomes interactive quickly too. 

    How to optimize for FID

    Poor FID scores usually result from code, specifically Javascript execution. Images, videos, and other page elements are loaded without the user requesting them unlike when a user clicks on a button. While large Javascript are loaded or executed, the browser won’t prioritize these user requests. This can make it feel like the desired action is stalled, when it’s sitting in a sort of queue of traffic waiting to be processed. 


    As you can imagine, this is where things start to get more technical, and require help from someone who knows their way around your site’s code. To optimize, you need to minify code, and break up Javascript tasks into smaller chunks so that there isn’t one large Javascript file loading all at once. 


    Click here for more information from Google about FID.

    FID will be replaced in 2024 by INP - Interaction to Next Paint

    For the moment, FID is a Core Web Vital however Google announced in May 2023 that a new metric would be taking its place in 2024 - Interaction to Next Paint (INP). According to their data, 90% of a user’s time on a web page is spent after that initial load. Therefore, it isn’t all that valuable to only measure the experience at that point of loading. They want to measure it throughout the lifecycle of a user’s time on a page.


    Similarly to FID, INP is about measuring the time taken from when a user interacts with something to when the browser processes it, and the expected action happens. However INP takes it a step further. Interaction to Next Paint observes all the interactions a user has on a page, and measures the longest. It doesn’t just measure that “input delay”, it also measures the processing time and presentation delay until the action happens. 


    You can learn more about INP from Google’s article, here.


    —


    Knowing how Google measures page experience can give you a better understanding of how these signals affect your customers as they browse your store. They can also give you vital clues about how to improve your SEO and ranking with real measurements that Google actually uses to signal page ranking. 


    If you want some additional tools, you can use PageSpeed Insights, Lighthouse, and the Chrome UX Report to get started.