What are Google core web vitals

What Are Core Web Vitals & How Can You Improve Your Site Score in 2022?

Core Web Vitals are speed metrics and part of Google’s Page Experience signals. Core Web Vitals Help measure your user experience. Core Web Vitals measure visual load with LCP or Largest Contentful Paint, visual stability with CLS or Cumulative Layout Shift, and interactivity with FID or First Input Delay.

Google officially started Mobile page experience and the Core Web Vital metrics for ranking pages from May 2021. Desktop signals also started rolling out from February 2022.

Google’s Page Experience signals include HTTPS, no intrusive interstitials, mobile-friendliness, and core web vitals. Check the following infographic-

page experience signals of google
Source: ahrefs

So, What are Google Core Web Vitals, and How to Check the Reports?

The easiest way to see your Core Web Vitals report is Google Search Console. There’s a new option on your Google Search Console dashboard named Core Web Vitals.

You can easily see your pages categorized as poor URLs, URLs that need improvement, or good URLs.

Get the overview for each category are as follows:

Name of 3 MetricsGoodNeeds ImprovementPoor
Largest Contentful Paint (LCP)<=2.5s<=4s>4s
Cumulative Layout Shift (CLS)<=100ms<=300ms>300ms
First Input Delay (FID)<=0.1<=0.25>0.25
Page category for Core Web Vitals

And here’s how your actual report looks on Google Search Console-

core web vitals overview from google search console

Mobile and desktop Core Web Vitals overview in Google Search Console when you click on the report.

If you click on any of these reports, you can break down the issues and get the number of URLs impacted.

Are Core Web Vitals important for SEO as well?

Search Engines, especially Google, introduced 200+ ranking factors over years. When talking about Core Web Vitals, Google reps have referred to these as tiny ranking factors or even tiebreakers. 

There have been ranking factors targeting website speed for many years. We were not expecting much impact to be visible when the mobile page experience update finally rolled out. 

A couple of studies found some positive correlation between passing Core Web Vitals and better rankings.

Google Core Web Vital Metrics are important for SEO because-

  • Help to determine a website’s ranking in search engine results pages (SERPs).
  • Indicate how well a website is performing, and what improvements can be made in order to achieve better search engine visibility and organic traffic.
  • Provide insights into the competition, and what techniques and strategies should be used to improve website rankings.
  • Overall, improving Google Core Web Vital Metrics can have a positive impact on a website’s SEO performance.

Solving the Core Web Vitals issues in Google Search Console

Clicking into one of these issues gives you a breakdown of impacted page groups. Maximum changes to improve Core Web Vitals score are done for a particular number of pages impacting other pages. Make the changes once in the template, which will fix the pages in the group.

Now you know what pages got already impacted. Find some more information about Core Web Vitals and how you can get your pages to pass the checks.

  • 5 Quick facts about Core Web Vitals
  • Components of Core Web Vitals
  • Tools for measuring Core Web Vitals

5 Quick facts about Core Web Vitals

Fact one: The metrics split between desktop and mobile. Mobile signals get used for mobile rankings and desktop signals for desktop rankings.

Fact two: The data for Core Web Vitals comes from the Chrome User Experience Report, which records data from active users. The metrics are set at 75% of users. If 70% of users are in the ‘good’ category and 5% are in the ‘need improvement’ category, then your site will be judged as ‘need improvement.’

Fact three: The metrics are set for each page separately. But if there isn’t enough data for each page, then signals from sections of a site or the general site may be used, according to Google Webmaster Trends Analyst John Mueller. 

Fact four: With the addition of Core Web Vitals metrics, Accelerated Mobile Pages or AMP got removed from Google as a requirement from the Top Stories feature on mobile. 

Fact five: The metrics may change over time. Google has made changes to the metrics used for measuring speed in its tools over the years.

