Cumulative Layout Shift（CLS）：布局稳定性与优化策略

---

title: Cumulative Layout Shift（CLS）：布局稳定性与优化策略

keywords:

• CLS
• layout-shift
• PerformanceObserver
• 布局稳定性
• 优化策略

description: 采集并优化 CLS（累计布局偏移），通过 PerformanceObserver 监测布局位移并为图片、广告与动态内容设定尺寸与策略，提升页面稳定性。

categories:

• 文章资讯
• 技术教程

---

概述

CLS 衡量页面视觉稳定性，良好阈值 ≤ 0.1。常见来源包括未声明尺寸的媒体、动态插入内容与异步字体加载。优化重点在于明确尺寸、避免上方插入与稳健的占位策略。

用法/示例

let cls = 0
const po = new PerformanceObserver(list => {
  for (const e of list.getEntries()) {
    if (!e.hadRecentInput) cls += e.value
  }
})
po.observe({ type: 'layout-shift', buffered: true })

<!-- 为图片声明尺寸或使用宽高属性，避免布局跳变 -->
<img src="/hero.jpg" width="1200" height="800" alt="Hero" decoding="async" />

工程建议

• 为图片/视频/iframe/广告位声明固定或可计算的尺寸，占位避免跳变。
• 避免在现有内容上方插入元素；对动态内容使用过渡并预留空间。
• 字体加载使用 font-display: swap 与合理的 FOUT/FOIT 策略，减少文本回流。

参考与验证

• web.dev：CLS — https://web.dev/articles/cls
• MDN：PerformanceObserver — https://developer.mozilla.org/docs/Web/API/PerformanceObserver