The Core Web Vitals (CWVs) are three web performance measurements that impact where a website shows up in search engine results: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
After reading this article you will be able to:
Copy article link
The Core Web Vitals (CWV) are a set of three web performance metrics. Google's search engine measures these three metrics and incorporates them into its decisions about which pages to display in search results. This means search engine optimization (SEO) practitioners should optimize their webpages' core web vitals as part of a holistic strategy to improve those pages' rankings.
The CWVs are:
While page load time has long been an important part of SEO, Google announced in 2020 that CWVs would become a part of its ranking algorithm in mid-2021. This is known as the Google page experience update.
In the announcement, Google stated that the CWVs would be factored into page experience signals that help determine a page's search ranking. Other page experience factors include HTTPS-security, mobile friendliness, and the absense or presence of intrusive interstitials (like pop-ups). The update's goal was to reward webpages that provide a positive user experience.
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 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 significant degree. 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.)
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 — whereas 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.
Largest Contentful Paint 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.
Google's guidlines classify a LCP measurement as 'good' if it is under 2.5 seconds. However, faster is always better.
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.
An earlier version of the LCP metric is First Meaningful Paint (FMP) which measures when the primary content on a page becomes visible. Google found that this metric was unreliable and has since removed it from some of its reporting tools.
First Input Delay 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 how quickly a person can first click on the screen and make something happen. According to Google's guidelines, a 'good' FID is 100 milliseconds or less.
For an example of FID, suppose Alan visits a webpage titled "How to polish your shoes." He sees a carousel of photos of shoe polish 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.
Note that FID is a “field metric,” or something that is measured based on observation of real users rather than hypothetically or in a “lab.”
Some “lab metric” alternatives include Total Blocking Time (TBT) and Time to Interactive (TTI). TBT measures the time that elapses between First Contentful Paint (FCP) and TTI. FCP measures the time between when loading begins and when items load on the user’s screen. Like its name suggests, TTI measures the time it takes for items to appear to have been loaded and when a user is actually able to interact with them.
CLS measures how much a webpage "jumps around" as it loads. Specifically, it measures the largest "burst" of shifts in the page's layout. Google’s guidelines say that a ‘good’ CLS measurement is equal to or less than 0.1.
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.
Google calculates CLS scores with the following equation:
impact fraction * distance fraction = layout shift score
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.
There are many tools that can be used to check CWVs. The following are all offerings directly from Google:
While CWVs are the metrics Google has told SEO practitioners they should prioritize, they are not the only web vitals that exist. 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.)
Cloudflare offers a variety of services that can help boost CWVs:
Learning Center Navigation