Improve Core Web Vitals and User Experience (Webinar Recap with Google & NitroPack)

Last updated on Sep 13th, 2023 | 7 min

It’s been over 3 years since Google introduced Core Web Vitals – the performance metrics that completely changed how we optimize our websites.

Today, we look back at how many lessons we’ve learned and continue developing optimization features and resources to help you move the needle where it matters most.

And who better to pass the knowledge with than Google themselves?

On August 16th, we launched the four-part “Core Web Vitals For Your Business” webinar series.

Core Web Vitals Webinar Series with Google and NitroPack 2023

Sign up for the second episode on INP optimization with Google and NitroPack →

The replay of the first episode, “Decoding Core Web Vitals and Real-User Experience,” is now available for everyone on YouTube.

 

In the 60-min session, Google’s top minds, Barry Pollard and Adam Silverstein, together with NitroPack’s CEO, Georgi Petrov, and CTO, Ivailo Hristov, discussed:

  • New insights directly from the Core Web Vitals realm
  • Fresh real-user data detailing the impact of Core Web Vitals on business metrics
  • Real-time, actionable demonstrations you can use for your projects

Read on for the webinar highlights and an actionable checklist of performance recommendations and techniques for improving your Core Web Vitals.

 

Why Passing Core Web Vitals Matters to User Experience

Google’s Core Web Vitals – Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) – are directly tied to measuring user experience on your website.

Google Core Web Vitals Performance Metrics

Passing them is pivotal for ensuring a seamless browsing experience for your visitors, and more specifically:

 

1. Fast Loading Performance (Largest Contentful Paint or LCP)

  • What it measures: LCP gauges how long it takes for the main content of a page to load. A good LCP ensures that users can see and interact with the content swiftly after they navigate to a website.
  • Impact on user experience: Slow-loading content frustrates users, leading to higher bounce rates. Quick load times signal to users that the site is well-maintained and values their time.

 

2. Instant Interactivity (First Input Delay or FID)

  • What it measures: FID measures the time from when a user first interacts with a page (e.g., clicking a link or tapping a button) to the time when the browser starts processing that interaction.
  • Impact on user experience: Delayed response to user actions can make a website feel sluggish and unresponsive. A low FID ensures the site feels snappy and reacts quickly to user inputs, fostering uninterrupted user engagement (and far fewer rage clicks).

 

3. Visual Stability (Cumulative Layout Shift or CLS)

  • What it measures: CLS evaluates the visual stability of a page. It measures unexpected shifts in the content, which can happen if elements get loaded asynchronously or added to the viewport, pushing the existing content around.
  • Impact on user experience: A stable layout prevents users from misclicking or becoming disoriented due to unexpected content shifts. A low CLS ensures users can read and interact with content without disruptions, enhancing their overall browsing experience and decreasing bounce rates.

 

In essence, Core Web Vitals aim to quantify critical aspects of the user experience, ensuring that web pages are fast to load, responsive to user actions, and visually stable.

Websites that prioritize and achieve good Core Web Vitals metrics scores offer a frictionless user experience, leading to increased user engagement and improved profitability.

Boost your site’s performance and pass Core Web Vitals with NitroPack →

How do Core Web Vitals Impact Your Online Business

Imagine two users landing on your website.

For one of them, the home page loads in under 2 seconds, there is no lag or unexpected content shifts when navigating to subsequent pages, and all the buttons work as expected.

The second user, however, has to wait about 5 seconds for the page to load. Then, they try to navigate to another page but see a blank screen instead. They hit refresh and wait a little longer before switching to another tab.

Care to guess which one has a higher chance of coming back?

We monitored 245,433 unique site visits across three ecommerce websites to find the correlation between slow loading speed and drop-off rates:

 

  • Finding #1: Users who experienced a load time of 3 seconds or less visited 60% more pages.

Number of Page Views Per Page Loading Speed

  • Finding #2: 50% more visitors drop off when a page loads in 3 seconds in comparison with a 2-second page load time.

Visitor Drop-Off Rate per Page Loading Speed

  • Finding #3: Visitors lose patience and disproportionally start to abandon a web page at 2.75s of the page load, as measured by the Visitor Patience Index created by NitroPack’s CEO, Georgi Petrov.

Visitor Patience Index per Page Speed Time

In a nutshell, Core Web Vitals reflect how good (or bad) the experience for your site visitors is whenever they land on your website.

Failing Core Web Vitals means you risk losing a substantial portion of your site visitors, i.e., opportunities to turn them into customers.

 

