What Are Core Web Vitals (CWVs) & How To Improve Them

Introduction

What are Core Web Vitals (CWVs)? Website performance has become more important than ever. Users expect websites to load quickly, respond immediately to their interactions, and maintain visual stability.

Google recognizes this importance and has established specific metrics to measure user experience. They are a set of three specific measurements that Google uses to evaluate how users experience your website, focusing on loading performance, interactivity, and visual stability.

Understanding Core Web Vitals

What are Core Web Vitals (CWVs) in practical terms? There are three specific metrics that Google uses to measure real-world user experience on websites. These metrics provide website owners with critical insights into how visitors interact with their pages.

Unlike other performance metrics that might only matter to developers, Core Web Vitals directly affect both user experience and search engine rankings.
The three Core Web Vitals metrics are:

• Largest Contentful Paint (LCP) measures loading performance.
• Interaction to Next Paint (INP) measures a website’s overall responsiveness. (replacing First Input Delay in March 2024)
• Cumulative Layout Shift (CLS) measures visual stability.

Let’s explore each of these metrics in detail to understand what they measure and how they impact your website’s performance.

Largest Contentful Paint (LCP)

Largest Contentful Paint measures how long it takes for the largest content element visible in the viewport to load completely. This element is typically a featured image or sometimes the main heading (H1). LCP focuses on the loading speed of what users see when they first land on your page.

For a good user experience, Google recommends that LCP occurs within 2.5 seconds or less. If your LCP takes between 2.5 and 4 seconds, it needs improvement. Anything longer than 4 seconds is considered poor performance.

The largest element on your page might be an image element, a large block of text, a video thumbnail, a background image loaded with CSS, SVG or other visual elements.

When users visit a website, they want to see the main content quickly. If they have to wait too long for the largest element to appear, they might get frustrated and leave. This is why optimizing LCP is crucial for retaining visitors and improving conversion rates.

Interaction to Next Paint (INP)

As of March 2024, Google replaced First Input Delay (FID) with Interaction to Next Paint (INP) as a Core Web Vitals metric. What Core Web Vitals (CWVs) are measuring with this change? While FID only measured the first interaction delay, INP provides a more comprehensive measure of a page’s overall responsiveness throughout its entire lifecycle.

INP assesses how quickly your website responds to all user interactions, like clicking buttons, selecting menu items, or typing in form fields. For a good user experience, your INP should be 200 milliseconds or less. An INP value falling between 200 and 500 milliseconds suggests that the website’s responsiveness could be better.

It’s important to note that INP is measured by taking the longest interaction during a user’s visit. This means that even if most interactions are fast, just one slow response can negatively impact your score. This approach ensures websites deliver consistently good interactivity rather than just occasionally.

Cumulative Layout Shift (CLS)

Have you ever tried to click a button on a webpage only to have it suddenly move because something else loaded? This frustrating experience is exactly what Cumulative Layout Shift measures. CLS quantifies how much unexpected movement of visible page content occurs during the loading phase.

For a good user experience, your CLS score should be 0.1 or less. A score between 0.1 and 0.25 needs improvement, while anything above 0.25 is considered poor. A perfect CLS score of 0 means that no elements on your page shift unexpectedly. CLS is calculated by measuring
how much the content moves (impact fraction) and how far the elements move. (distance fraction)

Common causes of poor CLS include:

• Images do not have specific dimensions.
• Ads, embeds, or iframes do not have reserved space.
• Content is dynamically injected.
• Certain web fonts are causing FOUT(Flash of Unstyled Text) or FOIT. (Flash of Invisible Text)

Why Core Web Vitals Matter for SEO

While they’re not necessarily the most significant ranking factors (Google has described them as “tiny ranking factors” or “tiebreakers”), they are part of Google’s Page Experience signals that influence how your pages rank in search results.

The page experience signals include Core Web Vitals alongside mobile-friendliness, HTTPS security, and the absence of intrusive interstitials. These factors work together to comprehensively evaluate how pleasant and easy your site is to use. Better  scores can give your site an edge in search rankings, potentially determining whether you appear first or second for competitive keywords.

More importantly, good CWV scores typically correlate with better user experience, which can indirectly improve other metrics that influence SEO performance. Lower bounce rates result from faster loading times, which signal to Google that users find your content relevant and engaging.

Longer time on page indicates that visitors are consuming your content rather than quickly leaving due to frustration with performance issues. Higher conversion rates and improved customer satisfaction contribute to better brand reputation and increased likelihood of earning backlinks and social shares.

How to Measure Your Core Web Vitals

What are core web vitals (CWVs)? Before making improvements, you need to know your current performance, and that’s where they come in. There are several tools available.

Field Data Tools (Real User Data)

A few crucial tools are mentioned below.

• Google Search Console provides an overview report of Core Web Vitals performance across your entire site, grouped by similar pages. This is the most important source since it shows the actual data Google uses for ranking.
•  Chrome User Experience Report (CrUX) is a publicly available dataset provided by Google that aggregates real-world user experience metrics from Chrome users who choose to share their browsing data.
• PageSpeed Insights combines field data from CrUX with lab data, showing real-user and simulated performance.

