Get NitroPack with up to 37% OFF
Note: Interaction to Next Paint (INP) is an official Core Web Vital. INP replaced First Input Delay (FID) as the new responsiveness metric. Chrome is officially deprecating support for FID, so developers and site owners have until September 9, 2024, to transition over to INP.
In May 2020, as part of their ongoing initiative to improve user experience on the web, Google introduced a set of standardized user-centric metrics – Core Web Vitals.
With their help, site owners and developers today have a better understanding of key aspects of how visitors experience websites.
This announcement marked a significant development in the field of web performance optimization and the community around it. Becoming an essential aspect of optimization strategies, Core Web Vitals provide clear guidelines and benchmarks that empower you to improve your website in a more data-driven way than ever before.
Three years later, successful online businesses have proven time and time again the major impact Google’s Core Web Vitals have on user satisfaction, engagement, and conversion.
In this guide, we cover:
Let’s get you up to speed!
Google’s Core Web Vitals are a set of three user-centric performance metrics that measure key aspects of user experience, focusing on loading speed, responsiveness, and visual stability:
To assess user experience accurately, Core Web Vitals consider real-world usage data and prioritize metrics that matter most to users.
By analyzing these metrics, website owners can identify areas that need improvement and take actionable steps to enhance their site's performance and create a seamless user experience.
While all Core Web Vitals metrics are essential, LCP, INP, and CLS are currently considered the most important for optimizing user experience and Google search rankings. These metrics directly reflect the perceived loading speed, responsiveness, and visual stability of your website.
Here’s a quick timeline of how Core Web Vitals have developed since the initial announcement in May 2020:
Core Web Vitals play a crucial role in website performance optimization.
By improving them, along with focusing on usability testing, you follow best practices as per Google’s guidelines and also make sure your online business attracts more traffic and converts better.
In a collaborative research by Deloitte and Google, a mere 0.1s improvement in page speed showed tangible improvements across the entire buyer journey.
The benefits of passing your Core Web Vitals include (but are not limited to):
Google released a whole video about the relationship between the Core Web Vitals and SEO performance:
Here’s the most important quote from the video:
As expected, quality content is still king.
In fact, in August 2022, Google launched the “Helpful Content” update to further reward people-first content that provides a satisfying experience.
At the same time, good Core Web Vitals undoubtedly increase the importance of overall user experience as a ranking factor. That’s why, if you’re trying to rank in a highly-competitive space with dense informational coverage, optimizing for Core Web Vitals will give you a competitive edge.
John Mueller himself also addressed Web Vitals questions over at Reddit and had this to say:
Put simply, having good Core Web Vitals is about much more than SEO. It's about taking it a step further and making sure not only Google Search loves your website but the majority of your visitors, too.
To optimize Core Web Vitals effectively, it's crucial to measure and understand the current performance of your website.
Several beginner and developer tools can help you analyze LCP, INP, and CLS effectively:
Google's PageSpeed Insights tool provides a comprehensive analysis of a web page's performance, including Core Web Vitals metrics and a Performance score.
When running your first PSI report, your focus should be on the Core Web Vitals assessment section, and more specifically on the metrics LCP, INP, and CLS.
This assessment is part of the Field Data report. Field data are provided by the Chrome User Experience Report (CrUX). This information is collected from real users and is based on what they experience on your website. When it comes to search rankings, Google will use these field results.
The “Diagnostics” section in PSI also provides useful information about elements that affect each of the three metrics:
The PageSpeed Insights report generates a Performance score based on lab data only, too. Apart from the Web Vitals we saw above, it factors in results for metrics like Total Blocking Time and Speed Index.
And although it’s tempting to start chasing a 100/100 score, only by optimizing your Web Vitals and improving field results will you have better business metrics.
CrUX is a public dataset that collects real-world user experience data from millions of websites. It provides valuable insights into Core Web Vitals metrics based on actual user interactions.
There are two ways to directly access the CrUX dataset:
Both require more time and effort than simply running a page through PageSpeed Insights or GSC. However, they also provide more ways to organize and visualize the data. For example, BigQuery lets you slice and join data with other datasets.
If you have the time and tech expertise, it’s worth experimenting with both methods. Check out this guide on Core Web Vitals tracking via GA4, BigQuery and Google Data Studio for a starter example.
The Performance tab in Chrome DevTools allows developers to analyze the performance of web pages.
It provides detailed metrics, including Core Web Vitals, and enables you to identify performance bottlenecks, diagnose issues, and optimize your website for better performance.
To see Core Web Vitals in the DevTools Performance Tab, follow these steps:
Look for the Core Web Vitals metrics in the timeline. The metrics will appear as colored bars, and you can hover over them to see more details.
By default, the DevTools Performance Tab shows the LCP (Largest Contentful Paint), INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift) metrics as part of the "Summary" view. You can expand each metric to see additional information and related events.
You can also find Core Web Vitals data in the "Metrics" section, where you can explore different metrics related to loading, scripting, rendering, and more.
Google Search Console (GSC) has two new Core Web Vitals reports - one for mobile and one for desktop device.
Each report gives you information about the field data for groups of URLs and their performance.
These reports are great for finding common issues across different URLs. That way, you get information about your entire site instead of just one page.
For example, if you have lots of identical product pages where the largest element is an image, the LCP metric will be similar for all of them. In that case, GSC finds LCP problems across all of these product pages.
Also, after fixing any Core Web Vitals problems, you can alert Google by clicking on “Validate fix”.
In short, these new GSC reports are a fast and easy way to track Core Web Vitals performance for your entire site.
RUM tools collect data on real user interactions with your website. They provide valuable information about Core Web Vitals in real-world scenarios, helping you understand loading experience and identify areas for improvement.
Here are some popular RUM tools that can assist you in monitoring and analyzing Core Web Vitals:
For a quick Core Web Vitals check, you can use this Chrome extension. The extension automatically gives you a short Core Web Vitals audit, including other notable metrics like FID, FCP, and TTFB.
Simply add the extension to your toolkit, visit a web page, and click on it to trigger the overview.
Again, the real-user data (i.e., field data) for this extension also comes from the CrUX.
To optimize your Core Web Vitals effectively, it's essential to understand each metric and its significance.
But first…
Passing Core Web Vitals means that a website meets the performance thresholds set by Google for each of the individual metrics: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).
To pass your Web Vitals you need to meet the 75th percentile performance target set by Google. The 75th percentile in Core Web Vitals refers to a performance benchmark that indicates the threshold at which 75% of page loads for a specific metric (LCP, INP, or CLS), fall below a certain value.
In other words, to have a good user experience and meet Google's standards, websites should aim to have their performance metrics meet the corresponding 75th percentile thresholds.
Let's see what this means in terms of each Web Vital metric.
Largest Contentful Paint measures the time it takes for the largest content element above the fold to become visible to the user. That element can be an image (including a background-image in CSS), video, or a block of text.
It helps assess the perceived loading speed and is a key indicator of when the main content is available to users. Everything below 2.5s is considered a good LCP score. If the largest above the fold element on a page loads faster than that for 75% of all recorded page loads, the page passes the LCP assessment.
How to improve Largest Contentful Paint (LCP)
Here are a few ways to reduce your LCP:
INP is a metric that assesses a page's overall responsiveness to user interactions throughout the entire user’s visit. The final INP score is the longest interaction that has occurred.
The following are counted as interaction types that INP will observe:
Hovering and scrolling does not factor into INP.
INP aims to capture the user's experience of how quickly and smoothly a site reacts to their inputs, providing a key indicator of the page's interactivity and responsiveness. A lower INP value indicates a faster, more responsive page, enhancing the overall user experience.
To be in the green zone, a page's INP should be less than 200ms for 75% of all recorder page loads.
The reason why Google decided to replace FID with INP was to address FID's limitations.
The problem with FID was that it only measured the delay for the first input, not accounting for the page's responsiveness throughout the user's entire session. INP, on the other hand, considers the responsiveness of the entire page throughout the user's session, offering a broader, more comprehensive, and accurate reflection of the user experience.
How to improve Interaction to Next Paint (INP)
Here’s what you can do to optimize your INP score:
Avoid Recurring Timers That Overwork the Main Thread: Minimize the use of setTimeout and setInterval as they can delay user interactions by occupying the main thread, especially if these timers are executing extensive tasks.
Break Up Long Tasks: Split long-running tasks into smaller chunks to prevent blocking the main thread, allowing the browser to maintain responsiveness and smoother visual experiences during user interactions.
Avoid Interaction Overlap: Implement techniques such as debouncing inputs and using AbortController for fetch requests to prevent multiple interactions from overwhelming the main thread before it can render the next frame.
Optimize Event Callbacks: Evaluate the necessity of expensive event callbacks; remove or delay their execution to reduce processing time, ensuring actions like button clicks do not hinder page responsiveness.
Defer Non-Rendering Work: Utilize yielding to the main thread during long tasks to allow for UI updates, improving the perceived responsiveness by completing essential rendering work before continuing with non-critical tasks.
Reduce DOM Size: Aim for a DOM with no more than 1,400 nodes by avoiding bloated HTML, minimizing JavaScript-based DOM manipulation, and refraining from using heavy page builders or plugins that contribute to large DOM sizes.
Cumulative Layout Shift quantifies the visual stability of a web page by measuring unexpected layout shifts that occur during the page's loading phase.
In other words, CLS measures the effect of content on the page that moves around unexpectedly without user input.
A Core Web Vitals CLS score below 0.1 means a page is visually stable. If that’s true for 75% of recorded page loads, the page passes the CLS assessment.
To compute your CLS score, Google answers two questions:
The overall CLS score is the sum total of all individual unexpected layout shift scores. Here's how an unexpected layout shift looks:
PageSpeed Insights can show you which elements contribute to CLS on a page:
This CLS generator is also great for finding layout shifts. It computes your overall CLS score and shows shifting areas.
How to fix Cumulative Layout Shift (CLS)
Here are a few optimizations that can reduce layout shifts significantly:
You can find more examples and best practices in our guide for fixing CLS issues.
Optimizing Core Web Vitals requires a holistic approach that incorporates both technical and strategic elements.
By prioritizing performance-related tasks in your development plan and implementing effective strategies, you can improve your website's performance and user experience.
Here’s what you need to know to get started.
When embarking on website development or redesign projects, it's crucial to prioritize performance-related tasks from the beginning.
This includes optimizing code, assets, and server configurations, as well as considering performance implications at every stage of the development process.
By placing performance as a core focus, you can ensure that your website is built with speed and user experience in mind. A great way to do this is to set a web performance budget that helps align all teams’ efforts and keep track of the results after new iterations.
In a bold mobile website overhaul, BMW decided they wanted it to fully embody what they stand for – performance, design, and innovation. From the start, the teams agreed on focusing on exceptional speed and user experience.
Source: Milliseconds make millions report
The result was a whopping 22% increase in traffic to the BMW sales site, going from 8% to 30%.
After you get the web performance budget in place, you can move on to the technical elements that help you optimize for your Web Vitals.
Optimizing load times and page speed is crucial for providing a fast and seamless user experience on your website.
Here are some techniques you can start with:
Audit and optimize the delivery of CSS by inlining critical CSS or loading it asynchronously to prevent render-blocking. This technique ensures that the necessary CSS is available for rendering the above-the-fold content quickly.
Additionally, evaluate third-party scripts and consider their impact on performance, removing or optimizing where necessary.
Determine the largest content element on each page and ensure its efficient delivery to improve LCP.
An easy way to check which element triggers this metric is to run the page through PageSpeed Insights, scroll down to the “Diagnostics” section and click on “Largest Contentful Paint element”.
You can do the same thing with Chrome’s DevTools. Open the page you want to analyze in Chrome, right-click, select “Inspect” and go to "Performance."
Click on the Reload button and wait for Chrome to analyze the page.
Once the report is ready, you’ll find a small LCP icon in the “Timings” section. When you hover over it, it will paint the largest element of the page blue.
Optimizing your website for mobile devices is crucial for delivering a fast and seamless user experience to the users with smaller screens.
Here are some mobile-specific optimization techniques you can implement to improve speed and performance:
Providing a smooth and consistent user experience on your website is crucial.
Earlier, we mentioned some great strategies for improving CLS. Add the following techniques to your strategy to keep randomly moving elements at bay:
In addition to technical elements, strategic approaches can further enhance Core Web Vitals optimization.
Utilize browser caching and server-side caching techniques to store static resources, such as images, CSS files, and JavaScript files, locally on the user's device. This reduces the need for repeated downloads, resulting in faster subsequent page loads.
Implement a CDN to distribute your website's content across multiple servers worldwide, reducing latency and improving overall performance.
Lazy loading delays the loading of non-visible or below-the-fold content until it's needed. By implementing lazy loading for images, videos, and other resources, you can significantly improve initial page load times.
The Core Web Vitals Technology Report sheds some light on how the most popular content management systems (CMS) perform in terms of Web Vitals improvement.
As of February 2024, Shopify and Wix are competing for the leader’s spot on mobile. On desktop, Shopify, Wix, and Squarespace are all pushing hard to outperform their competitors. Unfortunately, in both cases WordPress is lagging behind.
Good Core Web Vitals on mobile comparison results between WordPress, Shopify, Squarespace, Magento and Wix. Source: Core Web Vitals Technology Report
This trend hasn’t gone unnoticed by the WordPress development team, and in October 2021, they acknowledged losing ground and proposed a dedicated Performance Team to coordinate speed improvements.
The proposal stated that:
Here are some highlights from the proposal:
The key takeaway here it that performant websites have become the new standard in the web world and the choice of a CMS will be increasingly influenced by its core performance capabilities.
If you’re already a proud owner of a WordPress website, applying the techniques we’ve already discussed will guarantee an elevated user experience and business results.
By now, you should be looking at a hefty list with optimization suggestions.
If you’re just getting started having access to a performance expert or a developer is pretty optimistic.
Your next best move is to turn to a ready-made solution.
And while there are many caching plugins out there, Core Web Vitals optimization requires a more holistic approach that a fully-automated solution like NitroPack can handle entirely on its own.
With 35+ advanced features, you’ll leverage the latest bells and whistles in performance optimization. All without writing a single line of code.
NitroPack combines various techniques, including automatic asset optimization, complete image optimization, font subsetting, lazy loading, advanced caching, and CDN integration, to deliver lightning-fast web performance.
Lora has spent the last 8 years developing content strategies that drive better user experiences for SaaS companies in the CEE region. In collaboration with WordPress subject-matter experts and the 2024 Web Almanac, she helps site owners close the gap between web performance optimization and real-life business results.