Measuring Core Web Vitals: Guiding Principles

Google’s developer relations engineer Barry Pollard opened up the session with an important note:

“Each of the Core Web Vitals metrics measures an aspect of page experience that is easily explainable at a high level to all web users, and not just developers or web performance experts.” — Barry Pollard

Barry’s top recommendations when it comes to understanding Core Web Vitals are:

 

1. Pay attention to all your web pages

Unlike other specific metrics, Core Web Vitals apply to all web pages, so you may have a better understanding of the entire user experience across your website.

Web Vitals reflect your site’s performance, and no single number can measure it. Instead, think of performance as a distribution of all types of experiences (the good and the bad) that happen on your website.

The Core Web Vitals metrics measure all these experiences, and the number they provide is the 75th percentile of these experiences.

75th Percentile Calculations Core Web Vitals
 

This means that at least 75% of users must experience a page load in just under 3 seconds so that your LCP score is marked as “Good.” The same goes for FID and CLS.

By learning to look at the collective experience on your website and factor in all your web pages when optimizing for Core Web Vitals, you ensure consistent delightful browsing.

 

2. Be aware of where your Core Web Vitals data is sourced

Core Web Vitals are not what “Google thinks.” They are what your site visitors experience.

That’s why clearly differentiating between lab data and field data is important.

Core Web Vitals are generated with field data, i.e., real people interacting with your website.

Lab data for Core Web Vitals, on the other hand, is generated in a testing environment via simulations. While this might be a great way to troubleshoot and get a feel of how well a new optimization is working, it does not indicate how users will experience your website in the real world.

Tools like Google PageSpeed Insights, Google Search Console, Site Kit, CrUX Dashboard, and CrUX Report API provide you with field data.

Tools that Use Core Web Vitals Field Results Data

Tip: Don’t mistake the different data types in your Google PSI report. First comes the Core Web Vitals widget with field data. Then comes the breakdown according to lab data.

This is field data from CrUX:

Core Web Vitals Report in Google PSI with Field Data

This is lab data from Lighthouse:

Performance Score in Google PSI with Lab Data from Lighthouse

 

3. Don’t focus on a single Core Web Vitals metric only

To hyper-fixate on one of the Web Vitals metrics is like having a killer SEO strategy and not caring what happens after people click on the search result.

Improving performance is an ongoing effort, and even though one of the metrics may be lagging behind, never lose the other two out of sight.

Or you might just fix one metric and worsen another in the process.

Also, don’t forget to revisit your performance report every 28 days. You don’t want to return after several months and see all your Web Vitals turned red and not know why, right?

 

Improving Core Web Vitals: 4 Techniques That Make a Difference

NitroPack’s CTO and creator of breakthrough optimizations like Adaptive Image Sizing and Font Subsetting, Ivailo Hristov, demonstrated his favorite techniques to improve Core Web Vitals.

 

1. Optimize TTFB for Quick Visual Feedback

Although not a Web Vitals metric itself, Time to First Byte (TTFB) greatly impacts your LCP score.

In reality, your site visitors don’t all live in the same country, use the latest smartphone, or have access to the same network speed. Choosing a high-quality CDN provider can neutralize that and ensure your website is served as fast as possible, regardless of outside factors.

In the example below, a website with a CDN enabled provides instant visual feedback, signaling to the user that the website is loading. Returning to the Visitor Patience Index from earlier, this minor fix offers a big payout in the buyer’s journey.

 

Time to First Byte Results with and without CDN for HTML
 

2. Prioritize Rendering Above-The-Fold Content

ATF content directly correlates to your Largest Contentful Paint score. 80% of websites out there have an image as a most impactful element, and the example below shows just how much of a big difference a one-second load time makes.

 

Largest Contentful Paint Results with and without Optimizations

The website on the left has an LCP of 3.5s (without optimizations), and the one on the right – 2.5s (with optimizations).

Both websites start to load simultaneously, but because of several handy techniques, users that browse the second website will have a snappier experience.

And even though there’s only a one-second difference in LCP score between the websites, users that land on the first one will perceive the website as slow.

To make sure this doesn’t happen to you, Ivailo suggests you start with the following techniques:

 

3. Unblock the Main Thread to Ensure Fast Response to User Input

Now that you’ve got your visitors’ attention, it’s time to guarantee they don’t perceive it as slow because of poor interactivity.

Even though the FID threshold is set at 200ms, Ivailo advises we aim for 100-150ms for instant-like experiences by:

