What are Core Web Vitals?
Core Web Vitals represent a collection of key elements that Google deems essential in determining the overall user experience on a webpage. These are quantifiable metrics that measure how users perceive the performance of a web page.
The three main elements of Core Web Vitals include:
Largest Contentful Paint (LCP)
This is all about the speed at which the main content on a webpage is fully displayed to a visitor. Think of the principal content as the primary or central element of your website that first draws a visitor's attention, such as a key image or headline.
Depending on the website, this could differ, even between mobile and desktop versions. The importance of LCP lies in the fact that visitors are likely to abandon a site if the central content takes too long to appear.
The benchmark for LCP is as follows:
Google Assessment | LCP Time |
|---|---|
Good | ≤ 2.5 s |
Needs Improvement | ≤ 4.0 s |
Poor | > 4.0 s |
First Input Delay (FID)
FID measures the responsiveness of your website. More specifically, it calculates the time from when a user interacts with a page element, like clicking a button or a link until the browser actually starts processing that event.
In other words, if a visitor fills in a form and hits submit, FID would measure how quickly your site processes this action. JavaScript is often a significant factor in affecting FID.
As for Google's guidelines, the benchmark for FID is as follows:
Google Assessment | FID Time |
|---|---|
Good | ≤ 100 ms |
Needs Improvement | ≤ 300 ms |
Poor | > 300 ms |
However, it is important to note here that Google made an update regarding the introduction of INP.
The new metric, called Interaction to Next Paint (INP), was initially introduced as an experimental concept in May 2022 and will officially become part of the Core Web Vitals in March 2024.
This new metric, designed to replace the current First Input Delay (FID) metric, addresses some of its limitations and offers a more comprehensive measure of a page's responsiveness.
To help site owners prepare for this change, Google's Search Console will begin incorporating the INP metric in its Core Web Vitals report.
Site owners who have been making improvements to their FID should find these efforts also beneficial for INP.
Cumulative Layout Shift (CLS)
CLS evaluates the stability of your website's layout. It identifies how often users experience unexpected shifts in the page layout, which could include elements like text and images moving around as the page loads.
This can be incredibly frustrating for users, leading to misclicks and an overall negative user experience. Unspecified ad dimensions are a typical cause for high CLS values.
Google classifies CLS scores as follows:
Google Assessment | CLS Score |
|---|---|
Good | ≤ 0.1 |
Needs Improvement | ≤ 0.25 |
Poor | > 0.25 |
So, in essence, these Core Web Vitals offer a quantitative way to measure aspects of your site that significantly affect user experience and, consequently, your website's performance in Google's search results.
Why are Core Web Vitals Important?
Core Web Vitals are crucial because they provide measurable benchmarks for key elements that contribute to a positive user experience on a webpage.
They serve as indicators of the health and performance of a website from a user's perspective.
Here's why they are important:
User Experience
Core Web Vitals provide a way to quantify the user experience on a webpage.
They focus on aspects such as how quickly the page loads (LCP), how soon it becomes interactive (FID), and how stable the layout is while loading (CLS). Improved scores in these areas contribute to a smoother, more enjoyable user experience.
Search Rankings
In 2021, Google incorporated Core Web Vitals into its search ranking algorithm, enhancing the probability of higher ranks and thereby visibility for websites excelling in these metrics.
While good Core Web Vitals contribute to successful search performance and user experience, they don't assure top search rankings on their own. A superior page experience involves broader factors beyond just these vitals.
Business Performance
A positive user experience, characterized by fast loading, quick interactivity, and a stable layout, can lead to increased user engagement, lower bounce rates, and higher conversion rates. This can directly impact a business's bottom line.
Future-Proofing
Google's shift to Core Web Vitals as part of its ranking algorithm highlights the company's focus on user experience.
Keeping an eye on these metrics and working to improve them can help website owners stay ahead of future updates and changes in Google's algorithm.
Core Web Vitals and SEO
Core Web Vitals are an integral part of SEO. Google elaborated on this relationship between Core Web Vitals and SEO in a detailed video. A crucial point made in the video was this:
In general, we (Google) prioritize pages with the best information overall even if some aspects of page experience are sub-par. A good page experience doesn’t override having great, relevant content.
This statement reaffirms the belief that top-quality content is the most crucial factor. However, Core Web Vitals play a crucial role in stressing the importance of the overall user experience as a factor in page ranking.
Therefore, if your goal is to rank high in a field where the quality of information across different sources is more or less the same, optimizing for Core Web Vitals can give you a competitive edge.
However, remember that having valuable content on your site is irreplaceable.
John Mueller gave us some food for thought:
It is a ranking factor, and it's more than a tie-breaker, but it also doesn't replace relevance.
Depending on the sites you work on, you might notice it more, or you might notice it less. As an SEO, a part of your role is to take all of the possible optimizations and figure out which ones are worth spending time on. Any SEO tool will spit out 10s or 100s of "recommendations", most of those are going to be irrelevant to your site's visibility in search. Finding the items that make sense to work on takes experience.
He also said:
The other thing to keep in mind with Core Web Vitals is that it’s more than a random ranking factor, it’s also something that affects your site’s usability after it ranks (when people actually visit). If you get more traffic (from other SEO efforts) and your conversion rate is low, that traffic is not going to be as useful as when you have a higher conversion rate (assuming UX/speed affects your conversion rate, which it usually does).
In short, good Core Web Vitals contribute to much more than just SEO. They're about improving the user experience, which should be a goal for all website owners.
How to Measure Core Web Vitals?
Here are some ways to measure Core Web Vitals:
Chrome User Experience Report (CrUX)
Google has integrated Core Web Vitals into several key tools designed for developers and webmasters, with the first being the Chrome User Experience Report.
This report gathers real-time data from users while they navigate the web and subsequently provides this information to developers through tools such as PageSpeed Insights and Google Search Console.
The Chrome User Experience Report collects valuable insights about how users experience different websites in terms of Core Web Vitals metrics.
It captures data related to loading performance, interactivity, and visual stability, allowing developers to understand the actual user experience on their sites.
The CrUX is not a direct tool to use but a dataset. You can access it through BigQuery. However, the data from CrUX is integrated into several Google tools, including PageSpeed Insights and Google Search Console.
PageSpeed Insights
This tool provided by Google can give you a detailed report of your website's performance including Core Web Vitals.
Navigate to the PageSpeed Insights tool.
Enter the URL of the website you want to test in the search bar and click 'Analyze'.
After a short while, you will see a detailed report including your site's LCP, FID, and CLS values under 'Lab Data' and, if available, 'Field Data'.
Google Search Console
This tool gives an overall view of how your website performs in terms of Core Web Vitals. You can see how your pages perform based on real-world usage data (field data).
Login into your Google Search Console account. If you haven't set this up yet, you will need to do so and verify ownership of your website.
Select the property (website) you want to check.
On the left sidebar, click on 'Experience', then 'Core Web Vitals'.
You will then see a report showing the URLs with good, needs improvement, and poor status for both mobile and desktop.
Lighthouse
Lighthouse is an open-source, automated tool developed by Google for improving the quality of web pages. It provides a simple way to check your site against Core Web Vitals.
Here's how you can use it:
Google Chrome DevTools
Lighthouse is integrated directly into the Chrome DevTools under the "Lighthouse" panel. To use it:
Open Chrome and navigate to the web page you want to audit.
Right-click anywhere on the page and select "Inspect" to open DevTools.
Navigate to the "Lighthouse" panel.
Configure your settings (like choosing to view a mobile or desktop report) and click on "Generate report". After a while, you'll receive a report on the performance of your page, including Core Web Vitals.
Lighthouse CLI (Command Line Interface)
This is a more advanced option that allows you to run Lighthouse audits from the command line, which can be useful for automation or running audits on local files.
First, install Node.js and npm (Node Package Manager) on your system.
Then, install Lighthouse using npm with the command npm install -g lighthouse in your terminal.
You can then run an audit on a page with the command lighthouse https://example.com --view, which would run Lighthouse on 'example.com' and open the report in a browser.
Online Tools
Several online tools use Lighthouse to provide page audits. The most prominent is Google's own PageSpeed Insights.
Lighthouse Chrome Extension
You can also use the Lighthouse Chrome extension to run audits on your web pages. Here's how to do it:
Go to the Chrome Web Store and search for "Lighthouse".
Click on "Add to Chrome" to install the Lighthouse extension.
Once installed, you will see the Lighthouse icon (a lighthouse symbol) at the top right corner of your browser.
To run an audit, navigate to the web page you want to evaluate, click on the Lighthouse icon, and then click on "Generate report".
The extension will run a series of audits against the page and then generate a report on the performance of the page, including the Core Web Vitals.
The Lighthouse extension operates similarly to the Lighthouse panel in Chrome DevTools but allows for quicker access and easier usability for running audits on web pages.
Keep in mind, however, that since it runs audits on whichever version of the page is currently on screen, it's crucial to ensure the correct view (desktop or mobile) is displayed before running the audit.
How to Improve Core Web Vitals?
Improving Core Web Vitals involves optimizing different aspects of your website to enhance user experience. Here are some recommended methods to improve each Core Web Vital metric:
How to Improve Largest Contentful Paint (LCP)?
Upgrade your web hosting to a dedicated server if serious delays are experienced.
Identify and optimize processes on your website, such as removing outdated or unused plugins on WordPress.
Utilize a Content Delivery Network (CDN) like Google Cloud or Cloudflare to distribute content across global servers.
Implement caching techniques to serve cached HTML content, reducing loading time.
Use pre-connections to establish connections in advance for loading content from external domains.
Minify CSS, JavaScript, and HTML files by removing unnecessary characters and code.
Analyze code usage with tools like Google Chrome DevTools' Coverage feature.
How to Improve First Input Delay (FID)?
Optimize JavaScript usage by minifying scripts, removing unused code, and preloading essential resources.
Leverage Google Chrome DevTools' Coverage feature to identify code suitable for preloading.
Minify JavaScript, HTML and CSS using appropriate tools.
Refer to the technical details provided by the W3C Community Group for a deeper understanding.
How to Improve Cumulative Layout Shift (CLS)?
Specify size attributes for images and videos to reserve space during loading.
Use aspect-friendly ratio boxes in CSS to prevent unexpected content shifts.
Incorporate on-page indicators to inform users about loading elements that may cause shifts.
By implementing these recommendations, you can optimize your website's performance and improve Core Web Vitals, leading to a better user experience and potentially higher search rankings.
Takeaway
Core Web Vitals quantify the key aspects of a website's user experience. They measure the load time, interactivity, and visual stability of a web page.
The objective of these metrics is to offer a user-friendly web. They not only impact a site's user experience but also its SEO performance. Several tools, including Google's own Lighthouse, can help assess and improve these metrics.