Core Web Vitals: Everything You Need to Know (2023 Guide)

Last updated on Sep 13th, 2023 | 12 min

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!

What Are Core Web Vitals?

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, interactivity, and visual stability:

  • Largest Contentful Paint (LCP) measures loading speed
  • First Contentful Paint (FCP) measures interactivity
  • Cumulative Layout Shift (CLS) measures visual stability

Core Web Vitals metrics

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.

Which Core Web Vitals metrics are most important currently?

While all Core Web Vitals metrics are essential, LCP, FID, and CLS are currently considered the most important for optimizing user experience and Google search rankings. These metrics directly reflect the perceived loading speed, interactivity, 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:

  • Google has confirmed that the page experience update is complete as of September 2021;
  • Initially, the page experience ranking signal applied only to mobile SEO performance;
  • In February 2022, Google started adding the page experience ranking signals to desktop as well. The rollout was completed at the end of March 2022;
  • The Core Web Vitals are only a part of Google’s page experience signals. Other signals are mobile-friendliness, HTTPS, and intrusive interstitials;
  • To pass Core Web Vitals successfully, you need to reach the “good” threshold for all three metrics. Google explains this as reaching the 75th percentile;
  • Google uses only field data (real user data) to determine whether a page passes the Core Web Vitals evaluation.

Field vs Lab data

  • Google is constantly testing and improving the CWV metrics. In early 2021, they updated CLS to be more neutral to the time on page. They also revealed they’re planning on developing a new smoothness metric that will measure animations. This, however, is still in the works.
  • In May 2023, Google announced that as of March 2024, FID will be replaced by Interaction to Next Paint (INP).

Why do Core Web Vitals matter?

Core Web Vitals play a crucial role in website performance optimization.

By improving them, you’re not simply following best practices as per Google’s guidelines, but also making 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.

Faster load time improve the entire buyer journey

The benefits of passing your Core Web Vitals include (but are not limited to):

  • Enhanced User Experience: By optimizing Core Web Vitals, you can provide users with faster loading times, smoother interactions, and a more visually stable browsing experience. These factors directly contribute to improved user satisfaction and engagement.
  • Improved Search Engine Rankings: Google has incorporated Core Web Vitals as ranking factors, meaning that websites with better Core Web Vitals scores are more likely to increase their visibility in Google search and attract more organic traffic.  Slower page loading speed can negatively affect how many pages on your website they crawl, which could decrease your site’s indexation.
  • Increased User Engagement: Websites that load within 2 seconds and provide a seamless user experience tend to have higher engagement rates, lower bounce rates, and increased conversions. Core Web Vitals optimization can positively impact user behavior and improve business outcomes.
  • Significant boost in conversions and revenue: Website that are optimized for Google’s Core Web Vitals generate more pageviews and convince visitors to advance in their user journey easier. Whether it’s a newsletter subscription or an “Add to cart” event, an optimized site increases the opportunities for effective monetization.
  • Better User Retention: When users have a positive loading experience on your website due to optimized Core Web Vitals, they are more likely to stay longer, explore more content, and return in the future. By removing performance barriers, you create a frictionless conversion process with a big payout well beyond the first visit.
  • Decreased Environmental Impact: Slow websites produce a significant carbon footprint, and optimizing for Core Web Vitals has a global positive impact. It’s a great way to contribute to decreasing pollution and also position your online business as progressive and environmentally conscious.

Start attracting more traffic and boost your revenue with a faster website. Get started with NitroPack →

How much do Google’s Core Web Vitals impact SEO?

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:


“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.”

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:

“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).

CWV is a great way of recognizing and quantifying common user annoyances.”

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.

Measuring Your Site’s Core Web Vitals (6 Best Tools)

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, FID, and CLS effectively:

  • The PageSpeed Insights’ Core Web Vitals assessment;
  • Chrome User Experience Report (CrUX);
  • Chrome DevTools Performance Tab;
  • The Core Web Vitals report in Google Search Console;
  • Real User Monitoring (RUM) Tools;
  • The Core Web Vitals Chrome extension.

