Special Black Friday Offer

Get NitroPack with up to 37% OFF

Days
:

Hours
:

Minutes

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

Last updated on Oct 30th, 2024 | 12 min

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!


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

  • Largest Contentful Paint (LCP) measures loading speed
  • Cumulative Layout Shift (CLS) measures visual stability
  • Interaction to Next Paint (INP) measures page responsiveness

Core Web Vitals

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, 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:

  • 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).
  • On March 12, 2024, Google officially replaced FID with INP. 
     

Why do Core Web Vitals matter?

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.

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

PSI Core Web Vitals widget

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


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, INP, 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.
     

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

Web Vitals Chrome 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), 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.

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 Interaction to Next Paint (INP)

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.

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.

INP threshold

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.


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 creativebloq.com) 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 2024 (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 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.

Core Web Vitals Technology Report CMS comparison

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:

“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 →

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
User Experience Content Strategist

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.