要減少累積佈局偏移（CLS），必須提前為頁面元素預(yù)留空間並避免動態(tài)佈局變化：1. 為圖片和視頻設(shè)置寬高或使用aspect-ratio屬性預(yù)留空間；2. 避免在現(xiàn)有內(nèi)容上方插入元素，可使用固定定位或預(yù)先留白；3. 通過@font-face的font-display和字體度量覆蓋確保字體加載穩(wěn)定；4. 為廣告、嵌入內(nèi)容和iframe明確設(shè)置尺寸並使用響應(yīng)式長寬比容器；5. 動畫優(yōu)先使用transform和opacity等不觸發(fā)重排的屬性；6. 為JavaScript動態(tài)加載的內(nèi)容預(yù)留佔位符或最小高度容器?？傊?，通過CSS提供足夠的佈局預(yù)期信息可有效消除視覺不穩(wěn)定性，從而降低CLS並提升用戶體驗。

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, estimate 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, promo 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 sudden 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 recalculations 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 predictability and reserving 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.

以上是的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！