Core Web Vitals: What They Are + How to Improve Your Scores

Core Web Vitals are a set of three metrics Google uses to measure the user experience of a web page: loading speed, responsive speed, and visual stability while loading. Optimizing your website for Core Web Vitals improves user experience and SEO rankings.

A functional, lightning-fast website is the gold standard in the eyes of Google and real users alike.

That’s why Google created Core Web Vitals: three specific metrics the search engine powerhouse uses to measure the user experience of a webpage.

In this guide, find out what these core metrics are, how you can measure them on your website, and make optimizations for better user experience and rankings in the SERP.

What are Core Web Vitals?

Core Web Vitals are a set of metrics (loading, interactivity, and visual stability) that Google refers to when measuring the quality of a website user’s experience. These ranking factors are a part of Google’s “Page Experience” signals.

These vitals are graded on a scale of good, needs improvement, or poor and are made up of three specific site speed and user interaction measurements:

Largest Contentful Paint (LCP) (loading)

Largest Contentful Paint measures how quickly the largest elements of a webpage load, such as the primary logo, header, or video.

An ideal LCP score should be around 2.5 seconds or less, according to Google (meaning the largest piece of content is loaded within 2.5 seconds).

Because the largest elements of a website are meant to be consumed first, a good LCP score allows the user to engage with the content right away.

Alternatively, a poor LCP score results in a more frustrated user who is likely to bounce.

Interaction to Next Paint (INP)

Interaction to Next Paint measures how quickly a webpage responds when someone interacts with it.

So, when a button is clicked, INP calculates how quickly the page takes to deliver the result or “next step” of that click.

An ideal INP score is 100 milliseconds or less. Much like LCP, this loading time supports a good user experience and prevents people from bouncing off the page too early because of a long wait time.

Note: INP replaced First Input Delay, or FID, back in May 2023. FID also measured responsiveness (how long it took the browser to process the first interaction on a webpage), but it was determined that there were limitations to this metric.

Cumulative Layout Shift (CLS)

CLS measures how much the content of a webpage shifts around while loading – in other words, its visual stability.

A good CLS score (0.1 or less) means that everything stays in place while the page is loading.

This impacts user experience, particularly when it comes to trying to click a button that suddenly shifts during loading — an experience that causes users to land on new, unintended pages or multiple (frustrating) click attempts while the button moves around.

Just like it’s important for your health to check your body’s vitals, the same goes for the health of your website. (Image: Unsplash)

Why Core Web Vitals matter

“Google prioritizes pleasant web experiences for readers,” says CEO of HawkSEM Sam Yadegar. “Load times are one of the key ranking factors, we’ve seen rank climbs for ourselves and our clients once core web vitals are at a healthy state.”

Aside from an improved user experience, Core Web Vitals offer:

1. Higher rankings on the SERP

Core Web Vitals metrics greatly influence technical SEO. Better CWV? Higher rankings, more traffic, visibility, and reach.

2. More conversions

A well-functioning website is more trustworthy and enjoyable, making people more likely to convert.

3. Increased user retention, lower bounce rates

Slow-loading websites almost guarantee a bounce. A fast, functional website reduces frustration, helps keep people engaged, and encourages them to return.

How to measure your Core Web Vitals

There are a few ways site owners can test their web pages’ Vitals. These include the Chrome User Experience Report, the Core Web Vitals report through Google Search Console, and PageSpeed Insights.

There’s even a Chrome extension that will show you the Web Vitals results for a current page.

The tricky part here is that your score can change as you scroll through a page and whether you’re accessing it via mobile or desktop.

You also want to determine whether you’re looking at Web Vitals “lab” data or “field” data.

The former is collected and approximated through a browser’s API, while the latter is collected from actual user experiences on your site.

You can address pages with poor scores and work to optimize them through things like upgrading your web host or compressing images. (Image via Unsplash)

Here’s how to measure your Core Web Vitals performance depending on different types of tools:

Google Search Console for performance overview data

Google’s free tool is the ultimate analytics tool to monitor your site’s performance data:

• Go to Google Search Console
• Select your website
• Go to the “Experience” tab
• Go to “Core Web Vitals” report

This is where Google will rank your URLs “Good,” “Needs Improvement,” or “Poor,” according to Core Web Vitals.

Google PageSpeed Insights to measure results

This is another free tool from Google that offers CWV data with both lab and field data included in the reports.

Again, “lab” will provide data from people’s devices across all geos and networks. The “field” section, on the other hand, offers data from simulated devices.

• Go to PageSpeed Insights
• Enter your URL and click “Analyze”
• Review the results and suggestions for improvements

Pro tip: Use the PageSpeed Insights extension from the Chrome Web Store to measure your Vitals in real-time.

Lighthouse for more detailed analysis

Lighthouse is another Google-owned tool that helps provide further analysis of a website’s performance for auditing.

