What are the Core Web Vitals (CWV)?

What are the Core Web Vitals (CWV)?

The Core Web Vitals (CWV) are a set of three web performance metrics. Google's search engine measures these three metrics to help determine which websites to display after a user performs a search. While page load time has long been an important part of search engine optimization (SEO), Google has specifically focused on the CWVs as part of its ranking algorithms since mid-2021.

The CWVs are:

1. Largest Contentful Paint (LCP), which measures loading speed
2. First Input Delay (FID), which measures page interactivity
3. Cumulative Layout Shift (CLS), which measures visual stability

How do the Core Web Vitals affect SEO?

All search engines use bots, called web crawlers or web spiders, to analyze websites. These bots determine what the content on each website is about, and they help determine when that website should be displayed in response to a search query. Web performance is one of the aspects of a website that Google's bots check.

It is not known precisely how much LCP, FID, and CLS affect SEO, since Google keeps its ranking algorithms mostly secret. But the CWVs do impact SEO to a large degree. Google announced its incorporation of CWV into its algorithm in June 2021. And many industry observers have conducted case studies demonstrating improvements or losses in search rankings based on changes in a website's CWVs.

How does this play out in reality? Suppose Google has to choose between putting Website A and Website B at the top of the search results for the search query "What is ARPANET?" Website A and Website B both have strong reputations for providing facts about Internet history, and both provide similarly detailed information on the subject of ARPANET. All else being equal, if Website A loads faster, responds more quickly, and jumps around on loading less than Website B, Google's algorithm will probably decide to show Website A at the top of the search results — even though the websites provide a similar caliber of information.

(Search engine rankings are more complex than depicted in this example, and dozens of factors affect where a website will show up in search.)

Why does Google take web performance into account?

Search engines like Google want to provide searchers with the most relevant information as quickly as possible. Delays in load time tend to frustrate users — conversely, fast-loading pages increase the odds that users will return. While Google has the vast majority of the English-speaking search market today, a poor user experience may cause searchers to turn to other sources for information.

For similar reasons, other search engines like DuckDuckGo and Bing may take web performance into account as well — although, as with Google, it is not known for certain how their page ranking algorithms work.

What is Largest Contentful Paint (LCP)?

LCP measures the amount of time it takes to load the largest piece of a webpage, which is usually an image or a block of text.

LCP does not measure how long it takes to load an entire webpage, but it provides a good benchmark to indicate how fast a webpage is loading. And typically the biggest element on a webpage is its main content, so the time when it loads is often well-aligned with the time when the user perceives that the page has loaded.

Experts suggest that LCP should take 2.5 seconds at the most. However, faster is always better.

What is First Input Delay (FID)?

FID is a measurement of the time between a user's first attempt to interact with a webpage and when it responds. In other words, FID quantifies when a person can first click on the screen and make something happen. Ideally, a webpage's FID will be 100 milliseconds or less.

Suppose Alan visits a webpage titled "How to polish your shoes." He sees a carousel of photos of shoe cleaning products on the top of the page and clicks on the right arrow to navigate to the next photo. The FID is the time that elapses from when he clicks the arrow to when the next photo starts to load.

FID does not measure how long it takes for the requested event to actually occur — how long it takes Alan's browser to finish loading the next photo. It only measures the time between the request and when the request starts to be fulfilled.

What is Cumulative Layout Shift (CLS)?

CLS measures how much a webpage "jumps around" as it loads. Specifically, it measures the largest "burst" of shifts in the page's layout.

A layout shift is when page content moves up, down, or in any other direction from where it originally appeared. In the context of this metric, a burst is a group of layout shifts that all happen within a second of each other. A burst can be up to five seconds long and contain any number of layout shifts.

Imagine that after Alan loads the "How to polish your shoes" page, he tries to click on the right arrow to see the next image in the carousel. However, the image carousel suddenly moves further down the page and Alan ends up clicking on text that loads above the carousel. The webpage has shifted because it did not all load at the same time, and Alan is left feeling confused.

Such a webpage likely has a poor CLS score. It clearly moved around quite a bit, shifting the photo carousel downward by dozens or hundreds of pixels.

How CLS is measured

Google calculates CLS scores with the following equation:

impact fraction * distance fraction = layout shift score

• Impact fraction is the percentage of the screen that changes when a layout shift occurs.
• Distance fraction measures how far an element moves on the screen, also as a percentage of the screen.

If a webpage loads on a screen that is 400 pixels high, and then 200 of those pixels shift when a new element loads, the impact fraction is 200/400, or 50%. If the new element moved another element down by 50 pixels, the distance fraction is 50/400, or 12.5%.

To calculate the layout shift score, take those two percentages and write them as decimals, then multiply them together:

0.50 * 0.125 = 0.0625

If this is the largest amount of movement that the webpage has, the webpage's CLS score is 0.0625.

While ideally a webpage will not shift at all when it loads, this is still a decent score. Experts recommend that webpages have a CLS score of 0.10 or less.

How can developers optimize websites for these three metrics?

How to improve LCP

• Use a content delivery network (CDN): CDNs cache content in locations all over the world so that content reaches users more quickly.
• Optimize images: Images are often the largest element of a page. Reducing image file size can help speed up an image's load time.

How to improve FIP

• Reduce the size of JavaScript functions: Code-heavy dynamic webpages can cause input delays because the browser has to wait for all the code to load before it can execute it. JavaScript minification can help this process go faster.
• Build static webpages: Static HTML webpages load far faster than dynamic pages, especially when distributed via CDN. Learn about static site generators or about Jamstack, a development philosophy that emphasizes static content.

How to improve CLS

• Minimize third-party page elements: Third-party elements on a page load from separate locations compared to the rest of the page. Because of this, they may load at a slightly different time, changing the page's layout as they load. Minimizing the use of these third-party elements reduces the number of resulting layout shifts.
• Reserve space for embedded content: Many third-party elements, such as ads, are essential to a website's functionality or business model and cannot be eliminated. Developers can reserve space on the webpage for these elements to load before the browser fetches the actual element.
• Ensure images load in the optimal size: This is a slightly different process than optimizing images in general. Desktop computers, tablets, and smartphones all need images at slightly different sizes because their screens vary in size. If a browser loads the large, desktop-optimized image first, then needs to get the mobile-optimized image because the device in use is a smartphone, this can cause the content on the page to jump around when the differently sized image loads.
• Include height and width for images and video: The height and width properties tell browsers how large an image will be so they can reserve that space before the image or video loads. Our HTML5 video article has further information on how to do this for video.
• Use CSS aspect ratio boxes: There are a number of CSS techniques developers can use to preserve space for a page element using aspect ratios — learn more here.

Cloudflare also offers several services specifically for improving Core Web Vitals. See this article to learn more: How to use Cloudflare to optimize your website for Core Web Vitals.

What other performance metrics are important?

There are a number of other "Web Vitals" in addition to the CWVs. First Contentful Paint (FCP), DOMContentLoaded (DCL), Time to Interactive (TTI), and Time to First Byte (TTFB) do not impact SEO to the same degree, but they can help developers identify issues that impact the CWVs.

(On its own, TTFB is not a particularly useful metric. But it can be an indication of additional issues that developers need to fix.)

Those who want to learn more can download this white paper, which contains a glossary that defines a number of performance metrics.