All You Need to Know About Google Web Core Vitals

What Are the Google Web Core Vitals About? Should You Be Worried?

Google caused a stir sometimes back by announcing that they had updated their indexing system to crawl “vital” pages. Although they didn’t go into details explaining what they meant by vital, we’d like to assume ‘vital’ means – at the very least – ‘core’ or ‘critical’.

Getting your pages crawled and indexed by Google is one step, getting them ranked well for the exact terms you want to rank for is another. If you want to rank in the top 10 for your most important keywords, then we recommend reading this article on On-Page SEO Tips.

So, What Makes a Page Vital, according to Google?

Google didn’t give us any specific details, but we can come up with assumptions based on the way Google talks about vital pages.

So, here it goes:

Google isn’t going to be crawling everything on your site. Instead, they’ll be focusing on the most important pages/sections of your site. For example, they are probably going to be crawling your home page and most of the posts on your blog.

The question then is: What makes a page vital?

Simple: the generated user experience.

That’s right. Google doesn’t care about “keywords” and whatnot – not as much as SEOs like to think they do. Instead, they’re more focused on how visitors interact with your site. All they want is to understand how valuable the page is to the visitor.

The top pages on your site are likely (in no particular order):

• Your home page – Not the landing page, but a general overview of your site. 
• Blog posts – The posts that you publish regularly. 
• Product pages – On your e-commerce store, for example. 
• Knowledge base articles – If applicable to your site, a knowledge base with frequently asked questions.

Google will be crawling these pages and looking for two things:

1. Supportive content that helps the user achieve their goals (e.g. finding something, reading about a particular topic).

The goal of supportive content is to:

• Support and enrich your website content
• Make your page easy to both read and follow

In other words, it needs to be written in a way that’s both useful and helpful to your site’s visitors.

1. Substantial content that gives the visitor value

The goal of substantive content is to:

• Provide useful information (and not just fluff)
• Be a source of information on your site
• Give your visitors more than they expected to find (in a good way).

Keep in mind: Google is trying to find out why the page is useful and why visitors should keep coming to your site for more.

Hint: The keys to making a page vital in the eyes of Google are:

• Providing support and value to your users.
• Writing content that flows well and is, at the same time, easy to read and understand.
• Creating a reading experience that’s pleasant to the eye.

So, no SEO jargon or keyword stuffing!

What are Core Web Vitals?

If we were to try and define “core web vitals”, we’d go with the following definition:

A set of pages/sections that Google is going to be focusing on while indexing and ranking your website.

The most “vital” pages on your website are those that give visitors value and support their goals, as we’ve mentioned. 

In other words, Google cares about content. It cares about how useful a page is to the visitor and how well the said content flows.

Likewise, Google doesn’t care much about backlinks (not anymore) or keyword density or anything else. It only cares about how useful a page is to the visitor and if it’s actually giving them the information and the support they need.

It’s about offering a quality page experience, as determined by the following factors:

• Text readability
• HTTPS connectivity
• Content length and density
• The level of detail in the content – more details are better, but only when they’re meaningful and useful
• The number of navigational elements/links and how they are placed (navigation should be well-placed, useful, and easy to use)
• The strength of the headline – strong headline will help grab the visitor’s attention and make them more likely to read the rest of your content.
• The design/layout of the page
• Mobile-friendly design
• Other UX factors – loads fast, has good internal links, has sharing buttons and so on.

So, in short: The core web vitals are those pages that Google focuses on while indexing and ranking your website.

As it appears, most websites are already doing great with these factors. If you’re one of them, then you have nothing to be worried about.

Who is Affected?

Since Google’s focus is on user experience, this change will affect everyone equally.

However, sites that are already struggling to provide quality content and flow to their visitors are likely to suffer the biggest hit. That’s because they are struggling now, and this update accentuates that struggle.

Will this Affect my Site?

That depends largely on your focus and target audience. If you’ve been focusing your efforts on building backlinks and having your site stuffed with keywords, then yes. But if you’ve been putting effort into providing quality content to your site’s visitors and making it easy for them to find what they need, then the answer is no.

Another factor that could potentially affect you is whether or not you have implemented responsive design.

If you have a mobile-optimized website, then the answer is likely no. If not, then yes.

But again – focus on providing a quality user experience, not the design.

What to Do If You Have a Site that Needs Help?

The best thing you can do right now is hiring a reputable SEO agency to perform a thorough audit of your site. This will give you an idea of where things are going wrong and how to solve them.

In the meantime, you can check your site’s mobile ranking on Google’s Mobile-Friendly Test. See how well you are doing, and continue to work on the things you can fix right now.

You could also check your site’s speed using Google’s Page Speed Insights. But remember: speed isn’t nearly as important to Google as a good-quality user experience.

