Core Web Vitals for SEO: What Are They and How to Improve Them

On May 2020, Core Web Vitals went live.

The day marked a change in Google’s ranking systems because, traditionally, Google focused on relevance and search intent.

Core Web Vitals, on the other hand, are all about how a user interacts with that content.

Although relevance is still the most important ranking factor, a Core Web Vitals optimized page will have an advantage in search results.

In this post, we’ll explain what Core Web Vitals are and how to optimize your site for Google’s user metrics.

What are Core Web Vitals?

Core Web Vitals are a component of Google’s initiative to improve the overall user experience on the web. They are a set of user experience metrics that measure a website’s speed, responsiveness, and visual stability. Improving Core Web Vitals can help your site rank higher in search results, and on top of that, they are a minor ranking signal.

Through user testing, Google found there are three main elements that directly affect user experience:

• How fast a page loads
• How responsive a page is
• How stable a page is

And that’s why Google created Core Web Vitals, to measure these elements of user experience through metrics known as:

Largest Contentful Paint (LCP):

LCP measures how long it takes for the main content of a web page to load. The first point a user is able to interact with a page is when the main content is loaded. To provide a good user experience, LCP should be within 2.5 seconds from when the page starts loading.

First Input Delay (FID):

FID is a metric designed to represent how a user experiences how responsive a page is. It measures the time it takes for a web page to become interactive. It assesses the delay between a user’s first interaction (such as clicking a button) and the browser’s response. For a good user experience FID should be 100 milliseconds or less.

Interaction to Next Paint (INP):

Scheduled to go live in March 2024, INP is to replace FID as the page responsiveness metric. INP is a better metric than FID, as, unlike FID, INP is not limited to the first time a user interacts with a page. Instead, it measures all interactions throughout the life of the page.

Cumulative Layout Shift (CLS):

CLS measures the visual stability of a page, quantifying the number of unexpected layout shifts that users see. . A low CLS score indicates that the content remains stable during loading and interaction, preventing unexpected jumps or shifts. For a good user experience, CLS should be 0.1 or less.

Why are Core Web Vitals important?

Core Web Vitals are important as they align with Google’s business goals. Google, as a search engine, makes revenue from selling search ads. If users have a bad user experience when using the platform, they might make fewer searches in the future; fewer searches mean fewer search ads. Page experience metrics were added to Google’s ranking systems to address this.

Initially, Google’s Page Experience metrics included:

• Mobile-friendliness
• Safe browsing
• HTTPS security
• The presence of intrusive ads

But after extensive user research, Google discovered site speed to be a key part of user experience.

During their research, they discovered that if search results pages were slowed by 100 to 400 milliseconds, Google saw its users make between 0.2% to 0.6% fewer searches during the first three weeks of the experiment. As the experiment progressed, subjects began to make progressively fewer searches.

And as we said before, fewer searches = a lower market share for the search engine.

And that, my friends, is why Core Web Vitals were added to Google’s algorithms in 2020, and why they are so important for SEOs to consider as quality signals today.

Understanding the data

There are two types of data for Google’s Core Web Vitals:

1. Field data
2. Lab test data

Understanding this will help you understand how your diagnostic tools work.

Field data

Field data comes from a data set called Chrome User Experience Report (CrUX.) It’s generated by tracking Chrome users to understand how real-world users experience the web, and collected over a 28-day period.

In a perfect world, you should focus on field data. This is because it is data that’s generated from actual users – but sadly, it’s not so simple. Field data isn’t available for all sites. What’s more, since field data is only collected every 28 days, you’ll have to wait 28 days to see the impact of your optimizations.

Lab test data

Lab test data is collected artificially in a test environment. It doesn’t come from real-world users but comes from a single device with a predefined location and network connection.

Unlike field data, lab data doesn’t have a 28-day collection period. This means when you optimize your pages, you can see the effects immediately by running new tests. It has a distinct disadvantage, though, as lab tests are designed only to simulate real-world users. By definition, these metrics are always limited as they can’t possibly take every real-world factor into account.

How to measure Core Web Vitals

There are a number of ways to measure your site’s Core Web Vitals, and for an in-depth analysis, it’s worthwhile using a combination of tools.

Here are the 4 main tools you can use:

1. Google Search Console

Looking at Google Search Console is a must. Other tools only enable you to analyze single pages, whereas Google Search Console allows you to see your metrics for your entire site. This helps you to prioritize the pages that need the most attention.

Find your Core Web Vitals report — for both mobile and desktop — in the Page Experience section of your Google Search Console account.

Knowing which pages are poor or need to be improved is one thing, but what you really want to know is what’s causing the issues and how to fix them.

If you scroll down, you can dig into your different pages to see what needs to be fixed.

2. Google PageSpeed Insights

