How to Check Core Web Vitals – A Comprehensive Guide

No matter if you have a brick-and-mortar or online store, you want to make the shopping experience effortless and maximally pleasant for your customers. Without a doubt, a well-designed store increases your customers’ satisfaction. This consequently translates into higher sales.

So, if you follow some standardized retail interior principles to improve the convenience of shopping and maximize your revenue, why wouldn’t you do the same with your online store, landing page, or service pages?

Improving User Experience on your website has nothing but benefits for your online business. A reduced bounce rate and more conversions are just two prime examples.

If you’re wondering how to find out whether your website doesn’t put your customers off with an awfully long response and loading time, start by taking a look at your Core Web Vitals.

Core Web Vitals is a brainchild of Google. They are three metrics used to score the user-friendliness of websites. It’s not a secret that Google puts its users first, that’s why websites with better Core Web Vitals scores, meaning those working faster, generally rank higher.

Running a Core Web Vitals check gives you an idea of how users experience your website. The report shows you the areas that require your attention as they may evoke confusion and annoyance in your visitors.

When you manage to fix those issues and achieve a perfect Core Web Vitals score, you maximize your visitors’ satisfaction, increase their engagement, and improve your business metrics.

As you can read on the Google Developers blog:

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. – web.dev

The good news is also that:

Site owners should not have to be performance experts to understand the quality of experience they are delivering to their users. The Web Vitals initiative aims to simplify the landscape, and help sites focus on the metrics that matter most, the Core Web Vitals. – web.dev

Sounds reasonable, doesn’t it? Having that settled, let’s see…

How Core Web Vitals Relate to SEO & UX

Truth be told, the metrics of Core Web Vitals aren’t the prime ranking factors for Google. There are other website elements that have way more “to say” in terms of being granted the top positions in SERP. Take web content, for example.

If your website isn’t saturated with high-quality pieces of text, video, and images, nailing Core Web Vitals won’t rather help you much.

On the other hand, ignoring these three main Web Vitals – which stand for the word “Core” in the Core Web Vitals – may be the reason why the competing websites, especially those with comparable web content, do better in SERP than you.

In plain English, Core Web Vitals come into play when Google bots need to select among similar websites to answer a user’s query. When the general metrics such as backlink profile or authority level are more or less equal, Google starts looking for other “quality” indicators to differentiate the competing sites.

Eventually, it picks the website that loads the fastest, has fewer (preferably zero) layout shifts, and is the quickest to respond to clicking, scrolling, and tapping.

This is how the Core Web Vitals concept can be summarized:

So, if you care about having a well-optimized website, you need to handle technical SEO (here is a technical SEO guide in case you need it). At the same time, you need to focus on designing a flawless User Experience. This can be done, among others, by keeping the Core Website Vitals metrics within the recommended range.

When you finally manage to combine technical SEO with UX, your website will run smoothly and load fast.

You can also think of Core Web Vitals as the metrics that tell you how much time your website needs to load.

However, what does it mean that a page is fully loaded?

👉 Does it apply only to the section a user is looking at or the whole page?

👉 What if there is some larger element, such as a video or banner, that needs a bit more time to load than the rest of the page?

👉 What if during browsing the layout suddenly changes a bit due to a new element being loaded with a slight delay?

Core Web Vitals metrics – Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) – are the answer to such questions. Let’s examine what each one stands for and how each one affects your website ranking.

You’re also going to find out how to check Core Web Vitals metrics and improve them if necessary.

By running your Core Web Vitals audit, you can tell whether your website needs improvements concerning its interactivity, visual stability, and loading. You want to know which of those elements needs some tweaking as they influence your website’s overall SEO performance.

It’s also worth realizing that Core Web Vitals Algorithm collects information on how users experience your website. If positive, meaning if the website is quick to respond to clicking and tapping and if its layout doesn’t do any unexpected shifts, the users are more likely to stay on the page long and return to you in the future.

In other words, when users are happy with the way your website works, Google will have no concerns displaying it on their screens more often.

This is how having “healthy” Core Web Vitals can actually improve your rankings. Let’s see now what each of those 3 core metrics actually measures.

Largest Contentful Paint