This tool may be helpful for additional insights, but comes with a more steep learning curve for most accurate and helpful use:

• Open Chrome
• Go to the page you want to analyze
• Open Developer Tools (right-click on the page and select “Inspect” or press Ctrl + Shift + I)
• Go to “Lighthouse” tab
• Select the options you want
• Click “Generate Report”
• Review Core Web Vitals scores and suggestions

Chrome User Experience Report (CrUX) for field data

CrUX reports on real-world data and provides a holistic view of your website’s overall Core Web Vitals performance (rather than individual URLs).

• Go to CrUX Dashboard (part of the Chrome Web Vitals and Chrome UX Report tools)
• Enter your URL
• Review your report

(Image: Screenshot)

How to optimize your website for Core Web Vitals

Once you have an idea of how your Core Web Vitals currently rank through the tools listed above, you can dig into some optimizations.

Here are our top tips for improvement according to the three Vitals metrics:

How to improve LCP

First, review the LCP data across your entire site. From there, it’s time to address pages with poor scores and work to optimize them through things like upgrading your web host or compressing images:

1. Optimize images and videos

Massive, slow-loading images can cause major issues for your LCP score. Here are some ways to optimize your images and videos:

• Compress images
• Use modern formats
• Serve multiple resized images
• Prioritize loading
• Remove unnecessary image bloat
• Use a Content Delivery Network (CDN) to cache and deliver images globally
• Set optimal caching headers
• Use a caching plugin

2. Implement lazy loading

Lazy loading refers to the technique of delaying the loading of certain parts of a webpage until necessary, which ultimately speeds up the loading time of the webpage.

But remember, don’t lazy load any LCP images! These are the primary page content elements we want to load first and fast, and lazy loading is meant to facilitate that goal.

Instead, lazy load images below the fold and prioritize the order in which page elements are downloaded so LCP elements load first.

3. Improve server response time

Easier said than done, here are some ways to optimize your server response time:

• Use a Content Delivery Network (CDN)
• Optimize application codes
• Use server-side caching
• Upgrade to a server with better CPU capabilities and storage
• Only use system fonts that are already installed on the user’s device, and only include the font weights and styles that your site needs
• Leverage Memcached

How to improve INP

1. Reduce JavaScript execution time

Lighthouse outlines the best ways to achieve this:

• Only send the code that your users need by implementing code splitting
• Minify and compress code
• Remove any unused code
• Reduce network trips by caching your code with the PRPL pattern

2. Minimize main-thread work

The “main thread” handles user interactions, rendering pages, and running JavaScript – all taxing work that can overwhelm and lead to slower page loads.

Some ways to minimize the main-thread work include:

• Optimize third-party scripts
• Use web workers
• Precompile or use server-side rendering (SSR)
• Defer unused JavaScript
• Reduce the complexity of your styles
• Use efficient animations
• Minimize DOM size
• Implement code splitting
• Avoid long-running JavaScript functions

How to improve CLS

To minimize unexpected layout shifts that happen as your website loads (and ultimately improve your CLS score), you can:

1. Set size attributes for images and video in your HTML
2. Use CSS transformations for animations
3. Avoid ads or embeds that cause layout shifts

Pro tip: After making adjustments to your website, it may take time for your Core Web Vitals score to improve. It likely won’t be immediate. so don’t panic if you don’t see changes reflected right away. It could take as much as 28 days to see measurable improvements.

Additional important web vitals

While not considered Core Web Vitals, there are several “bonus” performance metrics that Google considers while ranking your website’s speed and functionality worth mentioning:

• Time to First Byte (TTFB): How quickly a browser receives the first byte of data from a server after someone requests a file.
• First contentful paint (FCP): How long it takes the first content on a webpage to load (not to be confused with the largest content (LCP).
• Total Blocking Time (TBT): How long a page is blocked from responding to user input while loading.
• Time to Interactive (TTI): How long it takes a webpage to become interactive after it’s loaded.

Other Page Experience signals

We know that Core Web Vitals are one of Google’s primary “Page Experience” signals. While Google doesn’t provide a complete list of Page Experience Signals, we do know Google also considers these signals while evaluating real-user experience:

• Mobile-friendliness ensures a website functions on mobile devices.
• Safe browsing checks that a website is free from harmful content like phishing or malware.
• HTTPS measures whether a website is served over a secure connection to protect user data.
• No Intrusive Interstitials (NII) makes sure a website doesn’t use intrusive pop-ups that cover the main content on the page.

The takeaway

Achieving good Core Web Vitals not only ensures a positive user experience, it also leads the way to success through organic search.

Understanding what each Vital means, how to measure your current performance, and implementing optimizations will have a massive impact in every aspect of your digital footprint.

But if your team needs a little extra horsepower, we got you.

This post has been updated and was originally published in August 2020.