In today’s digital landscape, website performance is a crucial factor in attracting and retaining visitors. Google has recognized this and introduced Core Web Vitals as part of its Page Experience signals.
Core Web Vitals are a set of speed metrics that measure the user experience of a website.
Google officially started the Mobile page experience and the Core Web Vital metrics for ranking pages in May 2021. Desktop signals also started rolling out in February 2022.
In this article, we will explore what Core Web Vitals are, how to check the reports, why they are important for SEO, how to improve them, and whether you should be concerned about them in 2023.
Table of Contents
So, What are Google Core Web Vitals, and How to Check the Reports?
Core Web Vitals are a set of speed metrics introduced by Google as part of its Page Experience signals. These metrics aim to measure the user experience of a website by assessing factors such as loading speed, visual stability, and interactivity. The three main metrics that make up Core Web Vitals are-
- Largest Contentful Paint (LCP)
- Cumulative Layout Shift (CLS)
- First Input Delay (FID)
By focusing on these metrics, you can identify areas of improvement and optimize their sites to provide a better user experience.
Google officially started incorporating Core Web Vitals into its ranking algorithm in May 2021 for mobile pages and in February 2022 for desktop pages.
The easiest way to see your Core Web Vitals report is through 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 as follows:
| Name of 3 Metrics | Good | Needs Improvement | Poor |
|---|---|---|---|
| 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 |
And here’s how your actual report looks on 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 the years. When talking about Core Web Vitals, Google reps have referred to these as tiny ranking factors or even tiebreakers.
Core Web Vitals play a crucial role in SEO as they are part of Google’s Page Experience signals. Google considers user experience factors, including Core Web Vitals when ranking web pages in search results.
Having a good Core Web Vitals score can positively impact your website’s visibility in search engine results pages (SERPs). Websites that provide a fast, stable, and interactive user experience are more likely to rank higher in search results.
By optimizing your site’s Core Web Vitals, you can improve its chances of ranking well and attracting more organic traffic from search engines.
Google Core Web Vital Metrics are important for SEO because they-
- 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
- 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
How to Solve 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 the 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 have already been impacted. Find some more information about Core Web Vitals and how you can get your pages to pass the checks.
Components of Core Web Vitals Explained
Here are the three current components of Core Web Vitals and what they measure:
- Largest Contentful Paint (LCP) – Visual load
- Cumulative Layout Shift (CLS) – Visual stability
- First Input Delay (FID) – Interactivity
Let us explain the components and show you how to deal with them better-
1- 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
- The 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.
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 scores.
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.
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.
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.
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.
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.
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 to 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.
Preload Your 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.
2- 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.
3- 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. 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 who knows what to do.
Tools for Measuring Core Web Vitals Scores
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. However, 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-
- PageSpeed Insights: Provides insights into your site’s performance and offers suggestions for improvement.
- Chrome User Experience Report: Offers real-world performance data based on user experiences.
- Google Search Console (Core Web Vitals report): Provides a Core Web Vitals report with an overview of your site’s performance.
- web.dev: Offers resources and insights on optimizing Core Web Vitals.
- Lighthouse: An open-source tool for auditing web page performance.
- Web Vitals Extension
- Chrome DevTools
You can use some additional tools to gather your own Real User Monitoring (RUM) data that provide more immediate feedback on how speed improvements impact your actual users (rather than just relying on lab tests).
5 Quick Facts about Core Web Vitals
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.
Fact one: The metrics are 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 features 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.
Comparing Core Web Vitals and Google Helpful Content Update
While Core Web Vitals focuses on measuring user experience through speed metrics, the Google Helpful Content Update emphasizes the quality and relevance of content. Both updates aim to enhance the overall user experience, but they assess different aspects of a website.
Core Web Vitals primarily focus on speed-related metrics, such as loading speed, visual stability, and interactivity. On the other hand, the Google Helpful Content Update assesses the helpfulness and relevance of content for users.
It is important to address both Core Web Vitals and content quality to provide a well-rounded and optimized user experience on your website.
Should You Really Be Worried About Core Web Vitals in 2023?
As a website owner or developer, it is natural to wonder whether you should be concerned about Core Web Vitals in 2023.
If your website already performs well in terms of speed and user experience, you may not need to prioritize Core Web Vitals optimization. However, if your site lags in terms of loading speed, stability, or interactivity, focusing on improving Core Web Vitals can significantly enhance your site’s user experience and potentially boost your SEO rankings.
Ultimately, it is essential to strike a balance between optimizing Core Web Vitals and other aspects of your website to provide a comprehensive and engaging user experience.
A Few Related Things You Should Know about Google Core Web Vitals
When did Google’s core web vitals start?
Google’s core web vitals were first announced in January 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_KEYHow 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
In conclusion, Core Web Vitals are essential metrics that measure the user experience of a website. By focusing on three major metrics like Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID); website owners and developers can optimize their sites to provide a fast, stable, and interactive user experience.
Checking Core Web Vitals reports in tools like Google Search Console and implementing optimization strategies will help you improve your site’s Core Web Vitals score.
Keep just one thing in mind- there’s nothing to worry about.
Many platforms are already rolling out or working on things that will help you get 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.