Blog

Boosting Core Web Vitals: LCP, CLS, and INP

Here are some steps you can take on your own or with the help of a developer.

Enhancing LCP:

LCP (Largest Contentful Paint): In essence, LCP measures how long it takes for the largest element (usually an image or text block) on your webpage to become visible to the user. It’s a crucial metric for user experience because a slow LCP can lead to frustration and visitors abandoning your site.

There are small and large changes you can make to boost your LCP.

  • You can optimize your images by compressing them and using web-friendly formats like WebP, which are up to 34% smaller in size than traditional formats.
  • Also, you can enable page caching, which stores the page on the server after it’s loaded the first time. That way, it can be retrieved faster in the future.
  • Upgrade your web hosting to improve your LCP score. It’s common for shared hosting (when multiple sites are hosted on the same server) to run slower since everyone shares resources like memory and processing power.
  • Your site may need a better hosting plan or a different type of hosting. Like dedicated hosting (when your site has its own server) or cloud hosting (when multiple servers are used to provide more reliable performance).

CLS improvement

CLS, or Cumulative Layout Shift, happens when the visible content of a webpage unexpectedly shifts around during loading. This jarring visual experience often stems from elements like images, banners, or ads being added to the page without pre-defined dimensions. Since the browser doesn’t know how much space to reserve for these elements initially, it might rearrange other content after they load, causing the frustrating “jumping” effect. This not only disrupts the user’s flow but can also lead to accidental clicks on the wrong elements, hurting both the user experience and potentially your site’s SEO rankings.

Defining width and height attributes for your images and videos is a fundamental step towards taming CLS. This upfront information tells the browser exactly how much space to allocate, preventing those layout surprises as elements load.

But what about situations where you need images to scale responsively within containers of varying sizes? In those cases, specifying dimensions alone might not be enough. This is where techniques like the “aspect ratio trick” come into play.

By using CSS to establish an aspect ratio for the container, you essentially create a placeholder that reserves the correct amount of space even before the image loads. This prevents any content below from shifting when the image finally appears. A common way to do this is with padding-bottom on the container, calculated based on the desired aspect ratio:

.image-container {
  position: relative; /* for absolute positioning of the image */
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  
 /* or contain, depending on your needs */
}

This combination ensures that even if your image sizes change dynamically based on screen size or content, the layout remains stable, significantly improving your CLS score and user experience.

Your CLS score can also be affected by the type of font you use.

Font Loading: If web fonts aren’t loaded or optimized properly, the browser might initially render text using a fallback font. Once the web font loads, the text might reflow and change size or spacing, causing layout shifts. This is known as a FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text). These issues can negatively impact the user experience by making the text difficult to read, causing visual jarring, and potentially affecting accessibility for users with assistive technologies.

Font Size Adjustments: If you have responsive design elements that change font sizes based on screen size or user interactions (like zooming), these adjustments can also lead to CLS. For instance, if the text within a button or navigation menu changes size unexpectedly, it can cause surrounding elements to shift.

  • Solution: Utilize the font-display CSS property to control how fonts render during loading. font-display: swap is a good option as it uses a fallback font initially and seamlessly swaps to the web font once loaded, minimizing layout shifts.
  • Additional Tip: Preload critical fonts using to prioritize their loading for above-the-fold content.

Custom Fonts with Large File Sizes: Large custom font files can take longer to download, increasing the likelihood of FOIT/FOUT and layout shifts. To optimize font loading, consider subsetting your fonts (including only the necessary characters), compressing them, and using modern font formats like WOFF2. Also, try to limit the number of font weights and styles you use to reduce the overall file size.

  • Solution: Use font subsetting tools to generate optimized font files containing only the characters used on your website. Additionally, leverage online font compression services or build tools to further reduce file sizes
  • Additional tip: Explore using variable fonts, which can contain multiple font weights and styles within a single file, reducing the number of requests and potential layout shifts.

How to mitigate CLS caused by fonts:

  • Use the font-display property: This CSS property allows you to control how fonts are displayed while they’re loading. Setting font-display: swap is generally recommended, as it will use a fallback font initially and then swap it with the web font once it’s loaded, minimizing layout shifts.
  • Preload critical fonts: Use to prioritize the loading of important fonts used in the initial view of your page.
  • Optimize font files: Minimize font file sizes by subsetting (only including the necessary characters) and compressing them.
  • Consider system fonts: If possible, using system fonts like Arial, Helvetica, and Verdana instead of web fonts, can help avoid font loading issues altogether, as they are readily available on the user’s device.
  • Test thoroughly: Always test your website on different devices and screen sizes to identify and fix any layout shifts caused by font changes.

By addressing these font-related factors, you can significantly improve your CLS score and provide a more visually stable and enjoyable user experience.

Enhancing INP

Excessive JavaScript code or the presence of numerous large scripts can significantly impact your Interaction to Next Paint (INP) metric.

To improve INP, consider these strategies:

  • Minimize JavaScript: Work with your developer to reduce the amount of JavaScript code and optimize the size of your scripts.
  • Break up Long Tasks: Identify and refactor long tasks that the browser performs in the background, as these can delay user interactions and negatively impact INP.

Optimize Event Handlers

  • Debounce and Throttle Event Listeners: For events that trigger frequently (like scrolling or resizing), use debouncing or throttling to limit the number of times your event handlers execute. This prevents the main thread from being overwhelmed.

  • Efficient Event Delegation: Utilize event delegation to attach a single event listener to a parent element instead of multiple listeners to its children.This reduces the number of event handlers in memory and improves performance.

  • Avoid Complex Calculations in Event Handlers: Move computationally expensive operations out of event handlers and perform them asynchronously or during idle periods.

Optimize Rendering and Layout

  • Minimize Layout Thrashing: Avoid forcing the browser to recalculate layout multiple times by batching DOM changes and style updates. Use CSS properties like transform and opacity for animations, as they often trigger compositing instead of layout recalculations.

  • Reduce DOM Size: Keep your DOM (Document Object Model) as lean as possible. Large DOMs can slow down rendering and increase the complexity of layout calculations.

  • Use content-visibility: This CSS property can help improve rendering performance by delaying the rendering of offscreen content until it becomes visible.

Other Performance Optimizations

  • Optimize Images and Videos: Compress images and videos to reduce their file size and loading time. Use responsive images to deliver appropriately sized images for different devices.
  • Lazy Load Images and Videos: Load images and videos only when they are about to become visible in the viewport, reducing the initial page load time.
  • Minimize Third-Party Scripts: Evaluate the impact of third-party scripts on your INP and consider removing or optimizing those that contribute to slow interactions.
  • Use Service Workers Wisely: While service workers can enable offline functionality and improve performance in some cases, poorly implemented service workers can also negatively impact INP.

Remember, improving INP is an ongoing process. It’s essential to monitor your website’s performance regularly and address any issues that arise to ensure a smooth and responsive user experience.