See your website with and without NitroPack’s powerful performance optimization →

1. Google PageSpeed Insights

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, FID, and CLS.

Core Web Vitals assessment in PSI

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:

Core Web Vitals diagnostics in PSI

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.

Performance score in PageSpeed Insights

2. Chrome User Experience Report (CrUX)

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.

3. Chrome DevTools Performance Tab

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:

  1. Open the website you want to analyze in Google Chrome and right-click anywhere on the page. Select “Inspect” from the context menu to open the Chrome DevTools panel.

    How to open Chrome DevTools

  2. In the DevTools panel, navigate to the "Performance" tab.

    Chrome DevTools panel

  3. Click on the "Record" button (solid circle) to start recording the performance profile of the page.
  4. Interact with the website as you normally would to simulate user actions and load various elements.
  5. Once you have completed your interactions, click the "Stop" button (solid square) to stop recording the performance profile.
  6. The Performance Tab will display a detailed timeline of the page's activities during the recording session.

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.

Chrome DevTools performance panel

By default, the DevTools Performance Tab shows the LCP (Largest Contentful Paint), FID (First Input Delay), 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.

4. Core Web Vitals Report in Google Search Console

Google Search Console (GSC) has two new Core Web Vitals reports - one for mobile and one for desktop device.

Core Web Vitals report in Google Search Console

Each report gives you information about the field data for groups of URLs and their performance.

Google Search Console URL analysis

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”.

LCP issue in Search Console

In short, these new GSC reports are a fast and easy way to track Core Web Vitals performance for your entire site.

5. Real User Monitoring (RUM) Tools

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:

  • Google Analytics: By enabling the "Enhanced Measurement" setting in Google Analytics, you can track Core Web Vitals metrics, such as LCP, FID, and CLS, for your website's real users. The data is available in the "Site Speed" and "Core Web Vitals" sections of the Google Analytics dashboard.
  • WebPageTest: WebPageTest is a popular open-source tool that allows you to run performance tests on your website. It provides RUM capabilities by collecting performance data from real users. WebPageTest offers detailed waterfall charts, filmstrips, and performance metrics, including Core Web Vitals, to help you understand the user experience and identify areas for improvement.
  • SpeedCurve: SpeedCurve is a comprehensive performance monitoring tool that offers RUM capabilities. It collects data from real users and provides detailed performance reports, including Core Web Vitals metrics. SpeedCurve allows you to track and analyze performance trends over time, set performance budgets, and receive alerts when performance issues arise.

6. Core Web Vitals Chrome extension

For a quick Core Web Vitals check, you can use this Chrome extension. The extension automatically gives you a short LCP, CLS, and FID audit.

Simply add the extension to your toolkit, visit a web page, and click on it to trigger the overview.

Chrome Core Web Vitals extension

Again, the real-user data (i.e., field data) for this extension also comes from the CrUX.

Core Web Vital Metrics Explained

To optimize your Core Web Vitals effectively, it's essential to understand each metric and its significance.

But first…

What does it mean to pass Core Web Vitals?

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), First Input Delay (FID), 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, FID, 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.

75th percentile illustrated

Let's see what this means in terms of each Web Vital metric.

What is Largest Contentful Paint (LCP)

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. 

Example of the largest element triggering LCP

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.

LCP threshold

How to improve Largest Contentful Paint (LCP)

Here are a few ways to reduce your LCP:

  • Get a better hosting plan. Fast server response time (TTFB) is essential for site speed. If you’re on a slow, shared hosting server, consider upgrading to a dedicated plan;
  • Implement Critical CSS. Critical CSS means finding the CSS necessary to load above the fold content and inlining it in the head tag. This technique improves actual and perceived performance;
  • Optimize images. Often the biggest reason for slow websites, images must be compressed, resized and converted to the right format;
  • Preload hero images. Hero images are usually the most meaningful above the fold elements, so loading them faster is crucial for the user experience. Using link rel=preload, especially for hero images loaded with CSS or JavaScript can significantly reduce LCP.
  • For a deeper dive, check out our post on the five proven ways to speed up LCP. 


