Google's Web Vitals initiative, aims to provide quality metrics essential to delivering a great user experience on the web. A website that performs well on these metrics generally offers a smooth experience for users, which can lead to longer visit durations, higher levels of engagement, and increased conversions.

Google incorporates these vitals in its search engine ranking to ensure websites with better experience rank higher. There are many signals but three most important, also known as Core Web Vitals are:

Largest Contentful Paint (LCP):Measures the loading performance of a webpage. Specifically, it marks the point in the page load timeline when the largest text or image content has been rendered. A good LCP time is considered to be 2.5 seconds or faster.

First Input Delay (FID): Measures the interactivity and responsiveness of a webpage. It captures the time from when a user first interacts with a page (e.g., clicking a link, tapping on a button) to the time when the browser is actually able to respond to that interaction. A good FID time is less than 100 milliseconds.

Cumulative Layout Shift (CLS): Measures the visual stability of a webpage. It quantifies the amount of unexpected layout shift of visible page content. A low CLS score indicates that the page is stable and content does not shift in a way that can be disorienting for users. A good CLS score is less than 0.1.

We'll look at each in detail now

Largest Contentful Paint

Largest Contentful Paint (LCP) is a metric that measures the loading performance of a webpage, specifically the time it takes for the largest content element visible in the viewport to fully load and be ready for user interaction. It's a critical factor in determining the perceived speed of a website.

Examples

• Image-heavy Website: On a photography website, the LCP might be the time it takes for the largest photograph on the homepage to load. If this photograph is very large in file size, it can significantly delay the LCP.

• Text-heavy Blog: On a blog, the LCP might be the largest block of text visible to the user when the page first loads. If this text is part of a large article or includes heavy fonts, it can impact the LCP.

• E-commerce Site: For an e-commerce site, the LCP could be the main hero image or a large product image on the homepage. The faster this image loads, the quicker the user perceives the page as usable.

Best Practices

• Optimize Images: Compress images without losing quality to reduce their file size. Use modern, efficient image formats like WebP. Ensure images are responsive and load different sizes based on the user's device to save bandwidth.

• Prioritize Loading of Important Assets: Use resource hints such as preload to inform the browser about critical resources that need to be loaded first. This can ensure that the largest content element is loaded quickly.

• Remove Unnecessary Third-Party Scripts: Third-party scripts can slow down your site. Evaluate and keep only essential third-party resources, or defer the loading of non-critical scripts until after the main content has loaded.

• Use a Content Delivery Network (CDN): A CDN can serve your content from a server location closer to the user, reducing the time it takes for the largest contentful element to load.

First Input Delay (FID)

First Input Delay (FID) is a performance metric that measures the time from when a user first interacts with a page (like clicking a link, tapping a button, or using a custom, JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.

Examples

• Button Click: When a user clicks a button to submit a form, FID measures the time from the user's click to the browser's response to that click. If there's a delay in processing the click because the main thread is busy, the FID will be high.

• Navigation: When a user selects a new page from a navigation menu, FID measures the delay before the browser starts loading the new page. If the browser is busy executing heavy JavaScript, the user might experience a noticeable delay.

• Interacting with a JavaScript-driven element: For example, expanding a dropdown menu or interacting with a slider on a webpage. If the JavaScript is complex and the browser is busy, there could be a delay in expanding the dropdown or moving the slider, leading to a higher FID.

Best Practices

• Minimize JavaScript Execution Time: Break up long tasks into smaller, asynchronous tasks to reduce the time the main thread is blocked, allowing it to respond more quickly to user inputs.

• Optimize Page Load: Ensure that the critical path resources are loaded first and defer non-critical resources. This allows the browser to become interactive more quickly.

• Use Web Workers: Move non-UI operations to a web worker to run them in a background thread, keeping the main thread free to respond to user input.

• Avoid Large JavaScript Bundles: Splitting JavaScript bundles into smaller chunks ensures that only the necessary code is parsed and compiled on the page the user is interacting with, reducing the load on the main thread.

• Prioritize Interactive Elements: Ensure that interactive elements like buttons or input fields are interactive early in the page load process, so users can interact with them without delay.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a metric that measures the visual stability of a website. It quantifies how much the content on the page shifts unexpectedly during the loading phase. High CLS values indicate that elements on the page are moving around a lot as the page loads, which can lead to a poor user experience.

How CLS is Measured

CLS is calculated by multiplying the impact fraction (the area of the viewport that shifts) by the distance fraction (the distance that the unstable elements move). This calculation is done for each unexpected layout shift that occurs throughout the entire lifespan of the page, and the individual scores are summed to get the final CLS score.

Examples of Layout Shifts

• Images without dimensions: If an image loads without predefined width and height attributes, it can push content down or to the side once it loads, causing a layout shift.

• Ads, embeds, and iframes without dimensions: Similar to images, these elements can load at different times and change the size of the space they occupy, shifting content unexpectedly.

• Dynamically injected content: Content added to the page dynamically, like a newsletter sign-up banner or an alert message, can push other content down or to the side.

• Web Fonts causing FOIT/FOUC: Flash of Invisible Text (FOIT) or Flash of Unstyled Content (FOUC) can occur when custom fonts load after the rest of the content, causing a shift.

Best Practices for Reducing CLS

• Specify size attributes for images and videos: Always include width and height attributes for media elements to ensure the browser can allocate the correct amount of space while the media is loading.

• Ensure ad elements have a reserved space: Predefine the size of ad slots so that when they load, they do not cause content to shift.

• Avoid inserting new content above existing content: Be cautious about dynamically injecting content, especially if it affects the current layout significantly.

• Use CSS aspect ratio boxes: For elements that don’t have an intrinsic size, use the aspect ratio property in CSS to reserve space based on the ratio of the width and height.

• Preload fonts: Use font-display: swap or preload your fonts to avoid FOIT/FOUC, which can cause layout shifts when the font finally loads.

You can use https://pagespeed.web.dev/ to check and improve the web vitals of your website.