PageSpeed Insights will give you a full Core Web Vitals analysis and breakdown of different issues that are affecting your page speed. It’s broken down into two reports. The first one is directly based on field data, which gives you how actual users interact with your page.

If you scroll down, you’ll see another report based on lab data from Lighthouse (another Google tool we’ll demonstrate shortly), that’s divided into four sections:

1. Performance
2. Accessibility
3. Best Practices
4. SEO

Each section gives you a detailed breakdown of what the issues are and how to fix them.

3. Lighthouse

Lighthouse is a Google tool that allows you to see the performance of any website, using lab data exclusively. For example, you can use it to see how long pages take to load.

You can find Lighthouse by going to Chrome Dev Tools and heading over to the Lighthouse tab.

If you click it, you’ll see an option to generate a Lighthouse report. Choose the areas you want Lighthouse to analyze including:

• Performance: This measures various aspects related to the loading and runtime performance of your web page. This is where you can find Core Web Vitals metrics and more.
• Accessibility: This measures how well a page is accessible to a user with disabilities. This audit evaluates elements like alt text and buttons to establish if all users can understand them.
• Best practices: This measures if a web page adheres to a set of web development best practices and industry standards. It assesses various aspects related to security, performance, and other practices that contribute to a well-optimized and secure website.
• Technical SEO: This measures how well a web page is optimized for search engines. It assesses various technical factors that impact a page’s visibility and ranking on search engine result pages.
• Progressive Web Apps: Use this to see if your web app adheres to user experience best practices designed to deliver enhanced capabilities.

Although Lighthouse can help you improve your Core Web Vitals metrics, it’s a robust tool that gives you insight into many aspects of your page’s user experience.

4. Web Vitals Chrome extension

The Web Vitals Chrome extension allows you to see Core Web Vitals metrics for any site you are on.

All you have to do is navigate to the site you want and click on the extension to analyze the metrics.

This will save you time if you just want a quick look at the page speed metrics for a specific page and you don’t want to navigate to a different tool.

How to improve your Core Web Vitals

There are three steps to improving your Core Web Vitals:

1. Optimize your Largest Contentful Paint (LCP)

Users simply don’t want to wait around for a slow page to load. They’d rather interact with the page as soon as possible, and they can only do that once the largest content element has fully loaded.

LCP measures the time it takes for the largest content element – like an image or text block  – to fully render on a web page.

If the webpage loads quickly, but the main image takes a while to appear, the LCP is delayed. If the essential content loads promptly, you’ve got yourself a fast LCP, improving your overall user experience.

Your target is to get your LCP to be under 2.5 seconds. But sometimes it isn’t always that easy…

Here are the most common causes of LCP issues:

• Large images or media files
• Slow server response time
• Render-blocking resources
• Slow resource load times
• Client-side rendering (CSR)

How to optimize LCP on your site

Steps to optimize LCP:

• Prioritize the loading of resources

Identify and prioritize the loading of critical resources, such as the main content, images, and stylesheets, making sure these resources are loaded early in the page lifecycle.

• Optimize and compress images

To optimize images for faster loading, use modern image formats like WebP and compress images without compromising quality.

• Serve files on servers physically close to your users

You can serve files on servers physically closer to your users by using a Content Delivery Network (CDN.) These services cache and distribute your website’s static assets across multiple servers worldwide, ensuring that your users receive content from a server that is geographically close to them.

• Host resources on the same server

When you host your static assets on the same web server that hosts your HTML content, you reduce the time it takes for a browser to fetch and render your pages. You can do this by storing all of your static assets on the same domain as your main website.

• Use caching

Caching your website elements can improve your LCP by reducing the load time of your resources. This means that when users revisit your site, instead of building your pages from scratch, elements will be fetched from your cache.

If you want to take a deep dive into how to optimize your LCP, check out Google’s LCP guide.

3. Optimize your First Input Delay (FID) and Interaction to Next Paint (INP)

As mentioned earlier, FID and IND measure the responsiveness of a page – but in March 2024, INP will be fully replacing FID as it considers all user inputs, rather than just the first one.

Even when a webpage loads quickly, if there’s a delay between the user clicking a button and the browser responding, the FID or INP is slow. Whereas, a fast response ensures a quicker and more seamless user experience.

Your input delay goal? For FID, your first interaction should be under 100 milliseconds. For INP, your goal is to be under 200 milliseconds.

Some of the common causes that get in the way of this goal include:

• Heavy JavaScript execution
• Long-running tasks
• Render-blocking resources
• JavaScript execution on the main thread
• Third-party scripts

To deal with slow browser response times, you should:

Minimize JavaScript execution

You can decrease load times and enhance your site’s responsiveness by reducing the amount of JavaScript code running on your site.

Defer non-essential JavaScript