What is First Input Delay (FID)

First Input Delay measures the time it takes for a web page to respond to a user's first interaction, such as clicking a button or selecting a menu item.

It gauges the responsiveness of a website and indicates how quickly users can interact with it. This metric tracks delays only after distinct actions like clicks or taps. Scrolls and zooms don’t affect FID.

To be in the green zone, a page's FID should be less than 100ms for 75% of all recorder page loads.

FID threshold

Now, FID tracks the delay after only the first input. That’s because first impressions are everything on the web. Users instantly leave and, in most cases, don’t return if a website frustrates them on their first visit.
That’s why keeping a low FID is crucial.

How to improve First Input Delay (FID)

Here’s what you can do to optimize your FID score:

  • Break up Long Tasks: As I said, this should be your primary concern. Long Tasks prevent the Main Thread from responding to user interactions in time. By breaking them up, you can significantly improve the performance of your website;
  • Minify and compress code files: Minification removes unnecessary parts from the code like whitespace and line breaks. Compression also modifies code files, making them smaller in size. Some hosting and CDN providers implement these techniques by default;
  • Delay or remove non-critical third-party scripts: Third-party scripts can sometimes prevent your own scripts from executing on time. Consider which scripts provide the most value to the user and prioritize them. In most cases, ad and pop-up scripts aren’t at the top of the list;
  • Use web workers: Web workers allow you to run scripts in the background without affecting the Main Thread. Moving non-UI operations to a background thread is generally a good practice;
  • Optimize CSS: While JS is the main villain for FID, CSS is also render-blocking by default. That’s why excessive CSS can also hurt the user experience. Besides implementing Critical CSS and minifying and compressing CSS files, it’s also worth reducing the unused CSS on your site.

What is Cumulative Layout Shift (CLS)

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.

CLS threshold

To compute your CLS score, Google answers two questions:

  • How much of the viewport did the shift affect?
  • How far did the elements move during the shift compared to the viewport?

The overall CLS score is the sum total of all individual unexpected layout shift scores. Here's how an unexpected layout shift looks:

Unexpected layout shift example

PageSpeed Insights can show you which elements contribute to CLS on a page:

Avoid large layout shifts PSI warning

This CLS generator is also great for finding layout shifts. It computes your overall CLS score and shows shifting areas.

Large layout shifts example

How to fix Cumulative Layout Shift (CLS)

