The Essential Guide to Content Layout Shift (CLS) Removal: Strategies and Code Examples

Web performance is a critical aspect of user experience and SEO, impacting everything from conversion rates to search engine rankings. Among various performance metrics, Content Layout Shift (CLS) is pivotal, focusing on visual stability during the loading phase. High CLS scores can frustrate users by causing unexpected layout shifts. Here, we explore seven strategies for minimizing CLS, including practical code examples for a smoother web experience.

Why It Matters: Images and videos that load without defined dimensions can drastically alter the layout of a page, leading to high CLS scores.

Strategy: Always specify width and height attributes for your media. This approach reserves the necessary space and prevents layout shifts.

Code example:

/* Aspect ratio box for a 16:9 ad or embed */
.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.aspect-ratio-box-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Why It Matters: Ads or dynamically inserted iframes can disrupt content, pushing it down or aside once they load.

Strategy: Allocate fixed dimensions for these elements or use aspect ratio boxes to maintain layout consistency.

Code Example:

/* Aspect ratio box for a 16:9 ad or embed */
.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.aspect-ratio-box-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Why It Matters: CSS containment instructs the browser to limit the layout and paint work to specific elements, reducing the impact on the rest of the page.

Strategy: Apply containment where feasible to confine the layout shifts within contained elements.

Code Example:

.contained-element {
  contain: layout paint;
}

Why It Matters: Loading non-critical resources (like images below the fold) eagerly can contribute to layout shifts.

Strategy: Use lazy loading for off-screen and non-critical resources to prevent them from affecting CLS.

Code Example:

<img src="example.jpg" loading="lazy" alt="Lazy loaded image">

Why It Matters: Preloading critical assets like fonts can prevent layout shifts caused by late-loading styles.

Strategy: Use <link rel="preload"> for critical resources to load them early without rendering delays.

Code Example:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Why It Matters: Swapping fonts without fallbacks can cause shifts.

Strategy: Use font display strategies like font-display: swap; to control layout shifts during font loading.

Code Example:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2');
  font-display: swap;
}

Why It Matters: Dynamically adding content above existing content can push it down, leading to layout shifts.

Strategy: Design your webpages so that dynamic content loads in places that do not affect the existing layout, or use placeholders.

Code Example:

// Assuming a placeholder is in place
const placeholder = document.querySelector('#dynamic-content-placeholder');
placeholder.innerHTML = '<p>New dynamic content</p>';

Implementing these strategies effectively reduces CLS, enhancing the user experience and improving your site's performance metrics. Remember, web performance is an ongoing effort that requires regular monitoring and adjustments based on real user metrics (RUM). Happy coding!