Core Web Vitals have already changed a lot, and there are more proposed changes for the upcoming days. They may add page size as well. You can pass Google’s current metrics by prioritizing your assets and having an extensive page. 

Now, let us look at each of the Core Web Vitals in more detail.

Components of Core Web Vitals Explained

Here are the three current components of Core Web Vitals and what they measure:

1- Largest Contentful Paint (LCP) – Visual load

2- Cumulative Layout Shift (CLS) – Visual stability

3- First Input Delay (FID) – Interactivity

Largest Contentful Paint (LCP)

LCP is the single most prominent visible element loaded in the viewport.

The most prominent element is usually your featured image or the <h1> tag. But it could be any of the following as well:

  • <img> element
  • <image> element inside an <svg> element
  • Image inside a <video> element
  • Background image loaded with the url function
  • Blocks of text
  • <svg>
  • <video>

How to see LCP in PageSpeed Insights

PageSpeed Insights will specify the LCP element in the ‘Diagnostics’ section. Also, notice there is a tab to select LCP that will only show issues related to LCP.

core web vitals overview FCP LCP FID

The most significant Contentful Paint issues in PageSpeed Insights point to the blue LCP tab.

How to Optimize LCP

As you see in the previous PageSpeed Insights reports, there are a lot of issues that need to be solved.

Here are a few concepts to keep in mind and five ways to improve LCP score.

1. Reduce image sizes

If you can reduce image sizes, then your page will load faster.

There’s also compression, which makes the file sizes smaller. Pretty much every file type used to build your website can be compressed, including CSS, JavaScript, Images, and HTML.

2. Cover a small area and use CDN

Your information requires time to travel. The further you are from a server, the longer it takes to transfer the data. Therefore, unless you serve a small geographical area, having a Content Delivery Network (CDN) is a good idea.

CDNs give you a way to connect and serve your site closer to users. It’s like having copies of your server in different locations worldwide.

3. Use the same server for all resources if possible

When you first connect to a server, a process navigates the web and establishes a secure connection between you and the server. This takes some time. If you host your resources on the same server, you can eliminate those extra delays.

If you can’t use the same server, you may want to use DNS-prefetch to start connections earlier. A browser will typically wait for the HTML to finish downloading before creating a connection.

4. Cache how much you can

When you cache resources, they’re downloaded for the first page view but don’t need to be downloaded for subsequent page views. With the resources already available, additional page loads will be much faster.

5. Prioritization of resources

To pass the LCP check, you should prioritize how your resources are loaded. First, you should load only the necessary resources to see the content and pack the rest immediately.

Many sites can get to a passing time for LCP by just adding some preload statements for things like the main image and necessary stylesheets and fonts.

Let’s look at how to optimize the various resource types.

IMAGES EARLY

If you don’t need the image, the most impactful solution is simply getting rid of it. However, if you must have the image, just optimize the size and quality to keep it as small as possible.

On top of that, you may want to preload the image. This is going to start the download of that image a little earlier. This means it’s going to display a little earlier.

IMAGES LATE

You should lazy load any images that you don’t need immediately. This loads images later or when a user is close to seeing them. There are plugins like Jetpack from the WordPress repository to help you out.

CSS and JAVASCRIPT EARLY

Remove unused CSS and minify the CSS you have. The other major thing you should do is to inline critical CSS. This takes the part of the CSS needed to load the content users see immediately and then applies it directly into the HTML.

When the HTML is downloaded, all the required CSS to load what users see is already available.

If you’re using a JavaScript framework, you may want to prerender or server-side render (SSR) the page.

Your other options are to inline the JavaScript needed early. The process is similar to CSS.

Jetpack Boost and more plugins are there to help you out.

FONTS

Preload your fonts or just display them early. Even better if you use the same server to get rid of the connection.

Best: Just use a system font. There’s nothing to load, so no delays.

Learn more about Google fonts and custom fonts in WordPress.

Cumulative Layout Shift (CLS)

