Learn about the three Core Web Vitals: LCP, FID & CLS

Some time ago, Google caused quite a stir by announcing a new ranking factor for 2021: page experience. User experience has always been an essential part of building the best site out there, but now, it will play an even bigger role in helping you build awesome sites for your customers. All this is powered by new metrics, with at the centre: the Core Web Vitals. Time to meet LCP, FID and CLS!

Table of contents

The Google page experience update powered by Web Vitals

We’ve talked about this page experience update before, but in this post, we’d like to take another look at those Core Web Vitals. In general, site speed metrics tend to be hard to understand and confusing. Plus, they tend to change somewhat each time you test your site. You don’t always get the same scores. So, it’s easy to say that you just have to look at some metrics in the hope they turn green. 

Of all the possible metrics, Google now identifies three so-called Core Web Vitals. These are the focal point for Google in the coming year. Every year, Google might add or change these metrics as they evaluate these over a longer period of time. 

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.


The three pillars of page experience

For now, the three pillars of page experience are:

  • Loading performance (how fast does stuff appear on screen?)
  • Responsiveness (how fast does the page react to user input?)
  • Visual stability (does stuff move around on screen while loading?)

To measure these essential aspects of user experience, Google chose three corresponding metrics — aka the Core Web Vitals:

  • LCP, Largest Contentful Paint: This measures how long it takes for the largest piece of content to appear on the screen. This could be an image or a block of text. A good grade gives users the feeling that the site loads fast. A slow site can lead to frustration.
  • FIS, or First Input Delay: This measures how long it takes for the site to react to the first interaction by a user. This could be a tap on a button, for instance. A good grade here gives the user a sense that a site is quick to react to input and, therefore, responsive. Slow, again, leads to frustration.
  • CLS, or Cumulative Layout Shift: This measures the visual stability of your site. In other words, does stuff move around on screen while it is loading — and how often does that happen? Nothing more frustrating than trying to click a button when a slow-loading ad appears in that spot.

Different tools use different metrics

Every page experience tool uses a number of Web Vitals, gathered from a variety of sources. As every tool has a different purpose, the metrics used differ per tool. The common denominator, however, are the Core Web Vitals as Google uses these in every page experience tool it has.

But what do all these numbers mean? What do you have to look for on your site? And when is your site fast enough? When do I have a good grade? There are a million questions you could ask about this metrics. And while Google is trying to close the gap between understanding and improving, this continues to be a complex topic. Measuring site speed and user experience is hard — there are so many things to factor in.

What are these Core Web Vitals?

The Core Web Vitals don’t work in isolation, as there are a whole lot of other metrics. Some are based on controlled lab tests, while others are metrics that only work with field data. After doing a lot of research, Google determined a new set called Web Vitals. These are a combination of metrics we already know, plus a set of new ones. The three Core Web Vitals are the most important ones and Google is specifically asking site owners to keep an eye on these scores and improve them where you can.

LCP: Largest Contentful Paint

Largest Contentful Paint measures the point at which the largest content element appears on the screen. Keep in mind that it doesn’t measure the time it takes for your page to fully load, but it simply looks at when the most important part loads.

If you have a simple web page with just a piece of text and a large image, that large image will be considered the LCP. Since this is the largest piece of content to load in the browser, it’s destined to make an impression. By getting that to load quicker, your site can appear much faster. So, sometimes, it might just be as simple as optimizing that image itself. 

In the past, there were metrics like First Meaningful Content, which measured time when the first piece of content appeared on screen that meant something to the user. But, unlike the name suggests, the FMC metric often couldn’t figure out what was the most meaningful thing that appeared on screen. Complex metrics lead to useless data.

Largest Contentful Paint is easy to understand: it is simply the time it takes for the largest element to appear on the screen. These elements might include images, videos or other types of content. 

What you need to know

Now you know what the LCP is you can start optimizing for it. According to Google, you should aim for the LCP to happen within the first 2.5 seconds of the page loading. Everything under 4 seconds needs improvement and you can consider everything over that as performing poorly. 

