Core Web Vitals Assessment Failed: Let’s Fix It!

Ever since Google made the page experience metrics a ranking signal, it’s a reason to fret more over SEO rankings, the number of leads, the user experience they get on your website, and, eventually, profit. Each and every website team at some point has seen this unpleasant “Core Web Vitals Assessment: Failed” verdict.

As of August 2023, about 55% of websites had trouble passing the Core Web Vitals assessment (data from the Chrome User Experience Report). Probably, many of them don’t even try. But for those relying on organic traffic and sincerely wanting to deliver a good customer experience, Core Web Vitals can’t vanish from the agenda.

In this article, we’ll brush up on the Core Web Vitals concept (Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift metrics). Then, we'll talk about the upcoming changes in metrics (Interaction to Next Point (INP) introduction), discuss the peculiarities of measuring CWVs accurately, and choose go-to strategies to combat subpar Core Web Vitals scores.

Core Web Vitals Metrics 101

1.1 LCP, FID/INP, and CLS

A good UX has always been vital for websites. In 2021, Google amplified its significance further with a game-changing page experience update to its ranking algorithm. From then on, striving for a decent user experience turned from a declaration to a real business goal.

Several user-centric signals called Core Web Vitals (+ some more web vitals like Time to First Byte (TTFB) and First Contentful Paint (FCP) came into play. Let’s quickly recall what they’re about.

Largest Contentful Paint (LCP)

This metric gauges the loading speed of a web page, namely how long it takes to render (paint) the biggest piece of content in the viewport, be it an image, video, or text block. When LCP is within the "Good" time frame, then your website's perceived performance is fine: users see the largest chunk and start getting meaningful info fast enough.

Largest Contentful Paint score thresholds in Core Web Vitals:

• Good: up to 2.5 seconds;
• Needs improvement: from 2.5 to 4.0 seconds;
• Poor: more than 4.0 seconds.

First Input Delay (FID)

It's an indicator of web pages' interactivity in Core Web Vitals. FID is the time between the very first user's action on the page and the start of processing it. Clicking, pressing a button, switching a toggle (or using another control), and typing are eligible interactions while scrolling and zooming in and out aren't.

First Input Delay score thresholds in Core Web Vitals:

• Good: up to 100 milliseconds;
• Needs improvement: from 100 to 300 milliseconds;
• Poor: more than 300 milliseconds.

Important! In March 2024, FID will be replaced by another web page responsiveness metric called Interaction to Next Paint (INP) in the Core Web Vitals assessment. More on it below.

Cumulative Layout Shift (CLS)

This metric indicates the visual stability of your web pages. It measures whether content unexpectedly moves during loading and while users interact with the page.

Cumulative Layout Shift score thresholds in Core Web Vitals:

• Good: up to 0.1;
• Needs improvement: from 0.1 to 0.25;
• Poor: more than 0.25.

Interaction to Next Paint (INP)

This metric is about to substitute FID as a more precise measurement of page interactivity. It's planned to happen in March 2024, but you can already see INP in the Google PageSpeed insights reports and ponder how to improve it. The INP value is the longest latency among all interactions users perform while staying on the page.

Interaction to Next Point score thresholds in Core Web Vitals:

• Good: up to 200 milliseconds;
• Needs improvement: from 200 to 500 milliseconds;
• Poor: more than 500 milliseconds.

1.2 How Influential Are These Metrics?

When it comes to companies operating primarily online, Core Web Vitals metrics should be among the top priorities for all key departments and team members. For executives who aim at business growth. For SEO specialists who try to improve a site's search engine rankings. For marketers wanting to see more leads and for sales working on closing more deals. For designers and developers who create/change pages. Core Web Vitals assessment affects all these aspects of the website's well-being. Let's see how.

Elevated Positions in Google

As a ranking factor, Core Web Vitals have a direct impact on how visible your site is organically in SERPs. A good Core Web Vitals report helps receive a boost in search rankings. A site with a poor user experience confirmed by subpar CWV scores might be penalized or simply lag behind those who care about passing the assessment. We must note that quality content remains the topmost factor, but there are hundreds of them, so the best strategy is to enhance as many as you can.

Enhanced User Experience

Google presents Core Web Vitals as metrics focused on improving the user experience. It wants to show not only relevant but also fast sites that are convenient to use on desktops and, even more importantly, smartphones. And it's a win-win situation: when people are pleased with their web experiences, they're more willing to spend money/subscribe/read, making businesses more successful.

Google is collecting case studies on CWV's business impact. Let's see what some websites achieved by resolving Core Web Vitals issues:

• After improving LCP by 31%, Vodafone Italy made 8% more sales;
• After improving CLS by 10 times and LCP by two times, AliExpress noticed a 15% lesser bounce rate;
• After improving CLS by 15%, iCook saw a 10% increase in ad revenue;
• After improving LCP by 55%, Tokopedia got a 23% longer average session duration;
• After improving LCP by 40%, Nykaa achieved 28% more organic traffic.

The list goes on and on. And the very first step in order to achieve and then keep a good website health score should be to pick suitable tools and interpret the Core Web Vitals audit correctly.

1.3 Intricacies of Measuring Core Web Vitals

Now, we'll pick apart some peculiarities of assessing Core Web Vitals metrics with various tools. The catch is that during examination, you're most likely to come across some discrepancies between data taken in different ways. Our goal is to reduce distortion in your data and, hence, future optimization decisions.

Field vs. Lab Data

You can measure Core Web Vitals two ways: in the field and in the lab, and the CWV scores might turn out to be quite different. Let's define what the former and the latter data types are all about.

Field data reflects the real-world UX. In other words, it records the actual page experience people get when interacting with your website in different internet conditions and from various devices. The data is aggregated in Chrome User Experience Report (CrUX) and is available in a spectrum of Google's tools (more on that later).

This type of data is what you need to focus on primarily because:

• Being collected from real users visiting your web pages, it represents actual user experience and UX issues;
• Google's Core Web Vitals assessment is based exactly on field data. Google uses it for ranking purposes.

Lab data is obtained in a simulation: it's a single-page load test performed in predetermined conditions. You can see this data in Google's PageSpeed Insights tool (the "Diagnose performance issues" section), Google Lighthouse, and Chrome DevTools. While Core Web Vitals assessed this way don't showcase accurately what UX people get on a website, data gained in a controlled environment is valuable for these specific aims:

• It's needed for safe page testing in the development process prior to releasing changes;
• It helps developers to monitor whether their fixes have an intended impact;
• It's useful in the debugging process.

But, and this is essential, lab and field data aren't interchangeable. Most of the time, the measurements will be very different as well.

Field Data Tools

A mindful approach to testing is key to working through the Core Web Vitals issue with positive outcomes. And conversely, overlooking is a surefire way to wrong decisions and senseless optimizations.

First and foremost, utilize tools powered by Chrome User Experience Report (CrUX). It's a massive Google dataset gathering real-world user experience metrics for millions of websites accessed by people from all over the globe via the Chrome browser. Being a public dataset, CrUX is often used to analyze competitors and keep tabs on trends in UX and website performance. Here are two of the most popular tools based on CrUX:

• PageSpeed Insights. It compiles your site's Core Web Vitals assessment for desktop and mobile devices based on the past 28 days. Apart from field data, it also presents lab test results. Plus, you get concrete advice on what issues to resolve.

• Search Console (the Page experience and Core Web Vitals reports in particular). Firstly, they aid in monitoring the overall website search performance in terms of page experience: you see the percentage of "Good URLs" that pass Core Web Vitals. Secondly, they show pages with poor Core Web Vitals scores requiring attention. Thirdly, Search Console is a great tool for long-term critical observation of historical data, fluctuations, and progress/regression. (That's how the reports look as of November 2023, after a resent update).

These are must-haves for any website. But you might go further (and Google encourages you to) and set up collecting more and more precise RUM (Real User Monitoring) data. It differs from CrUX in one crucial aspect: capturing a more comprehensive data array.

• CrUX has limitations. For starters, it gathers data from Chrome browser users only. Apart from that, the whole Chrome web experience for iPhone users isn't included because of the tech peculiarities of iOS. To clarify: Android and desktop platforms (Windows, MacOS, Linux, and ChromeOS) are all included in CrUX.
• A RUM solution fetches more data: from non-Chrome browsers (Opera, Safari, Firefox, etc.) and from all devices customers/prospects use to access your site. Therefore, you have a catch-all picture of what's going on with the Core Web Vitals assessment for all users to scrutinize and solve issues more efficiently.

To gain a full spectrum of RUM data, businesses take one of two paths:

• Utilizing the web-vitals JavaScript library. It's added to a website's codebase to gather field data on CWVs and then report it to your Google Analytics, for instance (or a RUM provider). It works in real-time and captures as much user data as possible.
• Turn to RUM providers that specialize in setting up, aggregating, and analyzing RUM data for you.

Nuances to Bear in Mind

To ward off the Core Vew Vitals assessment nosedives, a website's team should be aware of several peculiarities in the way the data is collected and interpreted.

• One failed CWV metric equals failing the whole assessment. Even a combination like "one is "orange" and the rest are "green" returns the "Failed" results. So you need to tinker with all three, plus the pending Core Web Vitals metric INP, other Web Vitals, mobile-friendliness, and so forth.
• The 75th percentile vs. median/average. Accurate data interpretation is key, especially when measuring Core Web Vitals with RUM solutions. Google considers the assessment to be passed if, in 75% of page visits, CWV metrics were within the "Good" thresholds. Don't calculate averages or medians.
• The 28-day delay. When running another PageSpeed Insight test and monitoring Core Web Vitals in Google Search Console, remember that it's based on the CrUX data collected over the last 28 days. So, if you optimize Core Web Vitals today, the full impact of these changes will be seen in these reports over the course of the next 28 days. However, the lab data in PSI, as well as your RUM data, will reflect the results immediately.

2. Top Five Fixes to Improve Core Web Vitals Scores

What you need is a well-conceived optimization strategy covering many aspects of the website's performance and UX design. Let's outline the directions for tackling the "Core Web Vitals assessment failed" situation. Implementation will vary depending on the platform and website/web app type, but basically, these are areas for improvement each online business has to focus on CWVs-wise.

2.1 Optimize Images

To make for a better largest contentful paint (LCP) score and accelerate the overall site loading speed, your graphics must be as lightweight and responsive as possible while preserving high quality. What you can do:

• Compress images. Choose tools providing lossless compression over lossy to minimize quality sacrifices. Explore tools like TinyPNG/TinyJPG, Compressor.io, ImageOptim, Squoosh, and ShortPixel.
• Change formats. WebP (developed by Google) gives the best size/quality trade-off compared to JPEG or PNG (which are also okay). Another option is the AVIF format, which optimizes GIF better and offers a more efficient lossless compression than WEBP. Its browser support is still limited (Chrome + some more), but with some workarounds, you can already utilize it. For logos and icons, use SVG, a vector-based format that boasts small file sizes and the ability to scale up without quality loss.
• Implement lazy loading. This technique allows us to delay loading offscreen content until users "approach it" (usually scroll down). With fewer assets for the initial download, critical ones (including LCP) load faster. The above-the-fold website content should never be lazy-loaded.
• Choose the optimal size. For example, an image displayed in a slot of 100 by 100 pixels should be exactly 100 by 100 pixels. If we place a large image there, we spend more server resources in vain.

2.2 Deal with Fonts

Fonts play an important role in page rendering, hence influencing the Core Web Vitals assessment. Some hacks to try:

• Use a modern format. WOFF2 is optimal for web pages since it offers better compression. It's the fastest font format as of now.
• Preload fonts. There are several HTML resource hints to perform some loading in advance: Preload, Prefetch, and Preconnect. Using them, we tell the browser to get some assets we'll need later. For instance, you might preload fonts that will definitely be needed as soon as possible.
• Have fonts on your server. Sometimes, moving third-party resources to your server is a good idea. It may be faster to download a font from there compared to fetching it from Google Fonts' CDN. It's because fetching from a third party requires DNS resolution (translating a domain name to an IP address), adding extra latency.
• A bonus tip: mind custom fonts (if you use them). The problem is that until your fonts are loaded, users won't see the text. To prevent this from happening, set system fonts: Arial/ Times New Roman/Calibri on Windows; Helvetica/San Francisco on Apple devices. In this case, visitors will see the text in a system font, and once the custom one is loaded, it will replace the default one.

2.3 Declutter JavaScript and CSS

Next up, ubiquitous JavaScript and CSS code oftentimes negatively impact Core Web Vitals assessment. Why? Because they may block the rendering process, threatening to worsen the load time, page interactivity, and visual stability. There are a bunch of tips on how to deal with render-blocking resources:

• Defer or async non-essential JavaScript. This way, you prioritize the loading of HTML, critical CSS, and JS, making the page good-looking and interactive faster. Non-critical resources (like a feedback widget, chatbot, etc.) will be fetched after the initial load.
• Use JS Bundling. In simple terms, it's compiling several JS scripts into fewer files to reduce the number of server requests. It results in speeding up the page load time and is often combined with deferring or asynchronous loading techniques.
• Minify JS and CSS files. Shrinking the size of JavaScript and CSS is always a nice idea as it boosts the loading speed. Also, consider removing unused/unnecessary CSS and JavaScript files.
• Revise third-party scripts. Websites have extra code embedded for purposes like analytics or advertising, displaying social media widgets, and so on. They can make your site slower, so keep tabs on them and delete redundant code.

2.4 Improve Server Response Time

Slow server response time is another issue to rack your brains about. Ensuring each web page starts to load quickly enough is crucial for reaching a better LCP and FID/INP. A couple of universal tips on this matter:

• Change a hosting plan. Your current hosting service can be a real obstacle, especially if the website is scaling up or is getting more popular or/and experiencing traffic spikes. Shared hosting is applicable to small businesses only, while mid-sized and enterprise-level ones should opt for a Virtual Private Server (VPS), dedicated, or cloud option for better server performance.
• Use a Content Delivery Network (CDN). If you serve customers from different countries/continents, having a CDN is a must. It's a number of servers in different locations aimed at storing cached content (from images, CSS, and JavaScript files to whole pages in some cases) and retrieving assets from the nearest ones to users.
• Improve caching. There are many levels on which you can implement caching to boost server response time. For instance, server-side and database caching save the most sought-after queries and their results to avoid wasting server resources on repetitive calculations.
• Use a modern compression tool. Typically, servers compress assets like HTML, JSON, JS, and CSS via GZIP, but there is a more sophisticated option called Brotli (developed by Google). It guarantees smaller file sizes and faster data transmission compared to GZIP.

In our universal website performance optimization guide, we discuss some of these recommendations in more detail.

2.5 Avoid Layout Shifts

Few things are as annoying as a web page that jumps out of the blue and shows new content. If such layout shifts occur somewhere near buttons, links, and controls, you even risk provoking wrong actions, which is a mortal sin. And your Cumulative Layout Shift score gets poor as well. To make sure your layouts are all stable, check the following:

• Reserve space for extra blocks. Let's say you want people to download your app or have some third-party ads appearing on the website. Dedicate slots for these blocks so that nothing on the page moves when these announcements are loaded.
• Use size attributes. Predetermine the width and height attributes for your photos, videos, and banners. This eliminates the need for auto-resizing based on device variations and helps prevent unwanted content shifts.

For more optimization techniques for eCommerce, read our Magento 2 Core Web Vitals guide.

3. Take Care of the Mobile Version

It deserves an extra reminder. You must have noticed that mobile websites return the "Core Web Vitals assessment failed" result more often than desktop ones, both in lab and field tests. At the same time, there's a more and more pronounced shift to the mobile visits in the traffic structure.

It means businesses, especially B2C ones, have to double down on mobile optimization and responsiveness enhancements. The mobile website should be simpler in a sense, considering the devices are smaller and the Internet conditions they're used in are unstable.

And if you happen to plan a website redesign or build a brand-new web app, consider a mobile-first approach to UX/UI design and development.

a) A desktop-first (traditional) approach is when a desktop site is slightly modified and scaled down to get a more or less passable version for smartphones.

b) A mobile-first (new) approach is starting with this mini version, putting more effort into streamlined navigation, wise space usage, and more modern design solutions. Websites created like this have way higher usability and responsiveness on cell phones, let alone tablets and laptops.

Final Word on Failing Core Web Vitals

First, you probably deemed the "Core Web Vitals assessment failed" situation and the whole page experience update as another headache. But then you likely cottoned on that Core Web Vitals bring opportunities to level up your website's speed, interactivity, and user experience. And, as a result, profitability.

If you need assistance in accurately measuring Core Web Vitals and implementing tech and design solutions geared to your website objectives, choose our Core Web Vitals optimization services.