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.
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:
Read on for the webinar highlights and an actionable checklist of performance recommendations and techniques for improving your Core Web Vitals.
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:
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.
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:
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.
Barry’s top recommendations when it comes to understanding Core Web Vitals are:
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.
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:
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?
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.
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.
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:
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.
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:
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:
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.
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.
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:
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.
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.
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.
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:
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 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.