This metric answers the “How fast?” question, or in other words, it measures loading. It shows you how long it takes for the largest element to be “painted,” meaning generated, on the user’s screen.

Here’s an example of how the process works.

A user enters a website, which ignites a kind of stopwatch. First, the website loads the search bar and tabs, which takes 0.2s. Later, the text and placeholders appear, which takes 0.5s. Next, you see most of the placeholders being filled with text, which takes 0.7s. Finally, all graphics and elements show up on the screen.

The stopwatch stops. For this particular page, the whole LCP process takes 1.0s in total.

Source: web.dev

Is 1.0s Largest Contentful Paint okay for Google? If it’s okay for users, it’s okay for Google. To ensure a good User Experience, you need to make sure your website loading time doesn’t exceed 2.5 seconds.

Here’s a simple representation of how the LCP score affects your users:

😊 0-2.5 seconds

😐 2.5-4.0 seconds

😖 4.0-above seconds

You definitely don’t want your visitors to have 😖 expressions on their faces while trying to browse your website, do you? If the elements your website is built of take too much time to load – indeed, 4 seconds is too much – you can expect your visitors to be quick to leave and never come back.

Google and users consider such a website to be broken or fishy.

First Input Delay

Once your website appears on the user’s screen, the FID comes into play. First Input Delay measures interactivity. This time the stopwatch starts when a user clicks, taps, or interacts in any other way with your site. The stopwatch stops when the browser starts processing that interaction.

Here’s an example of how the process works.

A user decides to click on the “Get a free quote” button. The stopwatch starts. Now the browser begins processing this input, trying to understand what it has just been asked for. When the browser starts executing the command, the stopwatch stops, yet the process continues.

Eventually, the user is taken to the bottom of the page, seeing the “Get a free quote” view.

Source: Delante’s own screenshot

To ensure a good User Experience, you need to make sure FID doesn’t exceed 100 milliseconds. Here’s a simple representation of how the First Input Delay affects your users:

😊 0-100 milliseconds

😐 100-300 milliseconds

😖 300-above milliseconds

If your website is slow to respond to users’ first attempt of tapping, scrolling, and clicking, it will cause a sense of frustration.

Just to be clear, First Input Delay measures the first interaction-event processing delay. It doesn’t measure the execution of the process. It tells you when the website is ready to respond to user interaction.

Cumulative Layout Shift

This metric defines visual stability. CLS tells you how often a user is likely to be exposed to an unstable layout that moves or shifts in an unexpected way. Unlike LCP and FID, CLS doesn’t use time as a unit of measurement.

It measures the distance and movement between elements, using the following formula:

The impact fraction measures how much space is taken up by an unstable element, whereas the distance fraction deals with how far some elements are moved by the unexpected shift of another element.

Here’s a simple representation of how the Cumulative Layout Shift affects your users:

😊 0-0.1 second

😐 0.1-0.25 second

😖 0.25-above seconds

Your users won’t be happy seeing elements on your pages changing their position unexpectedly, or pushing other elements in some weird directions. If they accidentally click on the wrong button simply because some parts of your web design have suddenly messed up with the layout, you expose your users to a pretty bad UX.

This is what LCP, FID, and CLS help you evaluate.

Now it’s time to run your Core Web Vitals check. Let’s see which SEO tools you can use for that.

It’s super important to keep the track of Core Web Vitals metrics and improve them when necessary. Why would you spend your time on that? Because the scoring has a direct impact on your website’s ranking and UX.

Fortunately, there is a bunch of tools that can help you measure the metrics. Apart from the most popular ones delivered by Google – Google Search Console, Google PageSpeed Insights, Lighthouse, Web Vitals Chrome Extension – there are some cool third-party tools such as GTmetrix and WebPageTest that also helps you check Core Web Vitals, thus making the right decisions in terms of web design and user experience.

Without further delay, let’s see what tools measure Core Web Vitals.

How to Check Core Web Vitals Using Google Search Console

Before walking you through the process, there is one thing I need to drive your attention to. Namely, the information provided by GSC is based on the last 28 days, meaning it isn’t updated in real time.

LICENCE Free