Next, find out how search users are finding your site. Is it because you have specifically told them about it? Or did they just happen to stumble upon it?

If the latter is more common, you could have a problem.

You can check your site’s organic traffic using a tool such as SEMrush or SEO Spyglass. Look at how visitors are arriving at your site. Is it through search engines? Referral sources? Directly from other sites?

Lastly, have you done a usability test on your site? 

If not, then we ask you to consider it. Ask volunteers to spend some time navigating through your website, answering questions about user experience. If they encounter problems, then you know what needs fixing.

If there’s a problem, don’t ignore it. Instead, address it and make an effort to create a better user experience for your site visitors.

If you don’t do this, Google may pick on it and, from what we know, that could have a devastating impact on your site’s performance.

Core Web Vitals in Details

Core Web Vitals metrics aren’t just about speed. It consists of a set of user-facing metrics related to speed, mobile-friendliness, security and accessibility that Google will weigh against each other.

The metrics are split into two:

i.) The Core Web Vitals:  

These include:

Largest Contentful Paint (LCP) – a metric that calculates the time it takes to render the largest text-based element of a page.

First Input Delay (FIP) – a metric that calculates the time it takes to register a user’s input within a page.

Cumulative Layout Shift (CLS) – a metric that calculates the time of delay in milliseconds for all elements, including those triggered by JavaScript or Ajax.

If any of these metrics are deemed to be negatively affecting user experience, Google will take that into account when they are crawling and indexing your site.

ii.) The Non-core Web Vitals: 

These include:

Page Load Distributions (PLD) – a metric that shows the load times of all page resources as well as the time it takes for each one of them to load.

Total Blocking Time (TBT) – a metric that shows the total time, in milliseconds, that a page takes to load. It’s calculated by adding all of the blocking resources’ time on a page.

First Contentful Paint (FCP) – a metric that shows the time, in milliseconds, it takes for a page to first render text or meaningful images.

Time to Interactive – a metric that shows the time, in seconds, it takes for a page to become interactive. This is defined as when a user can perform an action or use a site feature, like filling out a form.

User Timings: – a metric that shows the measurement of all user experience related timings. It’s calculated through user-timings.

The threshold values for each metric will be determined soon, but they are likely to vary depending on the type of pages that you have. For example, a blog could have a higher threshold for LCP than e-commerce.

The Non-core Web Vitals will be measured from the time that the entire page is painted on a user’s screen.

The Non-core Web Vitals will not be used for ranking in Google, but to produce an aggregate score for a site.

This score will eventually appear on the search results page, but Google hasn’t yet revealed what form it will take. It could be a simple pass/fail grade or it could be more detailed.

The illustration below shows how a page loads, and how the different metrics come into play. 

Why Should You Care About Core Web Vitals?

Like we mentioned earlier, Google is doing a lot of work behind the scenes to improve the overall quality of the web.

The Core Web Vitals are taken into account a lot more heavily than the Non-core Web Vitals.

These metrics have been so effective at identifying low-quality websites that Google is now using them to rank websites in the search results.

Google’s Matt Cutts has previously stated that if you don’t pass the LCP test, you’ll be penalized in the search results.

In addition to this, if you have a poor page speed then it can affect the amount of time that it takes to load new content and pages. If Google thinks that these issues affect your user experience, then they could demote your site in the search results.

Hints of What’s to Come

Google hasn’t yet released any public documentation about these updates, but they did release the following statement on their Webmaster Central Blog:

We’re going to start using a new set of measurements in Chrome’s developer tools … [they] will let you see how fast your page is loading in two ways: (1) Start rendering time and (2) First Contentful Paint. These two measurements are the cornerstone of a new set of web performance metrics.

Google has also released a video detailing how they will be measuring the page performance using Chrome’s DevTools:

We think this video is a clear indicator that these new metrics will form part of the search ranking algorithm.

Here are the reasons you should start caring about core web vitals:

Users prefer a site that loads fast, and is both pleasant and easy to use: According to the Aberdeen Group, users are significantly more likely to return to a site when it loads quickly. In addition, users who had a good experience with a site are more likely to become regular users and recommend it.

Core web vitals are now a ranking factor: These metrics have been so successful at weeding out the low-quality websites that Google is now using them to rank web pages in their search results. Page speed is already a ranking factor, and now it’s believed that the LCP metric will become one too.

Your competitors are already using core web vitals: The biggest brands in the world are already implementing this data into their websites, so you should too. If they’re doing it, then the tables have already been turned and you’re playing catch up.

You might be required to pass the Core Web Vitals Assessment: Google has hinted that they might be rolling out a “Google Page Experience” badge for websites. This is similar to the Page Speed badge that they currently use on their Webmaster Tools Dashboard, but it would be more detailed and prominently displayed on Google’s search results page. Sites that receive a “pass” grade will be rewarded, whilst sites that fail to get a pass mark will be penalized.