CLS measures how elements move around or how stable the page layout is. It considers the size of the content and the distance it moves. Google has already updated how CLS is measured.

Previously, it would continue to measure even after the initial page load. But now, it’s restricted to a five-second time frame where the most shifting occurs.

It can be annoying if you try to click something on a page that shifts, and you end up clicking on something you don’t intend to. Unfortunately, it happens to me all the time. I click on one thing, and, suddenly, I’m clicking on an ad and am now not even on the same website. As a user, I find that frustrating.

Common causes of CLS include:

  • Images without dimensions
  • Ads, embeds, and iframes without dimensions
  • Injecting content with JavaScript
  • Applying fonts or styles late in the load

How to see CLS

In PageSpeed Insights, you can see all the related issues if you select CLS. ‘Avoid large layout shifts’ is the main one here to pay attention to.

Notice how our font restyles between 5.1 secs and 5.2 secs, shifting the layout as our custom font is applied.

Smashing Magazine also had an exciting technique. It outlined everything with a 3px solid red line and recorded a video of the page loading to identify where layout shifts were actually happening.

How to optimize CLS

In most cases, while optimizing CLS, you’re going to be working on issues related to images, fonts, or, possibly, injected content. So let’s look at each case.

For images, you need to reserve the space so that there’s no shift and the image simply fills that reserved space. This may require setting the height and width of your images by specifying them within the <img> tag. Get an example-

<img src=“cat.jpg” width=”645″ height=”365″ alt=“cat with ball of string” />

For responsive images, you should use a srcset like this:

  • <img
  • width=”1000″
  • height=”1000″
  • src=”puppy-1000.jpg”
  • srcset=”puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w”
  • alt=”Puppy with balloons” />

And reserve the max space needed for any dynamic content like ads.

First Input Delay (FID)

First Input Delay or FID happens when a user interacts with your web page to when your page responds. You can think of it as responsiveness as well.

Example interactions:

  • Clicking on a link or button
  • Inputting text into a blank field
  • Selecting a drop-down menu
  • Clicking checkboxes
  • Events like scrolling or zooming are not counted as an interaction

It’s really frustrating trying to click something, and nothing happens on your page!

Not all users interact with your page, so the page may not have a First Input Delay value. This is also why lab test tools would not have value. You may want to look at Total Blocking Time (TBT) for lab tests. from PageSpeed Insights, you can use the TBT tab to see related issues.

What causes the delay?

JavaScript competing for the main thread. There’s just one main thread, and JavaScript competes with running tasks on it. Think of it like JavaScript having to take turns to run.

Long tasks block the processing on the main thread and cause delays

Source: web.dev

While a task is running, a page can’t respond to user input. This is the delay that is felt. The longer the job, the longer the delay experienced by the user. The breaks between tasks are the opportunities the page has to switch to the user input task and respond to what they wanted to do.

How to optimize First Input Delay

Most pages pass FID checks. But if you need to work on FID, there are just a few items you can work on. First, if you can reduce the amount of JavaScript running, then do that.

If you’re on a JavaScript framework, there’s a lot of JavaScript needed for the page to load. That JavaScript can take a while to process in the browser, and that can cause delays. If you use prerendering or (SSR), you shift this burden from the browser to the server.

Another option is to break up the JavaScript to run for less time. You take those long tasks that delay response to user input and break them into smaller tasks that block for less time. This is done with code splitting, which breaks the tasks into smaller chunks.

There’s also the option of moving some of the JavaScript to a service worker. I mentioned that JavaScript competes for the one main thread in the browser, but this is sort of a workaround that gives it another place to run.

There are some trade-offs as far as caching goes. And the service worker can’t access the DOM, so it can’t do any updates or changes. So if you’re going to move JavaScript to a service worker, you really need to have a developer that knows what to do.

3- Tools for measuring Core Web Vitals