WEBSITE Google Search Console

ACCOUNT ✔️

STEP 1 Log in to your Google Search Console account.

STEP 2 In the left-hand sidebar menu click Experience → Core web vitals. You see two reports: one for mobile and one for desktop. Click the Open Report button to see more details.

STEP 3 The report shows you the areas that absolutely need fixing (Poor), the ones that would use some tweaking (Need improvement), and those that actually positively contribute to your website ranking (Good).

STEP 4 Click on Poor or Need Improvement to see which of the Core Web Vitals require your attention.

STEP 5 You see a detailed report named Details appearing at the bottom. Click on a particular issue to see the Example details and investigate the problem further.

How to Check Core Web Vitals Using Google PageSpeed Insights

PageSpeed Insights bases its reports on field data.

LICENCE Free

WEBSITE Page Speed Insights

ACCOUNT ❌

STEP 1 Go to the PageSpeed Insights official website and type your website’s URL into the search bar. Click Analyze.

Source: Delante’s own screenshot

STEP 2 You access two types of reports: one for mobile and the other for desktop.

Source: Delante’s own screenshot

• The green color indicates that the visitors are happy with FID. Using our above reference, the green marking stands for 😊.
• The yellow color shows that there are some issues with CLS that should be addressed. Using our above reference, the yellow marking stands for 😐.
• The red color indicates that the visitors aren’t happy with the LCP and that it absolutely needs to be fixed. Using our above reference, the red marking stands for 😖.

STEP 3 Scroll a bit until you see Show audits relevant to and click on the metric that you want to examine further.

STEP 4 After clicking on LCP, for example, you receive a list of recommendations that facilitate fixing a particular Web Core Vitals metric.

STEP 5 When you click the ⮟ symbol, you see the exact website elements that require some fixing + suggestions on coping with a given issue.

This website has a clear issue with loading speed on mobile. If you also happen to encounter such problems yourself, be sure to check How to Make Your Mobile Site Load Faster. In case the desktop version of your website also struggles with LCP, you may want to read 5 Elements That Affect Your Website Speed.

How to Check Core Web Vitals Using Lighthouse

Lighthouse bases its reports on lab data. Interestingly, there are 2 ways you can run Core Web Vitals check using Lighthouse. First, I’m going to show you how to generate the report using Lighthouse as a Chrome extension, and later as a Chrome DevTool.

Lighthouse as a Chrome Extension

LICENCE Free

WEBSITE Lighthouse Chrome extension

ACCOUNT ❌

STEP 1 Go to Chrome Web Store and add the Lighthouse extension to the browser.

STEP 2 Go to the website you want to check for Core Web Vitals and click on the Puzzle icon (top right corner of Chrome) to open the extension window. Allow Lighthouse to access the website you’re currently on.

STEP 3 Click the Gear icon to customize the report. If you want to check Core Web Vitals only, select Performance. However, if you would like to run a general analysis of your website, keep all boxes checked. Also, decide which device you wish to generate the report for. Once you select the options, click the blue button – Generate report.

STEP 4 You see a new report page, showing you various statistics on your website performance. To check Core Web Vitals, examine the Metrics section.

STEP 5 Keep scrolling until you see Show audits relevant to and click on the metric that you want to examine further.

As you can see, Lighthouse does not give you the option to check the First Input Delay metric. However, the TBT, which stands for Total Blocking Time serves a kind of similar purpose as FID. In short,

TBT measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses. – Chrome Developers

STEP 6 When you click the ⮟ symbol, you see the exact website elements that require some fixing + suggestions on coping with a given issue.

Lighthouse Chrome DevTools

If you want to run Lighthouse in Chrome DevTools, you need to follow these steps.

STEP 1 Go to a website you want to check Core Web Vitals for.

STEP 2 Open Chrome DevTools.

From the top right corner of the Chrome browser, click on the 3 vertically aligned dots icon – “⋮”.

Select More tools → Developer tools, or simply press [Ctrl] + [Shift] + [I].

STEP 3 From the top menu, select Lighthouse.

STEP 4 Select the Mode, Categories, and Device to run Core Web Vitals check. Later click the blue Analyze page load button.