You can’t hide from core web vitals: Google’s Core Web Vitals are based on public, measurable data that you can’t hide from. This is one of the reasons why they’re so effective at digging out low-quality websites and ranking them lower in the search results. It’s easy to make a website that looks good, it’s much harder to make one that works well (that is, it’s easy to cheat when checking for the markers of a high-quality website).

A Detailed Review of Each Core Web Vital Metric

Here’s a detailed review of each Core Web Vital Metric:

1# Largest Contentful Paint (LCP)

In the simplest of terms, LCP is the amount of time between when a user clicks on an element and when that content appears.

The Difference Between Largest Contentful Paint (LCP) and First Meaningful Paint (FMP)

FMP is a measure of when the first text or image appears on the page. LCP is a measure of when content that’s deemed useful to the user first appears on the screen (or when a page fully loads). 

When Does LCP Happen?

The Largest Contentful Paint (LCP)  metric measures the amount of time between when a page is loaded and the point at which “meaningful content” first appears on the screen. It’s effectively the same as First Meaningful Paint (FMP), but it goes a little deeper into the level of importance of each element to the user.

LCP considers not only the objects that are above the fold, but also any other objects that the user has expressed an interest in (for example, using the scroll wheel or clicking a link). It also considers elements that are important to SEO.

For example, you might want to consider using LCP if:

• Users’ clicks and scrolls haven’t been recorded.
• You have lots of dynamic content.
• Your site has a lot of elements that aren’t visible on the page initially.
• You’d like to understand exactly how long users wait for each piece of content to load.

How Is LCP Metric Calculated?

Google uses a JavaScript-based web crawler called ” Puppeteer ” to measure the amount of time between when a user clicks on an element and when that content appears.

The crawler takes a screen capture of the page before the click occurs, then takes another screen capture after the click happens to see when the content appears.

The crawler can also detect when a browser tab has been opened and closed without any interaction with the page’s content. This measures the time between when a user opens a new tab and when they click on that page.

Excluded from this measurement is content above the fold, CSS and resources (images, scripts etc.) that don’t affect the rendering of the content that users initially see.

Important Considerations

So, what does Google consider the largest text or image block? The largest text block is based on the number of characters of content that are displayed, while the largest image block involves measuring the area covered by its bounding box.

Note that <svg> elements are not considered part of LCP.

Google adds that: “We do not currently make a distinction between solid and translucent images.”

They also say that content from HTML elements like <canvas> and <iframe> are not considered part of the content on a page.

This metric is only available for desktop and mobile pages – not for AMPs.

Useful Tools for LCP Metrics:

1# Chrome User Experience Report in the Google Search Console

The Chrome User Experience Report in the Google Search Console provides detailed information about how your pages perform on desktop devices. You can see how your pages rank against your competitors in terms of average Paint and Complete metrics. It’s important to note that it doesn’t provide all the metrics that Google measures – only Paint, Complete and TTFMP.

2# Google’s Lighthouse Tool in the Chrome DevTools

Google’s Lighthouse tool is a free automated tool for auditing your website for quality. It provides detailed reports on how well your site meets Google’s best practices, plus suggestions for improvements.

Lighthouse is built into the Chrome DevTools, so you don’t need to download anything extra. You can use the audit option to see if your pages are meeting basic performance requirements.

Because Lighthouse gives a score out of 100, you can compare the scores for your pages to other sites in your industry.

You can use Chrome Lighthouse to assess multiple pages at once, or audit a list of URLs (e.g., all the pages on your site). You can also download and run Lighthouse as a Node script for other uses.

To use Lighthouse, follow these steps:

Open a Chrome browser window and visit your site. With your mouse, right-click on the page and select Inspect.

This opens the Chrome DevTools. If you don’t see the toolbar at the bottom, press Ctrl/Cmd + Shift + I.

Make sure you’re using the latest Google Chrome version. 

From the menu at the top of the Chrome DevTools, select More tools > Lighthouse…

Click on “Generate Report.”

Wait for the report to be generated, which shouldn’t take very long. The report will pop up once it’s generated.

Here’s an example of the information provided in the generated report:

The Headings and Metrics are clickable, so you can navigate through the report.

You’ll also see a Scorecard to compare your site to other sites in your industry.

As you can see, Google provides a lot of useful data when it comes to LCP metrics. Using this data, you can prioritize where to focus your efforts in terms of performance enhancements.

For example, if the average time it takes for content to be visually complete is 2.89 seconds for the top sites on a given page, you should try to optimize or fix things that would cause this metric to decrease, such as images that take longer to load or content that takes a long time to display.

On the other hand, if your metrics are significantly better than the top sites, you should try to keep doing things that improve those metrics – like optimizing how content is loaded.

How to Interpret your LCP score

