In this blog post we're going to review what Core Web Vitals are, and why you should care. In May 2020, Google announced that it will begin incorporating a website user experience into its search engine algorithm. That means that websites that are more friendly to users will rank higher than web sites that are difficult to use.

As a result, the Google PageSpeed insights tool got a couple new metrics like Largest Contentful Paint, and Cumulative Layout Shift, both of which attempt to quantify user experience. The Google Webmaster console also got a Core Web Vitals section. If your website fails the Core Web Vitals assessment, Google PageSpeed will let you know by stating:

Over the last 30 days, field data shows that this page does not pass the Core Web Vitals assessment.

Because this is a fairly new development that wasn't well publicized, many consumers are left wondering what Core Web Vitals are and whether they should care about it.

What are Core Web Vitals?

Core Web Vitals are part of a larger initiative by Google titled Web Vitals. Web Vitals offer essential metrics for a healthy website. They are a collection of measurements that quantify user experience. By quantifying the user experience of your website, or assigning a number to it, you can easily diagnose issues and improve upon them.

The end goal of the Web Vitals initiative is to provide unified guidance for quality signals. By providing developers (and owners alike) quantifiable data that offers insight into the user experience of a website, sites as a whole will begin focusing more on this aspect of development, and end users will begin to benefit from easier to use experiences.

At the same time, Web Vitals are designed to be easy to understand, easy to diagnose, and easy to improve.

The Core Web Vitals are a collection of metrics that give you focused insight into the user experience of your website. There are three Core Web Vitals that are easy to understand and improve upon. These three vitals help you measure the loading time of your website, the interactivity of your website and the visual stability of your website. Let's go over each individual Core Web Vital metric, discuss what it represents, the scoring behind it, and how you can improve upon each one.

Largest Contentful Paint

The first Core Web Vital is Largest Contentful Paint. If you score below a 2.5 seconds, you're good to go, and if you score above 2.5 seconds you need to focus on improving this metric. Largest Contentful Paint measures how long it takes the largest content element on your website to load. We published a blog article that goes into depth about how this is measured, what causes the score, and how you can improve upon it here.

To summarize that blog article, the largest content element on your website is typically a featured image, or a large block of text (It literally refers to the largest element of content). Ensuring that that largest content element loads within 2.5 seconds will result in a good score for this metric.

Typically, the largest content element is a image or block of text. Efficiently encoding images bye resizing, compressing, and serving in next Gen formats will certainly improve the LCP if it is measuring the loading time of an image. If your largest content element is text, focusing on the font behind the text will increase your score. For example, if you don't preload your fan, you can typically shave off at least a second of loading time by adding a rel=preload tag.

You can learn how to do that by reading this article: https://isotropic.co/how-to-preload-elementor-fonts/

This is an interesting metric in that it changes depending on the page. For example, on your homepage the largest content element maybe a header. However, on a blog page, your largest content element may be a featured image. Ensuring that all your pages are optimized to load as fast as possible will result in a higher average Largest Contentful Paint for the website. Again, you want to be scoring below 2.5 seconds.

Again, we published a full blog post on what Largest Contentful Paint measures and how you can improve upon it here. We recommend you read it if you are failing the LCP metric (scoring over a 4.0 seconds).

First Input Delay

The second Core Web Vital is called First Input Delay. The First Input Delay metric measures the interactivity of a page.

This web vital is fairly easy to understand, because it measures exactly what it named suggests: the time it takes from when a user first interacts with the page to the time when the browser can respond to that interaction. A user interaction with the page will vary, but the most common interactions are button clicks, link clicks, or JavaScript actions.

The timer begins to tick what's a user makes an interaction with the page. The timer stops as soon as the browser responds to that interaction. As one would expect, this is measured in milliseconds as it is a quick occurrence.

Officially, this is designed to measure the first impression that your visitor will have regarding the speed of your website.

First Input Delay is another page specific measurement. It's also user specific, as the behavior will change between visitors. For example, a visitor may click on a link as their first input, while another might click on a button as their first input.

This is a much more technical measurement, but your website will typically pass if you're on good hosting, you reduce the impact of 3rd party code, remove render blocking resources, and reduced JavaScript execution time.

Cumulative Layout Shift

The final Core Web Vital is called Cumulative Layout Shift. Cumulative Layout Shift is the summation of all of the layout shifts that occur on a page throughout its lifespan.

When you load a webpage, content might be displaced by slower loading elements. For example, if you have a blog post with a slow loading image in the middle of it, once the image loads into the content it will push the text of the blog post (which is loaded quicker because less data transfers required) up and down the page.

If your user is reading your blog post, and the content is suddenly displaced by a slow loading image, this results in a bad experience because your reader will most likely lose their place in your article.

What we just described is an individual layout shift. These individual layout shifts typically occur because of slow loading content like images, advertisements, or iframes, that displace content that has loaded quickly (typically text and buttons).

There are good layout shifts and their bad layout shifts. Good layout shifts are caused by a direct user interaction. For example, if somebody clicks on a button which results in some element loading from the top which pushes the blog content down, this good layout shift would not be counted because it was triggered by a user.

However, if you have a slow loading advertisement that pushes content down without user interaction, this is calculated as a bad layout shift, and incorporated into your Cumulative Layout Shift score.

The CLS takes all layout shifts, adds them together, and spits them out as your score. Scoring under a 0.1 is good, and anything over a 0.25 is a failing grade.

Because CLS can be caused by multiple types of elements, diagnosing and fixing the issue isn't always simple. Begin by including size attributes on your videos and images (this ensures that there is a place for an image to load into, so even if it is slow to load, it won't push preloaded content out of the way). also, never insert content above existing content, unless it is in response to a user interaction.

We wrote a complete blog post on Cumulative Layout Shift, what it is, and how to improve your metric which you can read here:

https://isotropic.co/what-exactly-is-cumulative-layout-shift/

Conclusion

This article should have given you a good introduction to what Core Web Vitals are. In summary, the three Core Web Vitals are First Input Delay, Cumulative Layout Shift, and Largest Contentful Paint. Each of these metrics are specifically designed to help everyday users and developers quantified the user experience of a website.

Google will begin incorporating these Web Vitals into their search engine ranking algorithm in the coming few months, so understanding what Core Web Vitals are, and how to improve upon them it's quickly becoming a necessity.

The seriousness of Core Web Vitals can be understood by the placement that Google has given it in their products. In the Search Engine Webmasters console, Core Web Vitals has its own section on the default dashboard. On the Google PageSpeed report, you are alerted to your Core Web Vital status (if you're passing or failing) in the space directly below your performance score.

We hope that this article help you understand what Core Web Vitals are, how to improve them, and pointed you in the direction of additional resources that you can use to make your website better, faster, and rank higher.