STEP 5 You get the full report on the page. Mind you, it may take a short while to get it generated.

While talking about browser extensions that you can use to run Core Web Vitals check, let me give you a useful tip for…

Even though this tool doesn’t offer a wide range of information on your website performance, the Web Vitals extension gives you instant and real-time feedback on layout shift, interactivity, and loading. If you decide to use it, keep in mind that this extension measures the metrics on desktop devices only.

LICENCE Free

WEBSITE Web Vitals Chrome extension

ACCOUNT ❌

STEP 1 Go to Chrome Web Store and add the Web Vitals extension to the browser.

STEP 2 Go to the website you want to check for Core Web Vitals and click the Puzzle icon (top right corner in Chrome) to open the extension window.

As you may know, SEO Specialists use a few tools to check given metrics. This helps them get a bigger picture of how good a website performs in search engines. If you would like to check Core Web Vitals like a pro, you may consider confronting the reports generated by the above tools with third-party tools such as GTmetrix or Semrush.

It’s recommended to use such tools only if you feel like receiving more comprehensive reports and if you are fond of having the access to some additional features.

First, you may want to check Core Web Vitals using GTmertix.

Checking Core Web Vitals in GTmetrix

Apart from measuring the Core Web Vitals, GTmetrix provides you with extra pieces of information concerning your website speed and overall performance.

LICENCE Free

WEBSITE GTmertix

ACCOUNT ❌*

*You don’t need to create an account to access the basic information about your website performance. However, if you would like to use the full potential of the tool, you need to register.

STEP 1 Go to the GTmetrix website.

STEP 2 Type your website’s URL into the search bar and click Test your site.

STEP 3 Your Web Vitals metric is provided right next to the GTmertix Grade, which is something that may give you additional insight into your website’s overall performance. This score tells you how well your website is architected.

When you click the “?” icon, GTmetrix displays a short description of a given metric and tells you how low it should be to help your website perform better.

STEP 4 If you want to get recommendations and suggestions to improve your website performance, click the Structure tab.

Again, you may want to filter the recommendations by the metrics: All, FCP, LCP, TBT, and CLS. Also, when you click on the ⮟ symbol, you will see a list of URLs + problems that hinder a given page’s performance.

If you need even more suggestions on how to fix a particular issue, use the Learn how to improve this button. You will be provided with more details on a given problem + a couple of ideas for fixing it.

STEP 5 You may also try checking the Waterfall tab. In this section, you can see which pages take longer to load. When you hover over a particular result, you access more details on what delays the loading time of a particular resource.

In this particular case, the over 600ms loading time may indicate some server issues.

Checking Core Web Vitals in WebPageTest

One of the advantages of WebPageTest is the ability to run the performance test from various locations, meaning you can actually see how people living in a particular word region experience your website. It also lets you select an internet connection type and a browser.

LICENCE Free

WEBSITE WebPageTest

ACCOUNT ❌*

*If you want to access more advanced features or run a few audits a day, you may be asked to register.

STEP 1 Got o WebPageTest.

STEP 2 Type your URL and click Start Test.

In case you’d like to customize the audit, click Advanced Configuration to select from various browsers, locations, and devices. This option is available only when you run a site performance test. When you run the Core Web Vitals test, you can only choose from Mobile and Desktop.

Source: WebPageTest blog

Checking Core Web Vitals in SEMrush

LICENCE Paid

WEBSITE SEMrush

ACCOUNT ✔️

STEP 1 Open SEMrush and log in.

STEP 2 From the left sidebar, select Site Audit.

STEP 3 Introduce your website address and click Start Audit.

STEP 4 SEMrush provides you with the report on your Site Health.

Source: SEMrush blog

STEP 5 Click on View details of Core Web Vitals box to access more information on LCP, and CLS. Since SEMrush takes its data from Lighthouse, it’s impossible to learn about the FID metric. However, you’re provided with the above-mentioned TBT, which should be considered pretty useful.

Checking Core Web Vitals in Screaming Frog

If you happen to have Screaming Frog, you may consider using it to run Core Web Vitals check.

LICENCE Paid

WEBSITE Screaming Frog