According to Google, scores closer to 0 are better. A score of 1 is “Average” and that’s the baseline for this report.

• Under 2.5 seconds: Good 

Users will be engaged and delighted

• Between 2.5 seconds and 4 seconds:  Average 

Users won’t be delighted or engaged but they’ll still have a positive experience. 

• A score of over 4 seconds: Not recommended

Consider how you can make changes to improve your LCP metrics.

You can use this report to identify problem areas in the user experience and work on fixing them.

What Might be Causing a Poor LCP Score?

If you see a score of under 2.5 seconds then your site is doing well.

Several factors might contribute to a poor score.

They include: 

• If you’re seeing a long LCP time for your pages, then check to see if your site has any image elements that are larger than they need to be. You could check the size of an image by looking at its file size in a binary editor. If it’s bigger than it needs to be, then consider optimizing or reducing the file size so that it loads more quickly.
• In addition, check if you’re using components that are using a large amount of CPU time. For example, check the PageSpeed Insights report for your page to see if there’s anything that’s taking a lot of CPU time.
• If your site has a high number of components on the page, then that could affect performance negatively. However, Google doesn’t provide a lot of information about how to fix this problem.
• If your site is using render-blocking JavaScript and CSS, then that could also contribute to a poor LCP score. To check for these elements, you’ll need to check the PageSpeed Insights report for your site.

2# First Input Delay (FID)

In the simplest of terms, the First Input Delay is the time between a page loading and the user’s first action.

If you have a high FID time, then there could be any number of issues that are preventing the user from being able to interact with the page.

The FID metric is connected to the LCP metric and a high First Input Delay could be caused by many of the same issues that contribute to a high LCP time. In addition, a high FID can be caused by issues that are specific to the browser the user is using as well.

How is FID Calculated?

According to Google, the First Input Delay metric is calculated in the following way:

First Input Delay = LCP – Time to Interactive

Therefore, the First Input Delay is calculated as the time between when the browser receives all of the resources (CSS, JavaScript and other initial loading files) and the time when a user’s first action is taken.

Google says that they take the “Time to Interactive” as the first action.

Important Consideration

FID doesn’t take into account how/where the user moves their cursor and clicks on the page. For example, if the user is moving their cursor around looking at things before they click on anything, then the FID will be longer than it would be if the user immediately clicked on something.

According to Google’s definition of the First Input Delay, they are only measuring the time after resources have been downloaded. Additional delays could cause a problem with FID even if the browser was able to render the resources quickly.

Here’s an example: If the page can’t connect to its database server, then it might be waiting for some data from there. This could delay the user’s first action, and would affect the FID time.

If you’re wondering why this is an important consideration: FID is a metric that measures the time between when the user enters your website and when they can take their first action.

Here’s how you interpret FID Score?

• Under 100ms: Good
• Between 100ms and 300ms: Can be improved
• Over 300ms: Not good

How to Fix a High FID

Hopefully, you have an idea of some of the possible causes for a high First Input Delay. Let’s look at some of the actions that you can take to fix this problem.

• Reduce Your HTTP Requests

The total number of requests per page is often a very useful metric to look at when you’re analyzing performance. If your site ends up having 10 or more HTTP requests, then it might be a good idea to look for some ways to reduce the number of external resources requested per page.

• Use a Content Delivery Network (CDN)

If your users are located in different places around the world, then a CDN will help to reduce the amount of time it takes for your content to arrive at their computer.

Google has a free CDN called Google Hosted Libraries. The drawback is that you’re at the mercy of their network. That means if their servers are down then you’re not going to be able to serve a good experience.

• Add Caching

Cache as much content as you can. Make sure you don’t have any unnecessary resources on the page and make sure that there aren’t any duplicate elements.

• Improve Your Server’s Response Time

If your server is slow, then it will take longer for it to finish sending the content. If you want to save bandwidth, then you can use Google’s new Brotli Compression.

• Improve PageSpeed Insights Score

You might be able to improve your PageSpeed Insights score by using some of the best practices. This can help to reduce your First Input Delay, which might end up helping to improve your score.

• Update Your Content and Technologies

If you’re using older libraries or frameworks, then you might want to consider updating them. You should also think about updating your content regularly to keep it relevant and reduce the size of the page.

• Check Your Design

Make sure that your design doesn’t have any unnecessary elements. For example, if you’re using a carousel, then at least make it very lightweight. If the user never needs to interact with it, then you should consider removing it from your website altogether.

• Create a Site Map

If your site has a lot of pages, then it’s going to take longer for the user to find what they’re looking for. Create a site map, and make sure that it’s very easy to use.

• Consider a Faster Page

One of the best ways to fix the FID problem is by developing a faster page. If you have the time and resources, then it’s often best to focus on creating a better experience rather than worrying about your FID.