Deferring non-essential JavaScript means delaying the execution of JavaScript that is not immediately needed for the initial rendering of your webpage. By deferring these scripts, you allow critical elements of the page to load and become interactive more quickly, which improves user experience.

Break up long tasks

Prevent the blocking of the main thread for extended periods by breaking up long JavaScript tasks into smaller, more manageable pieces. This will improve both the responsiveness of your web page and boost your user experience.

Use Web Workers

Web Workers execute JavaScript code in the background, separate from the main thread. It enables parallel processing, allowing tasks to run concurrently without blocking the user interface or the main thread of the web page.

Use prerendering or server-side rendering (SSR)

Prerendering or server-side rendering (SSR) involves generating HTML content on the server side before it is sent to the client’s browser. This is in contrast to traditional client-side rendering (CSR), where the browser receives raw data and relies on JavaScript to render the content.

If you want to take a deep dive into FID, check out Google’s guide to FID.

4. Optimize your Cumulative Layout Shift (CLS)

CLS looks at how visually stable your webpage is by measuring unexpected layout shifts during page load by measuring the distance the page elements have shifted.

A layout shift occurs if an ad loads and content is pushed down unexpectedly. You can use Google PageSpeed Insights to get a full diagnostics report and start minimizing such shifts to optimize CLS – this will provide users with a more visually consistent and pleasant browsing experience.

When it comes to optimization, your goal is to have a CLS of less than 0.1.

Here are some of the most common causes of CLS issues:

• Images without dimensions
• Ads, embeds, and iframes without dimensions
• Dynamically injected content such as ads, embeds, and iframes without dimensions
• Web fonts

And here are 3 ways to resolve those issues and make sure your website is CLS-optimized:

• Add dimensions to elements

When it comes to images without dimensions, you can easily add them to your HTML.

Here’s an example of HTML code that you can use:

<img src=”example.jpg” alt=”Description” width=”500″ height=”300″>

Alternatively, you can use CSS to set the dimensions of the images. However, it’s preferable to include the dimensions directly in the HTML for faster rendering.

<style>

.image-container img {

width: 500px;

height: 300px;

}

</style>

<div class=”image-container”>

<img src=”example.jpg” alt=”Description”>

</div>

•  Reserve space for images, videos, and iframes

If you display ads on your site, you can (and should) create a static element that reserves space for them.

As you can see below, bbc.com has added a placeholder element that is replaced with an ad when the page is completely rendered.

If you want to take a deep dive into CLS optimization, check out Google’s CLS guide.

• Preload fonts

Another way to prevent layout shifts and keep your web page optimized is to preload fonts. This will cause the browser to load them when the page’s primary content is displayed.

<link rel=”preload” href=”your-font.woff2″ as=”font” type=”font/woff2″ crossorigin=”anonymous”>

Track your campaigns

Once you’ve optimized your site for Core Web Vitals, it’s crucial to understand the impact your optimizations have made. This means tracking your campaigns before you start your optimizations.

You can easily see this in the Similarweb Rank Tracker.

Let’s start with the big picture: if you have optimized a large percentage of your site, you can look at your site-wide metrics to see how they’ve improved over time.

But you can track on a more granular scale, too. For example, if you’ve segmented your site with Keyword Tags, you can check the performance of that specific section:

And you can see how your optimizations affect pages by looking at the Pages report:

Core Web Vitals: More than just higher rankings

Optimizing your Core Web Vitals could help your site in more than one way. Firstly, we’ve seen that Core Web Vitals is considered a ranking factor, and improving your metrics may improve your rankings.

Secondly, Core Web Vitals and user metrics, in general, are not just ranking factors. The more seamless your user experience, the better your site will convert.

And because user metrics could affect both rankings and conversions, we highly recommend that you include Core Web Vitals in your site audits.

What’s more, we created a site audit checklist you can download.

FAQs

How do I check my Core Web Vitals?

There are a number of tools that will help you see your Core Web Vitals, including:

• Google Search Console
• Google’s PageSpeed Insights
• Lighthouse
• Google’s Web Vitals Chrome extension

How can I improve my Core Web Vitals?

You can improve your Core Web Vitals by first diagnosing what is causing issues on your site. There are many tools that will give you a Core Web Vitals analysis for your site, including Google PageSpeed Insights and Lighthouse. These tools will give you clear guidelines to improve your CWV metrics.

Does Core Web Vitals affect SEO?

In 2020, Core Web Vitals became minor part of Google’s ranking systems.

What are the Core Web Vitals?

The Core Web Vitals are a set of specific factors that Google considers crucial for assessing the user experience on a website. Core Web Vitals include:

• Largest Contentful Paint (LCP)
• First Input Delay
• Interaction to Next Paint (INP)
• Cumulative Layout Shift (CLS)