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

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

Users have little patience for slow-loading websites and poor user experiences, and search engines like Google have recognized this by introducing Core Web Vitals (CWVs) as a ranking factor. CWVs provide a standardized way to measure and assess the user experience of web pages. In this comprehensive guide, we’ll dive deep into what Core Web Vitals are, their business impact, and how to improve them. We will also explore each of the three key metrics that make up CWVs: First Input Delay (FID), Cumulative Layout Shift (CLS), and Largest Contentful Paint (LCP), as well as the recently added metric, Input Timing (INP).

What Are Web Vitals?

Web Vitals are a set of user-centric performance metrics introduced by Google to help web developers and website owners measure and improve the overall user experience of their websites. These metrics aim to quantify various aspects of web page performance that directly impact user satisfaction. The Core Web Vitals, specifically, are a subset of Web Vitals that focus on three critical aspects of user experience:

Loading Performance (Largest Contentful Paint – LCP):

LCP measures the time it takes for the largest content element on a web page to become visible to the user. It’s a crucial indicator of perceived loading speed. Users often judge a website’s speed based on how quickly they can see and interact with its main content.

Interactivity (First Input Delay – FID):

FID measures the time it takes for a web page to become responsive to user input. This metric is crucial because users expect websites to respond promptly when they click buttons, links, or interact with forms. A high FID indicates a sluggish website that frustrates users.

Visual Stability (Cumulative Layout Shift – CLS):

CLS measures the visual stability of a web page during loading. It quantifies how much the page layout shifts while users are trying to interact with it. Websites with poor CLS can lead to unintended clicks or user frustration, impacting the overall experience.

In order to measure your website’s Core Web Vitals performance, Google provides an easy-to-use CrUX Dashboard. All you have to do is visit this page and add your own website address here:

In this Looker Studio report, you can find historical data on many speed performance indicators such as LCP, FID, and TTFB.

The Business Impact of Core Web Vitals

Understanding the business impact of Core Web Vitals is crucial because it directly affects user engagement, retention, and revenue. Here’s why you should care about CWVs:

SEO Rankings: Google uses CWVs as a ranking factor in its search algorithm. Websites that provide a better user experience by optimizing their Core Web Vitals are more likely to rank higher in search results. Improved rankings can lead to increased organic traffic.
User Engagement: Faster-loading pages and responsive interactivity keep users engaged. Slow websites often lead to high bounce rates as users abandon the site in frustration. Optimizing CWVs can reduce bounce rates and increase the time users spend on your site.
Conversion Rate: A positive user experience translates into better conversion rates. When users can easily navigate your website and access its content, they are more likely to take desired actions, such as making a purchase or filling out a contact form.
User Satisfaction: Prioritizing Core Web Vitals improves user satisfaction and trust in your brand. Users are more likely to return to a website that provides a fast and seamless experience.
Mobile Friendliness: CWVs are especially crucial for mobile users, as they are more sensitive to slow-loading and poorly performing websites. By optimizing CWVs, you can tap into the growing mobile audience and improve mobile conversion rates.

Now that we’ve highlighted the importance of Core Web Vitals, let’s delve into each metric and explore how to improve them:

What is FID and How to Improve It?

First Input Delay (FID) measures the time it takes for a web page to respond to the first user interaction, such as clicking a button or a link. It reflects the responsiveness of your website and is essential for a smooth user experience. FID only measures the “delay” in event processing. It does not measure the event processing time itself nor the time it takes the browser to update the UI.

Why is FID important?

High FID values indicate that users are experiencing delays in interacting with your site, which can be frustrating. A slow FID can lead to users abandoning your website before engaging with its content.

How to Improve FID:

a. Break Up Long Tasks:

If you need to reduce the amount of JS loads on a webpage, breaking down long-running code into smaller, asynchronous tasks can be useful. Long Tasks are a sign of potential JavaScript bloat and splitting up long tasks can reduce input delay on your site.

b. Use a Web Worker:

A blocked main thread is one of the main causes of input delay. Web workers enable JavaScript to run on a background thread. Moving non-UI operations to a separate worker thread can cut down main thread blocking time and improve FID. Take a look at these libraries to use web workers on your website:

c. Reduce JS Execution Time:

By default, all JavaScript is render-blocking. When the browser encounters a script tag that links to an external JS file, it must pause what it’s doing and download, parse, compile, and execute that JavaScript. So, you should only load the needed JS code for this page. In order to reduce JS execution time:

