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

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.

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), Interaction to Next Paint (previously measured by First Input Delay (FID)), and Cumulative Layout Shift (CLS) – are directly tied to measuring user experience on your website.

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

• What it measures: INP assesses a page's overall responsiveness to user interactions by observing the latency of all interactions during a user's visit to a page. The final INP value is the longest interaction registered.
• Impact on user experience: A low INP score indicates a more responsive and user-friendly website. Snappy interactions provide users with a smoother and more enjoyable browsing experience, where confusion and rage clicks rarely occur.

 

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.

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

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

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

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.

 

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.

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:

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

 

 

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.

 

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:

• Optimize images (serve them in WebP format and use Adaptive Image Sizing to downsize ATF images)
• Set Critical CSS
• Optimize your fonts

 

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:

• Reducing the DOM size
• Avoiding long JavaScript tasks
• Removing unused CSS

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.

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.

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

• Remove Third-Party Scripts 
• Lazy load below-the-fold content
• Consider experimenting with different settings and alternative light-weight tools in a staging environment to reduce hiccups on your live website

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

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

On March 12, 2024, Interaction to Next Paint officially replaced FID as the new, more comprehensive responsiveness metric.

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

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.

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