And even thought the human eye might not register it right away, simply opening the menu on mobile might be the cause for poor responsiveness metrics as demonstrated below.

Interaction to Next Paint Optimization Demonstration

4. Improve Content Rendering to Minimize Website Jank

Another reason users often perceive a website as slow is stuttering transitions, animations, and janky scrolling. It also often contributes to unwanted layout shifts, which might cause CLS issues.

In the example below, the layout on the left is slow to render and on the right – snaps right into the viewport.

Cumulative Layout Shift Optimization Demonstration

To guarantee a consistent framerate and eliminate unexpected layout shifts, you should first:

Pass Core Web Vitals with 35+ automated performance optimizations with NitroPack →

Interaction to Next Paint (INP): New Core Web Vitals Metric Explained

Interaction to Next Paint is officially announced to replace FID as a more comprehensive responsiveness metric on March 2024.

As part of Google’s efforts to fully capture user experience, INP measures user interactions throughout the entire session and benchmarks the worst one.

Interaction to Next Paint Responsiveness Metric Threshold

The interactions that INP considers for calculations are:

  • Clicking with a mouse;
  • Tapping on a device with a touchscreen;
  • Pressing a key on a physical or digital keyboard.

The next episode in the “Core Web Vitals For Your Business” series is dedicated to the INP metric. Register now and learn how to pass it before everyone else.

Optimizing Interaction to Next Paint Webinar with Google and NitroPack

Master INP optimization with Google and NitroPack. Sign up for the webinar for free →

Core Web Vitals FAQ

 

How can a small business pass Core Web Vitals?

If you’re just starting out and still not attracting much organic traffic to your site, chances are you will see “No data available” in your Google PageSpeed Insights report.

This means there is insufficient data in the CrUX report to provide meaningful information for the chosen device type (desktop or mobile). While you wait for the report to collect information from real-user interactions, you can refer to the Diagnostics and Opportunities section and improve key issues there.

 

How can I improve CLS on a website with ads - iframe?

Ads that dynamically resize or don't have predefined spaces are common culprits for CLS issues. Here are some steps to address and improve CLS for such websites:

  • Explicitly define the size (width and height) of the ad iframes in the CSS or inline styling
  • Try to reserve space for the largest potential ad size or consider a default "most common" size if you’re working with dynamic ads often
  • Use placeholders with a defined size that gives users a visual indication that content (like an ad) is about to appear there. 
  • Whenever possible, use ad units that have a fixed size
  • Avoid positioning ads near the top of the viewport
  • Lazy load ads below the fold
  • Consider using sticky ad positions, especially for vertical ads on the sides

 

Is using a CDN worth it if my website is targeting only one country?

Although targeting only one country, you can still benefit from using a CDN. For instance, CDNs can handle a lot of the static content delivery, reducing the strain on your main server. This means your website is less likely to slow down or crash during high-traffic times. Also, even within one country, there can be differences in connection speeds and distances from the primary server. A CDN has multiple points of presence, potentially reducing the distance data must travel.

 

What are good practices to consider in terms of performance when building a page in WordPress?

Top recommendations include using a lightweight setup (optimized page builders and themes), installing essential plugins only, investing in caching, and a high-quality CDN service.

 

What are the direct consequences of not passing Core Web Vitals tests? How long do we have to solve the issues?

Failing to meet the recommended standards for Core Web Vitals can have several harmful consequences, like poor user experience, plummeting conversions and engagement, negative effects on brand perception, a drop in search rankings, and decreased quality scores in your SEA.

While there's no set "deadline" to fix Core Web Vitals issues, it's in the best interest of website owners to address them as soon as possible to provide an excellent user experience and keep their bottom line booming.

 

Do visual builders like Elementor or similar harm Core Web Vitals?

Visual builders like Elementor, WPBakery, Divi, and others have made it easier for users to design and customize their WordPress sites without writing code. However, while they are powerful and user-friendly, they can sometimes have implications for site performance, like:

  • Loading additional CSS and JavaScript files to support functionalities
  • The builders may still load all potential resources regardless of whether you’re using some features or not, which results in redundant or unused code
  • Dynamic elements like animations, sliders, or pop-ups can contribute to a higher Cumulative Layout Shift (CLS) if not properly optimized.
  • Widgets or plugins can introduce third-party scripts which might not be optimized for performance

In conclusion, while visual builders can introduce performance challenges, it's entirely possible to use them and still have a well-optimized site. The key lies in regular performance checks, fine-tuning, and using best practices.

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.