An overview of the scoring for LCP

The LCP is also dynamic, as the first thing that loads might not immediately be that large image. The LCP shifts to that large image when that appears on screen. 

Here’s an image from Google that explains how the works:

This image from Google gives you a good idea of how the LCP is measured

On the left, you first see the logo and ‘Visual stories’ line appear. In the second screen, the large headline appears as a candidate for LCP. In the last screen, however, you see that big image overtakes the header as LCP. If you have just one big piece of content, that might be the LCP the whole time.

If you look at the loading process in the image, you can easily see why this is such a handy metric. You can easily spot what the LCP is and optimize the loading of that element. 

Google offers several tools to help you find all these elements. PageSpeed Insights, for instance, offers a wealth of data on Web Vitals, plus a whole lot of advice to improve your page. If we run yoast.com on PageSpeed Insights, we get a number of scores and below that score, advice. In our case, the LCP was average and that’s due to it being a large image. In the screenshot below, you can see that PageSpeed Insights correctly identified that element. Now you now what to improve!

PageSpeed Insights identifies the large header image as the LCP on on our site

According to Google, the LCP is affected by a number of factors: 

  • slow server response times: so optimize your server, use a CDN, cache assets, et cetera.
  • render-blocking JavaScript and CSS: so minify your CSS, defer non-critical CSS and inline critical CSS.
  • slow-loading resources: so optimize your images, preload resources, compress text files, et cetera.
  • issues on client-side rendering: so minimize critical JavaScript, use server-side rendering and pre-rendering. 

Google has more documentation on the background of LCP and how to optimize for it.

FID: First Input Delay

The First Input Delay measure the time it takes for the browser to respond to the first interaction by the user. The faster the browser reacts, the more responsive the page will appear. If you are looking to offer your users a positive experience — who isn’t? —, then you should work on the responsiveness of your pages. 

Delays happen when the browser is still doing other work in the background. So, it has loaded the page and everything looks dandy. But when you tap that button, nothing happens! That’s a bad experience and it leads to frustration. Even if there’s just a small delay it might make your site feel sluggish and unresponsive.

A browser has to do a lot of work and sometimes it needs to park certain requests, only to come back later to them. It can’t do everything all at once. As we’re building ever more complex sites — often powered by JavaScript — we’re asking a lot from browsers. To speed up the process between getting content on screen and making it interactive, we need to focus on the FID. 

The FID measures all interaction that happen during the loading of the page. These are input actions like taps, clicks and keypresses, but not interactions like zooming and scrolling. Google’s new metrics call for an FID of less than 100ms to appear responsive. Anything between 100ms and 300ms needs improvement and you can view anything above that as performing poorly.

After testing the FID you get a score and you can work from there

What you need to know

One of the things you need to remember is that you cannot measure the FID if there is no user interaction. This means that Google can’t simply predict the FID based on the data they have from the lab — they need data from real users, or so-called field data. This also means that this data is less controllable as lab data as it collects data from users will all kinds of devices and who uses in different ways and environments. This is one of the reasons why you sometimes see data change.

If you are looking to improve your scores, you will often find JavaScript to be the culprit of bad grades. JavaScript helps us build awesome interactions, but it can also lead to slow websites with complex code. Often, the browser cannot respond to input while it is executing JavaScript. If you work on improving your JavaScript code and the handling of it, you are automatically working on improving your page experience scores.

This is the hardest part, though. Most sites can gain a lot by reducing the time it takes to execute JavaScript, breaking up complex tasks or removing unused JavaScript.

For instance, yoast.com has a pretty good score but it’s not perfect. There are still processes that prohibit us from getting perfect scores. Some of these are complicated to fix or we simply need this code for our site to function properly. You should look at your scores and determine what you can do. Try to find the improvements that are easiest to do or result in the biggest performance jumps.

There are always improvements to make, but you have to decide if that’s worth it — or even possible