Code-split your bundle into multiple chunks
Defer any non-critical JavaScript, including third-party scripts, using async or defer
Dynamic import can be a great solution to make JS code not used for the initial page load is only fetched when needed.
Always use “async” or “defer” attributes for scripts not necessary for critical path or ATF content.

What is CLS and How to Improve It?

Cumulative Layout Shift (CLS) measures the visual stability of a web page during loading. It quantifies the amount and speed of unexpected layout shifts that can occur, potentially causing users to click on unintended elements.

https://web.dev/static/articles/cls/video/web-dev-assets/layout-instability-api/layout-instability2.webm

To provide a good user experience, your site should strive to have a CLS score of 0.1 or less.

Why is CLS important?

A high CLS can lead to a frustrating user experience, as content suddenly shifts, causing users to lose their place or click on the wrong elements. To provide a stable and enjoyable browsing experience, minimizing CLS is crucial.

How to improve CLS:

Here are the most common causes of poor CLS are:

Images without dimensions
Ads, embeds, and iframes without dimensions
Dynamically injected content such as ads, embeds, and iframes without dimensions
Web fonts

a. Image Width & Height:

Set explicit dimensions for images, iframes, and ads to ensure that the page layout doesn’t shift when these elements load. Use CSS aspect ratio boxes to reserve space. This would minimize reflow and re-layout.

Modern browsers set the default aspect ratio of images based on an image’s width and height attributes, so developers just need to set them:

<!– set a 640:360 i.e a 16:9 aspect ratio –>

img[Attributes Style] {

aspect-ratio: auto 640 / 360;

}

All browsers will then add a default aspect ratio based on the element’s existing width and height attributes.

If you use responsive images, “srcset” defines the images you allow the browser to select between and what size each image is. To ensure <img> width and height attributes can be set, each image should use the same aspect ratio.

b. BFCache:

One of the most successful technique for keeping CLS scores low is to ensure your web pages are eligible for the back/forward cache (bfcache). The bfcache keeps pages in browsers memory for a short period after you navigate away so if you return to them, they will be restored exactly as you left them. Here you can find more details about bfcache.

c. Web fonts:

“font-display: optional” can avoid a re-layout as the web font is only used if it is available by the time of initial layout.
Minimize the size differences between the fallback font and the web font using the new size-adjust, ascent-override, descent-override, and line-gap-override APIs

What is LCP and How to Improve It?

Largest Contentful Paint (LCP) measures the loading performance of a web page by determining the time it takes for the largest content element to become visible in the viewport. This element is often an image, video, or text block that is crucial for understanding the page’s main content.

Why is LCP important?

LCP directly influences user perception of page speed. A slow LCP can lead to users perceiving your website as slow and may result in higher bounce rates. According to Google’s guidelines, your site should strive to have LCP of 2.5 seconds or less. To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads.

What Elements Are Considered in LCP?

Specified in the LCP API document, here are the elements considered for LCP:

<img> elements
<image> elements inside an <svg> element
<video> elements with a poster image (the poster image load time is used)
An element with a background image loaded via the url() function (as opposed to a CSS gradient)
Block-level elements containing text nodes or other inline-level text elements children.
The first frame painted for autoplaying <video> elements
The first frame of an animated image format, such as animated GIFs

How to improve LCP:

You should start by looking at these 2 main processes in order to identify opportunities to improve LCP:

The initial HTML document
The LCP source

In order to optimize CWV, you need your LCP resources request to start loading as early as it can and the LCP element to render as quickly as possible after the LCP resource finishes loading.

This table lists each of the LCP sub-parts in more detail. Each page can have its LCP value broken down into these four sub-parts. There is no gap between them, and collectively they add up to the full LCP time.

LCP sub-part	Description
TTFB	a metric that measures the time between the request for a resource and when the first byte of a response begins to arrive.
Resource load delay	The delta between TTFB and when the browser starts loading the LCP resource.
Resource load time	The time it takes to load the LCP resource itself.
Element render delay	The delta between when the LCP resource finishes loading until the LCP element is fully rendered.

a. Eliminate Resource Delay:

In the best-case scenario, we aim for the LCP resource to start loading immediately after the TTFB, but unfortunately, this is not always possible in practice. LCP resource should start loading at the same time as the first resource loaded by that page