Here are a few optimizations that can reduce layout shifts significantly:

  • Avoid inserting ads and pop-ups above other content. The GIF above (from is a perfect example of why you shouldn’t do this. Inserting content at the top of a page causes everything below to shift, resulting in a bad Core Web Vitals CLS score;
  • Add width and height attributes to images and videos. These attributes help the browser allocate the correct amount of space for each element in advance. This reduces layout shifts significantly;
  • Reserve space for ads, iFrames, and dynamic content. Similar to images and videos, these elements can also cause layout shifts if they don’t have reserved space. Use containers with proper dimensions and the overflow: hidden property to ensure the content doesn’t overflow its container;
  • Optimize font delivery. Using link rel="preload" and font-display: optional in combination can prevent layout shifts and flashes of invisible text. Check out our article on 8 font loading strategies that you can implement to improve your Core Web Vitals.

You can find more examples and best practices in our guide for fixing CLS issues.

How to Optimize Core Web Vitals in 2023 (Technical and Strategic Elements)

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.

Prioritize performance-related tasks in your development plan

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.

Milliseconds make millions quote
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

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:

  • Minify and Concatenate Files: files by removing unnecessary characters, spaces, and comments. Additionally, combine multiple CSS and JavaScript files into a single file each to reduce the number of HTTP requests needed for loading resources.Minify your CSS and JavaScript
  • Enable Gzip Compression: Enable Gzip compression on your web server to compress your website's files before sending them to the user's browser. This significantly reduces file sizes and speeds up the transfer of resources.
  • Reduce HTTP Requests: Minimize the number of HTTP requests needed to load your web pages. This can be achieved by combining CSS and JavaScript files, utilizing CSS sprites for multiple images, and reducing the number of external scripts and stylesheets.


  • Optimize Server Response Time: Improve your server's response time by optimizing your database queries, utilizing caching mechanisms, and upgrading your hosting plan if necessary. A fast server response time contributes to overall page speed.
  • Reduce Redirects: Minimize the number of redirects on your website as each redirect adds additional round trips and increases page load times. Update internal links and ensure they point directly to the final destination.
  • Use Browser Caching: Set appropriate caching headers to allow the browser to store static resources locally. This enables returning visitors to load pages faster by retrieving resources from the browser cache instead of making new requests to the server.
  • Optimize images: Reduce their file size by compressing them without compromising visual quality. Use modern image formats like WebP that offer better compression. Consider using srcset attributes to serve different image sizes based on the device's screen resolution.

Optimize your site’s speed and performance with 35+ advanced features. Get started with NitroPack →

Analyze CSS Files and Third-Party Scripts

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.

Identify the Largest Content Element on Each Page

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”.

Largest Contentful Paint element PSI diagnostics
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."

Chrome DevTools 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.

Identify LCP element via DevTools

Optimize for Mobile Devices

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:

  • Responsive Design: Implement a responsive web design that automatically adapts your website's layout and content based on the user's device screen size. This ensures that your website is optimized for different mobile devices and eliminates the need for separate mobile-specific versions.
  • Mobile Caching: Leverage caching techniques specifically designed for mobile devices. Implement mechanisms like AppCache or Service Workers to store static resources on the user's device, enabling faster subsequent page loads and offline access to content.
  • Enable Accelerated Mobile Pages (AMP): AMP is an open-source initiative that provides a streamlined version of web pages, optimized for fast loading on mobile devices. It utilizes a restricted set of HTML, CSS, and JavaScript to ensure optimal performance.
  • Limit or Remove Pop-ups: Mobile screens have limited real estate, and pop-ups can be intrusive and negatively impact user experience. Consider limiting or removing pop-ups on mobile devices to provide a smoother browsing experience.
  • Simplify Navigation: Simplify the navigation menu on your mobile site. Use a collapsible menu or hamburger icon to hide less important menu items, reducing clutter and improving usability.
  • Optimize Tap Targets: Ensure that clickable elements, such as buttons and links, have an appropriate size and spacing for mobile devices. Make tap targets large enough to accommodate finger interactions, minimizing the risk of accidental taps.

Ensure Visual Stability and Minimizing Layout Shift

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:

  • Use CSS for Layout and Dimensions: Avoid relying on JavaScript to set layout and dimensions of elements on the page. Instead, use CSS for defining the size and positioning of elements. This helps prevent unexpected layout shifts caused by delayed JavaScript execution.
  • Load CSS Asynchronously: Load your CSS files asynchronously to prevent render-blocking. By appending the CSS files dynamically or using techniques like "preload" or "prefetch," you can ensure that CSS doesn't delay the rendering of the page content, reducing the chances of layout shifts.
  • Set Dimensions for Ads and Embedded Content: If your website includes ads or embedded content, such as videos or iframes, ensure that you set explicit dimensions for these elements. This helps prevent layout shifts when the content loads and avoids subsequent content reflow.
  • Use the aspect-ratio CSS Property: The aspect-ratio CSS property allows you to define the aspect ratio of an element, such as an image or a video. By specifying the aspect ratio, you can reserve the necessary space for the element, reducing layout shifts when the content loads.
  • Optimize Third-Party Embeds: If your website relies on third-party embeds, such as social media widgets or interactive maps, optimize their loading and rendering by applying techniques like lazy loading.

In addition to technical elements, strategic approaches can further enhance Core Web Vitals optimization.

Enable Caching

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.

Leverage a Content Delivery Network (CDN)

Implement a CDN to distribute your website's content across multiple servers worldwide, reducing latency and improving overall performance.

Utilize Lazy Loading When Appropriate

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.

Google Core Web Vitals and WordPress

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 May 2023, 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.

CWV tech report

Good Core Web Vitals on desktop comparison results between WordPress, Shopify, Squarespace, 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:

“We believe that WordPress needs an official Performance Team responsible for coordinating efforts to increase the performance (speed) of WordPress.”

Here are some highlights from the proposal:

  • Performance is essential in user experience, and WordPress will aim to deliver a good user experience.
  • Plugins shouldn’t be responsible for achieving reasonable performance levels.
  • All WordPress users (of all types) need to be aware of how to achieve good performance that Google and visitors love.
  • The average end-user shouldn’t be obliged to become a performance expert to get good Core Web Vitals.
  • Achieving high levels of performance requires technical considerations to be part of the core platform, not “brute-forced” via third-party solutions.

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.

Speed up your WordPress site without writing a single line of code. Get started with NitroPack →

How to Improve Core Web Vitals in 2024

Core Web Vitals are constantly evolving. To stay relevant, you need to monitor for emerging metrics (or what Google calls “pending” Web Vitals) and adapt your optimization strategies accordingly.

Early on, we mentioned that First Input Delay (FID) will be replaced by Interaction to Next Paint (INP) in March 2024.

Why is Google replacing First Input Delay?

First Input Delay focuses on the first user interaction delay only which, according to Google, isn’t sufficient to represent a comprehensive understanding of how visitors experience a website.

The introduction of INP aims to better support the holistic evaluation of web performance. It will do that by considering the overall interactivity of the website factoring in any subsequent user interactions beyond the initial delay.

What you should know about Interaction to Next Paint

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:

  • Clicking with a mouse.
  • Tapping on a device with a touchscreen.
  • Pressing a key on either a physical or onscreen keyboard.

Hovering and scrolling does not factor into INP.

Although it’s hard to define what counts as “good” or “bad” with an interaction metric like INP, anything up to 200 milliseconds means your page shows good responsiveness.

INP threshold

How to prepare for Interaction to Next Paint (INP)?

The transition will require some adaptation of your optimization strategies.

To hit the ground running, start with the following as early as possible:

  • Reduce Delay in the User Journey: Whether it’s optimizing server response times, minimizng JavaScript execution, or streamlining rendering processes, your focus should be on interactivity as a whole. 
  • Evaluate Third-Party Scripts: What’s handy in terms of functionality, may also generate delays and affect interactivity. Go over your third-party services and consider parting with the ones that hinder responsiveness.
  • Improve Client-Side Performance: Optimize JavaScript code, leverage browser caching, and compress images to enhance client-side performance and impact INP.
  • Leverage Browser Features & APIs: Start with looking into service workers, cache storage, and lazy loading to improve overall performance and INP along with it.

Stay on top of the latest performance requirements with the most agile optimization solution on the market. Try NitroPack today →

Fixing Your Core Web Vitals Automatically with NitroPack

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.

Pass your Core Web Vitals on autopilot. Get started with NitroPack today →

Lora Raykova
Web Performance Buff

Lora has 7+ years of experience developing in-depth, specialized content for SaaS companies in the CEE region. She has sourced and collaborated with subject-matter experts on site speed optimization for WordPress, Core Web Vitals, and the future of web performance. "If you can't explain it to a 7-year-old, you've not researched it well enough" is Lora's guiding principle when publishing professional insight for complex technical topics.