What Are Core Web Vitals? A Guide for Website Owners

In 2020, Google rolled out new ranking factors to help site owners improve user experience. They called this update Core Web Vitals, but it didn’t become an official ranking factor until 2021. Regardless, these metrics provide a lot of insight into how users engage with and use web pages.

But, what are Core Web Vitals exactly, and how do they affect your SEO? Learn more about these ranking factors, and get tips to improve your website’s overall page experience below.

Key Takeaways

• Core Web Vitals allow site owners to provide a better user experience by improving page performance.
• CWV metrics include Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
• Optimizing your CWV help maintain or increase your overall search rankings.
• Improve your CWV by optimizing images, videos, fonts, media dimensions, CSS, and JavaScript.

What Are Core Web Vitals?

Core Web Vitals are the metrics Google uses to identify a page’s overall user experience. It includes three user interaction and page speed metrics: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

These page experience metrics relate to responsiveness, page speed, and visual stability. Specifically, they include user experience metrics like page load speed, unexpected page shifts, and pop-ups.

They’re also part of existing page experience metrics, such as mobile-friendliness, safe browsing, security (using HTTPS instead of HTTP), and intrusive pop-ups.

You can check your Core Web Vitals metric in the enhancements section of Google Search Console.

The 3 Core Web Vitals Explained

Learn more about the three specific ranking factors to measure page performance and user experience.

Largest Contentful Paint

LCP refers to the time a page’s main content loads and appears on the screen. Factors that affect the loading experience include large images, visible text, render time, and background video.

This Core Web Vital factor differs from other page speed metrics as it focuses on the time it takes to see the page’s content. You can check your LCP data at Google PageSpeed Insights.

The LCP guidelines provide the following measurements:

• Good: less than or equal to 2.5 seconds
• Needs improvement: greater than 2.5 seconds, but less than or equal to 4 seconds
• Poor: greater than 4 seconds 

To check your LCP data, go to the “Diagnostics” section of PageSpeed Insights. Then, select the LCP tab, which will show LCP-related issues.

If you’re using Chrome DevTools:

• Go to Performance and check “Screenshots”
• Click “Start profiling and reload page”
• See LCP on the timing graph
• Click the node, which is the LCP

First Input Delay

First Input Delay aka FID measures the time it takes before users interact on a page after landing on it. These interactions include clicking on a link, inputting information in a text field, and choosing a menu option. Scrolling and zooming don’t count since it doesn’t elicit a response.

FID is a page speed score. However, Google considers FID necessary to check user engagement since it shows how real people engage with a site.

Elements that affect FID include third-party code, tracking scripts, and JavaScript, among others.

FID often doesn’t show in Search Console, especially for content-heavy pages. However, it’s a crucial metric for signup, login, and other pages where people need to input data immediately.

Here’s how to measure your FID:

• Good: less than or equal to 100 milliseconds 
• Needs improvement: greater than 100 milliseconds but less than or equal to 300 milliseconds 
• Poor: greater than 300 milliseconds

Cumulative Layout Shift

CLS measures unexpected layout shifts on a page. For example, does a button, content, CTA, or any other element on the page change or move as the page loads?

CLS also relates to visual stability. You want page elements to load properly so users don’t click on the wrong links and have difficulty finding images and other elements.

To check your CLS, go to PageSpeed Insights and click “CLS” to see your page’s related issues.

Here’s the criteria for CLS, according to Google:

• Good: less than or equal to 0.1
• Needs improvement: greater than 0.1 but less than or equal to 0.25
• Poor: greater than 0.25

Why Are Core Web Vitals Important?

Google made Core Web Vitals an official ranking factor to improve overall user experience. 

These metrics will make up most of your page experience score, so they’re an essential part of optimization for site owners. If you want to increase your site’s SEO ranking, score, and credibility (and who doesn’t?), you’ll want to pay attention to these metrics. 

However, remember that Core Web Vitals are just one of around 200 factors that Google considers when ranking your website. While it’s important, you’ll want to work on as many factors as possible for the biggest boost to your site’s rankings and experience. 

Nonetheless, checking and optimizing these factors is necessary to keep up with Google’s ever-changing algorithm and maintain a good SEO score.

Tools to Measure Your Core Web Vitals Score

When testing and monitoring data, you want to see actual field data from real users, devices, network conditions, caching, and so on. You’ll also want lab data, so you can repeat the test results using the same conditions from the field data. 

Here are recommended tools to check your CWV field data:

• Chrome User Experience Report
• Google Search Console
• PageSpeed Insights
• web.dev
• Chrome DevTools
• Web-vitals JavaScript Library
• Web Vitals Extension
• Ahrefs Site Audit

Here are the tools you can use for lab tests:

• Lighthouse
• PageSpeed Insights
• Ahrefs Site Audit
• Chrome DevTools
• WebPageTest

Note that the tools for lab data don’t include FID.

How to Improve Core Web Vitals

Learn how to fix or optimize your Core Web Vitals to improve your overall SEO score.

1. Optimize Images

Images contribute significantly to your score, especially for LCP. These include background images, hero images, and in-line images, among others. If you use Google PageSpeed Insights, it will tell you if a large page element is slowing down your LCP.

Some ways to fix or improve your LCP include uploading the correct image sizes and dimensions, compressing image sizes, inputting width and height attributes to image tags, and setting up lazy loading.

Note that lazy loading only allows images to load when people scroll down a page, resulting in a faster LCP.

2. Host Videos

Embedding videos (especially large files) on your site makes the video and the page load slower due to their heavy file size. So, hosting your video improves your page’s loading time, resulting in a better LCP.

Some third-party hosting sites you can use include YouTube and Vimeo. These platforms will help you reduce your server’s bandwidth and provide users with high-quality videos that load faster.

You can also try lazy loading videos to ensure they load only when clicked to reduce their loading time at the initial page load.

3. Simplify Fonts

Avoid using several variations of fonts to improve your page speed. Instead, using a maximum of eight custom fonts on your site is recommended, including variations in font weights, families, and even italic font versions.

Preload necessary font assets on a page to make your browser load them immediately. Consider storing fonts locally to reduce DNS lookups and HTTP requests.

4. Set Media Dimensions

If you don’t set specific dimensions for your images, videos, GIFs, and other media, it can cause an unexpected layout shift and affect your CLS score. Plus, it’ll annoy users and cause them to leave your page.

To have consistent media dimensions, predetermine the width and height you need for all your images, videos, and more. It prevents the page layout from shifting after loading and informs your user’s browser how much space an ad or media element will take up.

5. Avoid Third-Party Tracking Scripts

Are you using any third-party tracking scripts? If they’re irrelevant to your business or marketing goals, consider removing them to improve your page speed. Even third-party scripts like Google Analytics and heatmaps can negatively affect your FID. 

Check your Google Tag Manager, look at your current tracking scripts, and remove unnecessary ones.

6. Reduce CSS and JavaScript

The amount of time it takes a page to load depends on large CSS and JavaScript. You can optimize them by minimizing or combining code markup and script files.

Also, remove or defer CSS and JavaScript code on pages when they’re not needed. Use the browser cache for faster page loading. Minifying your code will improve your site’s speed and accessibility, resulting in a better user experience.

Final Thoughts

Think of Core Web Vitals as a health checkup for your website. If you regularly monitor these metrics, you can improve and maintain the overall page experience and your search engine rankings. 

Now that you understand what Core Web Vitals are and why they matter, you can put a plan in place to check each metric and implement any necessary fixes.