It’s critical that the resource is discoverable in the initial HTML document response by the browser’s preload scanner in order to ensure your LCP resource starts loading as early as possible:

The LCP element is an <img> element, and its src or srcset attributes are present in the initial HTML markup.
The LCP element requires a CSS background image, but that image is preloaded via <link rel=”preload”> in the HTML markup (or via a Link header).
The LCP element is a text node that requires a web font to render, and the font is loaded via <link rel=”preload”> in the HTML markup (or via a Link header).

You should use “preload” and “high-fetch priority” attributes in order to eliminate unnecessary resource load delay in cases where the resource is only referenced from an external CSS or JS file.

<!– Load the stylesheet that will reference the LCP image. –>

<!– Preload the LCP image with a high fetchpriority so it starts loading with the stylesheet. –>

b. Eliminate Element Render Delay:

After making sure that the LCP source is loaded immediately after the TTFB, the LCP elements need to be rendered immediately.

The primary reason the LCP element wouldn’t be able to render immediately after its resource finishes loading is if rendering is blocked for some reason:

Rendering of the entire page is blocked due to stylesheets or synchronous scripts in the <head> that are still loading.
The LCP resource has finished loading, but the LCP element has not yet been added to the DOM (it’s waiting for some JS code to load).
The element is being hidden by some other code, such as an A/B testing library
The main thread is blocked due to long tasks, and rendering work needs to wait until those long tasks are complete.

Here are the best solutions to eliminate the element render delay:

Inline Stylesheets: Inline the stylesheets into the HTML to get rid of the additional network requests
Size of Stylesheets: Reduce the size of stylesheets
Remove unused CSS: use Chrome DevTools to find CSS rules that aren’t being used and can potentially be removed (or deferred).
Defer non-critical CSS: split your stylesheet out into styles that are required for initial page load and then styles that can be loaded lazily.
Minify and compress CSS: For critical styles, make sure you’re reducing their transfer size as much as possible.
Defer or inline render-blocking JS
Use server-side rendering

c. Reduce Resource Load Time:

In this step, your goal should be to reduce the time spent transferring the bytes of the resource over the network to the user’s device.

Reduce the size of the resource,
Serve the optimal image size,
Use modern image formats,
Compress images,
Reduce web font size,
Reduce the distance the resource has to travel,
Use CDN,
Reduce contention for network bandwidth,
Eliminate the network time entirely,
Serve resources with an efficient cache-control policy,
Set the font-display value of swap (if you use web fonts on your webpage)

d. Reduce the Time-to-First Byte:

Here are the best solutions to optimize your website’s TTFB:

Use a Content Delivery Network,
Optimize the application code,
Optimize the database queries,
Reduce HTTP requests,
Ensure a faster server response time,
Use Respond First, Process Later (RFPL) cache

Also, you can check Google’s stack-specific guidance on TTFB.

What is INP and How to Improve It?

Input Timing (INP) is the latest addition to Core Web Vitals. It focuses on measuring how quickly a web page responds to user input, such as clicks or keyboard inputs.

Why is INP important?

INP reflects the user experience when interacting with your website. Slow input responsiveness can frustrate users and discourage them from engaging further with your content or completing desired actions.

How to improve INP?

Optimize JavaScript Execution: Similar to FID, optimizing JavaScript is crucial for improving INP. Minimize the execution time of JavaScript code, especially during user interactions.
Prioritize Input Handling: Ensure that user input is processed promptly by prioritizing input handling over other tasks. Avoid long-running JavaScript processes that can delay input responses.
Use Web Workers: Offload computationally intensive tasks to web workers to free up the main thread for handling user input.
Remove or Defer Non-Essential Actions: Identify non-essential actions that can be deferred or eliminated during user interactions to ensure a more responsive experience.
Optimize Images and Videos: Images and videos that are displayed or manipulated in response to user input should be optimized to load quickly and smoothly.
Test Across Devices and Browsers: Test your website’s input responsiveness across various devices and browsers to ensure a consistent and fast experience for all users.

In conclusion, Core Web Vitals significantly shape the user experience and determine a website’s success in search rankings and user engagement. Prioritizing the optimization of these metrics – First Input Delay (FID), Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP), and Input Timing (INP) – is essential for delivering a fast, stable, and responsive website. By understanding these metrics and implementing the recommended improvements, web developers and website owners can create websites that not only rank higher in search results but also provide a superior user experience that keeps visitors coming back for more.