Read Google’s documentation on FID and how to optimize FID.

CLS: Cumulative Layout Shift

The third Core Web Vital is a brand-new one: Cumulative Layout Shift. This metric tries to determine how ‘stable’ stuff loads onto your screen. It looks at how often stuff jumps around while loading and by how much. You can imagine that sometimes a button loads on the screen, inviting users to click it. In the background, however, there’s still a large content area being loaded. The result? When the content finally fully loads, the button pushes down a bit — just as you want to hit that button. Again, frustration mounts!

These layout shifts happen a lot with ads. Now, ads are a lifeline for many sites, but these are often loaded so poorly that they frustrate users. In addition, many complex sites have so much going on that these are heavy to load and content gets loaded whenever it’s ready. This can also result in content or CTAs that jumps around on screen, making room for slower loading content. 

Take CNN.com, for instance. News websites are typically very complex and slow to load, and CNN is no exception. It scores really badly on a PageSpeed Insights test. If you look at the issues and the corresponding tips further down the page, you’ll notice that no less than five moving elements were found at the time of writing. When loading this page, it leads to a lot of elements jumping around, and it takes a while for it to stabilize and be useful. And because users aren’t always that patient, they try to click a button at the moment it appears on screen — only to miss it because a big ad appears in that spot.

CNN.com doesn’t score too well in PageSpeed Insights. You can see it found five moving elements that contribute to the CLS

What you need to know

The Cumulative Layout Shift compares frames to determine the movement of elements. It takes all the points at which layout shifts happen and calculates the severity of those movements. Google considers anything below 0.1 good, while anything from 0.1 to 0.25 needs work. You can consider everything above 0.25 as poor. 

The scores for CLS

Of course, the score only looks at unexpected shifts. If a user clicks the menu button and a fold-out menu appears, that doesn’t count as a layout shift. But if that button does call a big change in design, you should make sure to keep that clear for the user.

I’ve already mentioned that ads are one of the main culprits of this. They are often in JavaScript and not well-optimized, plus they are served from an external server. Slowness is added in every step and you have to work hard to get your ads to appear in the right spot at a moments notice. But there’s another element that’s responsible for large layout shifts: images.

Developers don’t always specify the width and height of an image in the code and leaving it up to the browser to figure out how the image should appear on screen. On a page with some images and text, the text will appear on screen first, followed by the images. If the developer hasn’t reserved space for these images, the top part of the loading page will be filled with text, prompting the user to start reading. The images, however, load later and appear in the spot where the text was first. This pushes the text down, getting the user agitated. So, always specify the width and height of images in the CSS to reserve a spot for the images to load.

Google has a lot of background documentation on CLS, plus on how to optimize for CLS.

Tools to measure Web Vitals

There are loads of tools to help you monitor Web Vitals and improve the performance of your site. I’ve mentioned a lot of them in the first Page experience post I wrote some time ago. You can see them listed there. Here, I’d like to highlight the most important ones:

  • PageSpeed Insights: PageSpeed Insights has turned into a full-service measuring tool with both field as well as lab data. In addition, you get advice on what to improve.
  • Lighthouse: Google built Lighthouse as a tool to audit PWAs, but now it’s a great tool to monitor performance. It has several audits that PageSpeed Insights doesn’t have and it even has some SEO checks.
  • Search Console Core Web Vitals report: You can now get insights from your site straight from Search Console! Great to get a feel for how your site is performing.

These are the Core Web Vitals

Sometime in 2021, Google will update their algorithms to incorporate a new ranking factor: page experience. To measure page experience, Google developed a new set of metrics called the Web Vitals. Within these Web Vitals, you can find three core metrics: Largest Contentful Paint, First Input Delay and Cumulative Layout Shift. These stand for performance, responsiveness and visual stability — the three pillars of Google’s page experience update.

Keep focusing on your users and build an awesome site!

Read more: 5 ways to boost your Core Web Vitals »