ACCOUNT ✔️

STEP 1 Open Screaming Frog.

STEP 2 From the top menu, select Configuration → API Access → PageSpeed Insights.

STEP 3 You will be asked to provide a Google API Key, which you may already have if you use this tool (basically you need either a Google account or a Gmail account). Once that’s done, click the Connect button.

STEP 4 Click the Metrics tab. Next, from the drop-down menu, select the preferred device.

STEP 5 Click Lighthouse Metrics (lab data) and tick the options you want to inspect. That may be Largest Contentful Mertic Time, Total Blocking Time, Cumulative Layout Shift, and First Input Delay. 

STEP 6You may also want to add some CRUX Metrics such as Origin Core Web Vitals Assessment and Core Web Vitals Assessment. Click OK.

STEP 7 Click Start (top menu).

STEP 8 Screaming Frog needs a few moments to generate the report so be patient. When the new window pops up, make sure you’re in the PageSpeed tab. Find the Core Web Vitals Assessment column and check the URLs for Fail/Pass.

STEP 9 Apart from checking the Core Web Vitals metrics, take a look at the Total Page Size column as this also gives you an idea of how large your pages are. In general, to load fast, your website should range between 2-3 MB. If just a couple of pages are around 20 MB, that’s probably okay, but most of your pages should not usually exceed 3 MB.

With such a wide range of tools, running a Core Web Vitals check shouldn’t pose any problem to you. And you absolutely should monitor these three main metrics regularly to be sure your visitors enjoy, or at least aren’t frustrated at navigating your website.

Depending on the tool you use to check Core Web Vitals, you are provided with more or less detailed solutions for improving your website’s metrics. In most cases, those suggestions suffice to improve the website’s performance, especially if you have some understanding of SEO and web development.

Naturally, each website is different, and therefore there is no single one-size-fits-all list of fixes that every website owner can use to improve Core Web Vitals scores. However, after running hundreds of Core Web Vitals audits, we’ve noticed some common problems with website performance that have a negative impact on the loading speed.

Here’s how to fix them:

• Optimize images  – too large images may have a negative impact on Longest Content Paint as they increase the overall size of a page. Luckily, there are numerous tools (GIMP, JPEG Mini, ImageResize) that allow you to reduce the size of your graphics without compromising their quality. If you happen to work with a graphic designer, you may ask them to provide you with files that are already optimized for screens and websites.

• Reduce JavaScript execution time – this one helps big time with reducing First Input Delay. By optimizing your JavaScript – especially, by removing unnecessary, unused, or outdated parts of scripts – you may significantly speed up executing and rendering various images and clips published on your website.

• Minimize CSS and JavaScript file sizes – try to make your CSS and JavaScrpt as lightweight as possible to improve your loading time and enhance your web performance and UX. You can do this by removing all unnecessary characters and making the CSS and Java scripts more compact, so to say. Naturally, you can do this manually, yet it may take you a huge amount of time. Alternatively, you may try using some tools (e.g. Google Closure Compiler or JSMin) to get it done for you.

• Implement server-side rendering or static site generation – this is how you make your pages respond ultra-fast. You simply generate HTML beforehand for your site’s URL. If you don’t introduce many changes to your pages regularly, go for static site rendering. However, if your pages are filled with some user-generated content, better go for server-side rendering.

When your customers have no problems with scrolling and tapping, they are more likely to look with favor on your website, recommend it to their friends and ultimately buy from you. This means that websites with a high Core Web Vitals score are more likely not only to drive more organic visitors but also to increase the conversion rate.

Moreover, having a website that loads fast and is responsive helps you take over the top spots in SERP. Sometimes improving your Core Web Vitals score seems to be the only thing that you need to work on to outrun your closest competitors.

We truly hope your Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift metrics are kept in the recommended range. However, if some of the metrics don’t glow green, follow the suggestions given by an SEO tool of your choice to fix the problem(s).

In case you’d like an SEO specialist to keep your Core Web Vitals in check, don’t hesitate to contact us. We will run an in-depth Core Web Vitals audit to localize your website’s weak points. Later, we will make your website work smoothly, helping it climb the rankings.