To reduce cumulative layout offsets (CLS), you must reserve space for page elements in advance and avoid dynamic layout changes: 1. Set width and height for pictures and videos or use the aspect-ratio attribute to reserve space; 2. Avoid inserting elements above existing content, using fixed positioning or pre-leave blanks; 3. Ensure stable font loading through @font-face's font-display and font metric overlay; 4. Clearly set the size for ads, embedded content, and iframes and use responsive aspect ratio containers; 5. Animation prioritizes properties such as transform and opacity that do not trigger rearrangement; 6. Reserve placeholders or minimum height containers for content dynamically loaded by JavaScript. In short, providing sufficient layout expectation information through CSS can effectively eliminate visual instability, thereby reducing CLS and improving user experience.

Cumulative Layout Shift (CLS) is a Core Web Vital that measures visual stability on a webpage. A high CLS score means elements are shifting around as the page loads, which hurts user experience—especially when people accidentally click the wrong button or see content jump after reading it.

A big part of preventing CLS comes down to smart CSS practices. Here's how to reduce or eliminate layout shifts using CSS:

1. Always Reserve Space for Images and Videos

One of the most common causes of CLS is when images or videos load late and push content down because their dimensions weren't reserved upfront.

? Solution: Use width and height attributes (or CSS) to define aspect ratio and reserve space.

 <img src="/static/imghw/default1.png"  data-src="photo.jpg"  class="lazy" alt="A nice photo"    style="max-width:90%"  style="max-width:90%">

With modern CSS, you can use aspect ratio boxes:

 img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* Prevents layout shift */
}

This ensures the browser reserves the correct space even before the image loads.

? Tip: If you can't know the exact dimensions, estimated conservatively or use a placeholder with the same aspect ratio.

2. Avoid Injecting Content Above Existing Content

Dynamically inserting banners, ads, or messages (eg, cookie consent, promote bars) at the top or middle of the page causes everything below to shift down.

? Solution: Reserve space in advance or position non-static content off-screen until ready.

For example, reserve space for a sticky header or banner:

 body::before {
  content: "";
  display: block;
  height: 60px; /* Space for a future banner */
  background: transparent;
}

Or use position: fixed or position: absolute for overlays and banners so they don't affect document flow.

3. Prevent Font-Related Shifts (FOIT/FOUT)

When custom fonts load late, the browser often displays fallback fonts first, which may have different metrics—causing text to reflow when the web font loads.

? Solutions:

• Use font-display: swap but pair it with size-adjust , ascent-override , etc., via @font-face descriptors to match fallback fonts closely.

 @font-face {
  font-family: 'CustomFont';
  src: url('custom.woff2') format('woff2');
  font-display: swap;
  ascent-override: 90%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

• Or use the CSS Font Loading API to control when fonts are applied.
• Alternatively, preload critical fonts :

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

This reduces invisible text (FOIT) and suddenly swaps (FOUT), both of which can cause CLS.

4. Don't Let Ads, Embeds, or Iframes Cause Shifts

Third-party content like ads, YouTube embeds, or iframes often load late and without predefined size.

? Best practices:

• Always set explicit dimensions:

   iframe, .ad-container {
    width: 300px;
    height: 250px;
    background: #f0f0f0; /* Optional: add a placeholder */
  }

• Use aspect-ratio boxes for responsive embeds:

   .embed-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

This way, space is reserved regardless of load timing.

5. Animate Responsibly – Avoid Layout-Affecting Properties

Animations that change height , width , margin , or padding trigger layout reccalculations and can cause shifts if not anticipated.

? Use compositor-friendly properties:

• Prefer transform and opacity for animations:

   .fade-in {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
  }
  .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }

  These don't trigger layout changes and are handled efficiently by the GPU.

6. Ensure Dynamic Content Has Reserved Space

Content loaded via JavaScript (eg, comments, recommendations) often causes shifts when injected.

? Reserve space with placeholders or skeletons:

 .skeleton-card {
  width: 100%;
  height: 200px;
  background: #eee;
  border-radius: 8px;
  margin-bottom: 16px;
}

Or define a minimum height for the container:

 .comments-container {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

This keeps layout stable while content loads.

In short, preventing CLS with CSS is about prediction and reserved space . Key takeaways:

• Set width , height , or aspect-ratio for media.
• Avoid inserting content that pushes existing elements.
• Handle web fonts carefully with font-display and metrics override.
• Size ads, iframes, and embeds explicitly.
• Animate with transform and opacity .
• Use placeholders for dynamic content.

Basically, if the browser can't anticipate how much space an element will take, it will shift—so give it the info upfront.

The above is the detailed content of How to prevent Cumulative Layout Shift (CLS) with CSS?. For more information, please follow other related articles on the PHP Chinese website!