Lab Data Tools (Simulated Tests)

Take a look at these tools.

• Lighthouse is an automated tool that simulates page loads and interactions in a controlled environment.
• WebPageTest allows for detailed performance testing with various device and connection settings.
• Chrome DevTools provides built-in tools for performance analysis, including the ability to profile your website’s speed and identify bottlenecks directly within your browser.

The data that matters most for SEO is the field data from real users, particularly at the page level, which Google uses for ranking. However, lab data is valuable for debugging issues and testing improvements before deploying them.

How to Improve Core Web Vitals

Now that we understand what these metrics measure and how to check them, let’s look at specific strategies to improve each Core Web Vital.

Optimizing Largest Contentful Paint (LCP)

Improving LCP focuses on making the largest element on your page load quickly. This often involves optimizing images by compressing them, using responsive images (serving different sizes based on the user’s device), and utilizing modern image formats like WebP.

Ensure your server response time is fast; consider using a Content Delivery Network (CDN) to deliver content from servers closer to your users. Prioritize loading critical CSS and the LCP element by using in your HTML. If the LCP element is an image loaded via JavaScript, ensure it’s discoverable early in the page load process. Minifying CSS and JavaScript can also reduce file sizes and improve loading speed.

Improving Interaction to Next Paint (INP)

To enhance INP, which measures responsiveness, you need to minimize the time it takes for your website to react to user interactions. Break down long-running JavaScript tasks into smaller, asynchronous chunks to prevent blocking the main thread.

Optimize your JavaScript code by removing unnecessary or unused scripts and deferring the loading of non-critical JavaScript. Avoid large and complex DOM manipulations that can cause significant rendering delays.
Utilize web workers to run non-UI tasks in the background. Optimize event listeners and consider using techniques like requestAnimationFrame for animations to ensure smooth interactions.

Optimizing Cumulative Layout Shift (CLS)

Reducing CLS involves preventing unexpected shifts in page elements as the page loads. Always set explicit width and height attributes for images and videos to reserve the necessary space in the layout.
For ads, embeds, and iframes, reserve static space or use placeholders. Ensure that new content is injected below existing content, unless it’s in direct response to a user interaction.

Be cautious with custom fonts; use font-display: swap or font-display: optional to prevent text from becoming invisible while the font loads, which can lead to layout shifts. Regularly test your website on different devices and screen sizes to identify and fix layout shift issues.

Analyzing the Real-World Impact of Improving Core Web Vitals

Improving these metrics isn’t just about satisfying Google—it’s about providing a better experience for your users. Research has consistently shown that faster, more stable websites see significant business benefits.

• Every tenth of a second shaved off a website’s loading time can lead to a measurable increase in its conversion rates.
• Reduced layout shifts lead to fewer accidental clicks and user frustration.
• Better responsiveness results in more completed forms and interactions.
  

For example, when online retailer Vodafone improved its Core Web Vitals, it saw an 8% increase in sales.

Understanding Common Challenges and Misconceptions

When working to improve Core Web Vitals (CWVs), you might encounter some challenges.

• Analytics, advertising, and marketing tools can significantly impact performance. Audit these regularly and remove unnecessary ones.
• Some improvements require development expertise. If you’re not technically inclined, consider working with developers or using optimization plugins.
• High-quality images and videos can enhance design, but hurt performance. Find the right balance for your audience.
  

Even incremental improvements can have positive effects. Focus on moving from “poor” to “needs improvement” before aiming for “good”.
CWV only matters for SEO. While they do affect SEO, the user experience benefits often provide even greater business value.

The Future of Core Web Vitals

What are Core Web Vitals (CWVs) likely to look like in the future? Google has already shown a willingness to evolve these metrics, as demonstrated by the replacement of FID with INP in March 2024. As web technologies and user expectations continue to evolve, we can expect further refinements.

Some possible directions for future changes include:

• There should be more attention to page weight and data consumption.
• Metrics should focus on accessibility.
• Integrate with AI-driven user experience measurements.
• Use additional metrics for specific types of interactions, like scrolling.
  

Web platforms, content management systems, and hosting providers will continue to optimize for these metrics, many basic optimizations will become automatic. This means future optimizations will likely focus on more sophisticated aspects of user experience.

Conclusion

What are Core Web Vitals (CWVs) if not a reflection of what users already value? Fast loading, responsive interactions, and visual stability have always been important to users, even before Google formalized these metrics.

By focusing on improving these aspects of your website, you’re not just chasing an SEO ranking factor—you’re creating a better experience that will benefit your business through increased engagement, higher conversion rates, and improved customer satisfaction.

While improving Core Web Vitals can be technically challenging, the effort is worthwhile. Start by measuring your current performance, prioritizing the most critical issues, and implementing improvements incrementally. Remember that even small improvements can make a difference both for your users and your search rankings. Elandz can help you learn more about the role of CWVs in web development.

FAQs

Here’s what people ask.