20 Responses to Learn about the three Core Web Vitals: LCP, FID & CLS

  1. Miranda Wouters
    Miranda Wouters  • 4 months ago

    Interesting article, good explanation. I feel like I’m suddenly on top of things :) Is yoast available only for WordPress or is it a stand alone application?

    • Willemien Hallebeek
      Willemien Hallebeek  • 4 months ago

      Hi Miranda, there’s a Magento, Neos and TYPO3 module/extension as well: https://yoast.com/yoast-seo-platforms/. But we don’t offer a stand-alone application. What CMS are you on?

  2. Jatin
    Jatin  • 4 months ago

    I had never heard these terminologies LCP, FID and CLS before. Reading this article i can tell how important it is to keep myself updated. Thank you for sharing the great insight.

    • Willemien Hallebeek
      Willemien Hallebeek  • 4 months ago

      You’re welcome, Jatin. Those terms are probably pretty new to more folks. But their importance will probably grow, so good to stay updated!

  3. Michael Kormendy
    Michael Kormendy  • 4 months ago

    What I would like to know is, what if Google’s Web Vital algorithms measure the page experience and gives me a score of poor — yet the page loads exactly how I and my visitors want that experience to be?

    For example, I am creating a high-impact less-interactive experience, let’s call it a “showcase” experience where I take the user through a timed story of loading content with minimal interaction. From the sounds of it, Google’s algorithm would score me poorly because I have a lengthy largest contentful paint, however that is expected in the experience for the user, because they require highly detailed images that they are navigating through, that I’ve optimized as much as possible.

    Google’s algorithms then end up measuring a poor experience, but in fact it’s apart of the visitor’s desired experience.

    Furthermore, Google uses this measurement in the ranking of my site, and my ranking goes down — all because they think they know how my users should experience the site, vs. how it was designed/developed to, and how the visitors like.

    I’m not sure I’m totally confident in their assessment of what a page should rank as anymore. It reminds me of their AMP project attempt to make all mobile experiences fit into their expectation of what the internet should operate as — just so we can use their search engine.

    • Edwin Toonen

      Hi Michael. Your use case is different and it might also be that your visitors don’t necessarily come from the search results, right? In your case, you do need those awesome interactions as that is part of what you’re offering. Still, it’s a good idea to look at the score you get and see if there is something you can improve — without having to sacrifice the experience.

      Keep in mind that page experience is only one of many things that Google factors in to determine rankings!

  4. Emmanuel Eze
    Emmanuel Eze  • 4 months ago

    Yes, i am always seeing this core web vitals in my google console, i still dont understand what all this ranking factor is all about

    • Willemien Hallebeek
      Willemien Hallebeek  • 4 months ago

      Hey Emmanuel, yes, you can already find the core web vitals in Google Search Console. If you want to get a better understanding of the Page experience ranking factor this post might help you out: https://yoast.com/page-experience-google-ranking-factor/ It’s all about how people experience a web page on your site. How fast does it feel? Are there any parts moving when you thought it was completely loaded, for instance.

  5. Sandeep G
    Sandeep G  • 4 months ago

    Wow…that will actually separate the quality websites from the others. Its a good move and core vitals is already showing in search console. Maybe it requires some data before it can show some results. Thank you Yoast Team for this update.

    • Willemien Hallebeek
      Willemien Hallebeek  • 4 months ago

      You’re welcome, Sandeep!

  6. Portal Educando
    Portal Educando  • 4 months ago

    I have a huge problem with the loading speeding when using Adsense. Is there any chance I can improve that?

  7. Brian
    Brian  • 4 months ago

    I am a web designer and I do okay but I am not a developer. I know about colours and designs and a smattering of CSS and that’s why I use WordPress and a page builder like Divi. So, when I read that I have to pay attention to “render-blocking JavaScript and CSS: so minify your CSS, defer non-critical CSS and inline critical CSS.” I do not have a clue. I think the page builder ‘minifies’ but nobody explains what “non-critical CSS” is or what “inline critical CSS” is and as for render-blocking JavaScript – what is that!! I can optimise an image but the rest of it is pure gobbledygook! Am I alone?

    • Edwin Toonen

      Hi Brian. I understand, I really do! This will never get easy. What Google has done with these new metrics is make the insights easier to get and to understand. The things you can do to fix slow loading sites are always that easy. If only there was a magic plugin to fix stuff like this, as suggested by another commenter on this post. Unfortunately, there isn’t one end-all solution.

      Improving your site takes work, and you’d best chop that work up into tiny pieces. Work on those tiny pieces and you’ll notice your site get better over time.

      And it’s not that you won’t be able to rank if your scores aren’t great. Many big sites score terribly and still do well.

  8. John
    John  • 4 months ago

    Is it safe to say then, simplicity rules? The more things change, the more they stay the same?

    I have a very simple website but full of good content (from what clients tell me). Shouldn’t I focus on content, load time, a clean appearance, and structured layout?

    As I learned from Yoast, holistic SEO is a must.

    Continue the great work, Edwin.

    • Edwin Toonen

      Hi John! You are correct. If your site offers high-quality content aimed at the correct audience and is technically sound, you’re on the right track. Of course, your site’s look and feel should be awesome as well, but for many sites there’s no need to make it extremely complex with a of JavaScript. Keep it simple and focus on your users!

  9. Melissa Gerke
    Melissa Gerke  • 4 months ago

    Hi Edwin,
    I have to admit, it’s incredibly annoying when you go to click on a button and you accidentally click on a slow-loading ad. That alone has put me off many websites.

    Some of these little annoyances in isolation might sound a bit petty, but combine that with slow-loading images, pop-ups and boring content, you have a dud user experience, to put it mildly.


    • Willemien Hallebeek
      Willemien Hallebeek  • 4 months ago

      For sure, Melissa! I think we’ve all been there. Thanks for reading and your comment!

  10. Abana Homes
    Abana Homes  • 4 months ago

    Thanks Edwin for being so detailed.

    You’ve never failed to amuse me.

    Last time I checked, you were writing about LOCAL SEO GUIDE. This piece is truly amazing, too.

    Detailed, Explained and Helpful.

    Just that I have a strong objection here which may or may not agree to it.

    Why do, we, blog owners, have to focus more on the EVER CHANGING RULE being created by Google or the search engines. Is there any stop to this? :-)

    Instead of focusing on the beautiful content piece, that takes weeks to write, edit and publish, now this LCP etc has popped up in the mind.

    Thanks to YOAST for making the SEO writing easier and now your “this article” can help with my woos about the new fish in the market. LCP and FCP.

    There should a plugin for this as well that you install and it fixes everything.

    Cheers, AH

    • Edwin Toonen

      Hi Abana. Thanks for the compliment! Glad you enjoy our content. I understand your frustration, but these are not rules set in stone you should live by. These tools and metrics simply give you insights into how your site appears for users — and for Google.

      Remember, you are not working on your site to offer Google a good experience, because you are working for your users! You should always put users first. All these Google tools simply help pinpoint issues on your site that might harm the way users experience your site. Improving your site should lead to more happy customers, which would in turn lead to happier search engines.

      And yes, I’d would also like to simply hit a button and be done with everything. Unfortunately, that’s not how it works. If you are scared of the amount of work coming your way, break it down into smaller pieces. Work on those pieces and you’ll see your site improve in leaps and bounds.

      Don’t forget, a fantastic site is nothing without awesome content targeted at the right user.

      Good luck!

      • Maddy Bingham
        Maddy Bingham  • 4 months ago

        Overall, great article! Super informative.
        I just noticed some typos though:
        FIS, or First Input Delay: This measure how long it takes for the site to react to the first interaction by a user. – This should say “measures”
        CLS, or Content Layout Shift: This measure the visual stability of your site. – This should also say “measures”
        And under LCP: Here’s an image from Google that explains how the works: The should say “that” or “it” or “the LCP.”
        Hope this helps!