Core Web Vitals are equivalent to three measuring sticks for websites. They look at how quickly a page loads, how easy it is to engage with, and how stable it appears when in use. These factors are critical for ensuring that your website appears prominently in search results. When you improve these aspects, users will be more satisfied with your site, and search engines may rank it higher.
In short, Core Web Vitals are a subset of factors that will be part of Google’s “page experience” score (basically, Google’s way of sizing up your page’s overall UX).
The three Core Web Vitals are:
- Largest Contentful Paint (LCP): This metric determines how rapidly the largest element on a webpage loads, such as a large image or video. It’s great if this happens in less than 2.5 seconds so that people have a smooth experience.
- First Input Delay (FID): This metric indicates how quickly a webpage replies when you click or tap on something for the first time. It’s great if the reaction time is less than 100 milliseconds so that users don’t think the page is slow to react.
- Cumulative Layout Shift (CLS): This determines whether the layout of a webpage moves unexpectedly while it is loaded. This change should be smaller than 0.1 to avoid confusing users.
There is a fourth metric called Interaction to Next Paint (INP) that Google has announced will replace FID as part of the Core Web Vitals in March 2024. INP should be 200 milliseconds or less for a fast and responsive experience.
You can find your site’s Core Web Vitals data in the “enhancements” section of your Google Search Console account.
Why Are Core Web Vitals Important For Your Web Ranking?
Google plans to make page experience an official Google ranking factor.
Google looks at a bunch of things to decide if a webpage gives users a good experience. These include things like having a secure connection (HTTPS), being easy to use on mobile devices, not showing annoying pop-up ads, and making sure there’s no harmful software on the page.
Among these factors, Core Web Vitals like how fast the page loads and how stable it is, will be really important. They’ll probably count the most toward your overall score for how good your page experience is.
But having a great score doesn’t guarantee you’ll be at the top of Google’s search results. Google uses lots of other factors too, around 200 in total, to decide which pages show up first.
1. Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) determines how rapidly a webpage appears for a user after clicking on a link. It’s not only about any aspect of the page loading process; it’s about seeing the majority of the content on screen.
Unlike some other speed metrics, such as Time to First Byte (TTFB) or First Contextual Paint, LCP focuses on what is important to users: the ability to see and use the website.
You can use Google PageSpeed Insights to determine your LCP score. If you have a low LCP score, you should work to improve it. However, it’s not that easy to improve LCP. You may need to remove photos or clean up the coding on your page.
It’s hard work, but it’s worth it. Here are some things you can do to make your LCP better:
- Get rid of any unnecessary third-party scripts. Research shows that each of these can slow down a page by 34 milliseconds.
- Consider upgrading your web hosting for faster overall load times, including LCP.
- Use lazy loading for images. This means they’ll only load when someone scrolls down, making your LCP much faster.
- Remove any large elements on your page that might be slowing things down, as highlighted by Google PageSpeed Insights.
- Minimize your CSS files, as bulky CSS can slow down your LCP times.
2. First Input Delay (FID)
Now, let’s talk about Google’s second Core Web Vital: First Input Delay (FID).
Once your page has achieved First Contentful Paint (FCP), the big question is: can users interact with it?
That’s where FID comes in. It measures how long it takes for a user to do something on your page.
Interactions could be things like:
- Choosing an option from a menu
- Clicking on a link in the site’s navigation
- Entering your email into a field
- Opening up “accordion text” on mobile devices
Google thinks FID is important because it reflects how real users interact with websites.
Just like with FCP, Google has specific standards for what’s considered an acceptable FID.
Now, technically, FID measures the time it takes for something to happen on a page. So it’s a kind of page speed score. But it goes beyond just loading time and looks at how long it takes for users to do something on your page.
For a page that’s mainly content, like a blog post or news article, FID might not be a big deal. The only real interaction might be scrolling or zooming in and out.
3. Cumulative Layout Shift (CLS)
Let’s look at Cumulative Layout Shift (CLS), which assesses how steady a website is while loading, commonly known as “visual stability.”
Simply put, if elements on your page move around while it loads, you have a high CLS, which is undesirable. Ideally, you want the items on your page to remain somewhat stable as it loads. This saves users from having to re-learn where things are or mistakenly clicking on the wrong thing once the page has fully loaded.
Google has particular guidelines for what constitutes a strong CLS score:
As you can see, this is something I need to work on, particularly on mobile.
As you can see, this is something that I need to work on. Especially on mobile.
Here are some easy things you can do to reduce CLS:
- Use set size attributes for media like videos, images, GIFs, and infographics. This tells the browser exactly how much space those elements will take up, so it doesn’t change as the page loads.
- Make sure ad elements have a set space reserved for them. Otherwise, they might suddenly appear on the page and push other content around.
- Put new UI elements below the part of the page that’s visible when you first load it. That way, they won’t push down content that users expect to stay where it is.
Interaction to Next Paint (INP)
INP measures the time it takes for the browser to respond to a user’s next interaction with a page, such as a click or a tap after the page has finished loading. This metric is similar to FID, but it focuses on the responsiveness of the page after it has initially loaded.
To improve INP, reduce JavaScript execution time, minimize third-party scripts, use a content delivery network (CDN), optimize image sizes, and use browser caching.