There are many tools you can use for testing and monitoring. Generally, you want to see the actual field data, which you’ll be measured on. But the lab data is more beneficial for testing.

The difference between lab and field data is that field data looks at real users, network conditions, devices, caching, etc. But lab data is consistently tested based on the exact needs to make the test results repeatable.

Many of these tools use Lighthouse as the base for their lab tests. The exception is WebPageTest, although you can run Lighthouse tests with it. The field data comes from CrUX.

Tools to Analyze Field Data and Lab Data for LCP, FID, CLS and more

  1. PageSpeed Insights
  2. Chrome User Experience Report
  3. Google Search Console (Core Web Vitals report)
  4. Web-vitals JavaScript Library
  5. web.dev
  6. Web Vitals Extension
  7. Chrome DevTools

You can use some additional tools to gather your own Real User Monitoring (RUM) data that provide more immediate feedback on how to speed improvements impact your actual users (rather than just relying on lab tests).

PageSpeed Insights is great to check one page at a time. But if you want both lab data and field data at scale, the easiest way to get that is through the API. You can connect to it easily with Ahrefs Webmaster Tools (free) or Ahrefs’ Site Audit and get reports detailing your performance.

FAQs on Google Core Web Vitals

What are Google Core Web Vitals?

Google’s core web vitals are a set of five key factors that the search engine considers when ranking websites. These factors include website speed, mobile-friendliness, HTTPS security, and overall website quality.

Why are Google Core Web Vitals important?

Google Core Web Vitals are important because they can help you identify and fix performance problems on your website. Improving your website’s performance can help you improve your website’s user experience and SEO.

What are the Google Core Web Vital metrics?

The Google Core Web Vital metrics are page load time, time to the first byte, and server response time.

How can I track my website’s performance?

You can track your website’s performance using the Google PageSpeed Insights tool.

How to improve your core web vitals?

There is no one-size-fits-all answer to this question, as the best way to improve your core web vitals will vary depending on your specific website and business needs. However, some tips to improve your core web vitals may include optimizing your website for search engines, creating high-quality content, and building strong backlinks.

When did Google’s core web vitals start?

Google’s core web vitals were first announced in January of 2016.

How can you prepare for Google’s core web vitals?

To prepare for Google’s core web vitals, you should first assess your website’s current ranking on the five key factors. Once you have identified any areas of weakness, you can then begin to address them by optimizing your website for speed, mobile-friendliness, HTTPS security, and content quality.

How to use page speed insights API for core web vitals?

To use Pagespeed Insights API for Core Web Vitals, you can use the following code:

https://www.pagespeed.io/insights_api/?url=https%3A%2F%2Fwww.example.com%2F&key=YOUR_API_KEY

How can you pass Google’s core web vitals?

To pass Google’s core web vitals, you must meet the standards set by the search engine for website speed, mobile-friendliness, HTTPS security, and overall website quality. Meeting these standards can be a challenge for some websites, but there are a number of ways to improve your website’s ranking on each of these factors.

Final thoughts on Google Core Web Vitals

I don’t think Core Web Vitals will have much impact on SEO. Unless your site is extremely slow, I generally won’t prioritize fixing the issues. 

Here’s another critical point: work with your developers; they are the experts here. Page speed can be highly complex. If you’re on your own, you should rely on a plugin or services Like ‘WP Rocket’, ‘Autoptimize’ or ‘Jetpack Boost’ to handle this.

Things get easier as new technologies are rolled out. Many platforms like your CMS, your CDN, or even your browser take on some of the optimization tasks. My prediction is that most sites won’t even have to worry much within a few years.

Many platforms are already rolling out or working on things that will help you make your job easily done.

WordPress is also preloading the first image and is putting together a team to work on Core Web Vitals. Cloudflare and other security platforms also doing the same.

So stop getting worried. Work smartly. Everything will be easier.

Like it? Do let people know!

Leave a Comment

Your email address will not be published.