CLS 问题排查与修复大全：从定位 Layout Shift 到稳定首屏体验

CLS（Cumulative Layout Shift，累积布局偏移）是最“工程化”的性能指标之一：

它不需要你写很复杂的算法
但它非常依赖你有没有把“占位与稳定性”做成习惯

很多用户对“网页抖动”的感受非常直接：

刚想点按钮，按钮突然被挤走
正在读标题，字体加载后整段跳一下
图片一加载，下面内容整体往下挪

本文给你一套可复制的排查路径：先定位 shift 的来源，再用对应的修复模式把页面稳定下来。

1. CLS 到底在衡量什么（别把它当成玄学）

CLS 衡量的是：页面在用户使用过程中发生了多少“意外布局变化”。

它关注的不是动画本身，而是“非预期的位移”。

一般阈值参考：

✅ 好：CLS < 0.1
🟡 需要关注：0.1–0.25
❌ 差：> 0.25

一个直觉判断：

你有没有在首屏就把关键区域（标题、主图、按钮、主要内容块）的尺寸稳定住？

2. 排查的正确顺序：先找到“谁在动”，再讨论“为什么”

CLS 排查不要从“猜原因”开始，而要从“定位元素”开始。

推荐三步：

在实验室定位（DevTools）：找到发生 shift 的时间点与元素
在真实用户定位（RUM）：确认是否是线上普遍问题，还是特定设备/网络
对应修复模式：图片、字体、异步内容、动画、第三方脚本分别处理

3. 用 DevTools 定位：最快找到 Layout Shift 源头

3.1 Performance 面板：抓到 shift 发生的那一刻

打开 Chrome DevTools → Performance
勾选 Web Vitals（或在 Summary 里关注 Layout Shifts）
点击录制，刷新页面
停止录制，查看 “Layout Shift” 相关事件

你会看到：

shift 发生的时间点
受影响的元素区域（通常会高亮显示）

3.2 Rendering 工具：可视化布局抖动

在 DevTools → More tools → Rendering 中，你可以开启：

Layout Shift Regions（布局偏移区域）

这样你会很直观看到：哪些区域在跳。

4. 用 RUM 监控 CLS：别只看 Lighthouse

Lighthouse 是 Lab 指标，它能帮你定位问题，但不能代表真实用户体验。

建议上线后做最小的 RUM 采集：

采集 CLS/LCP/INP
附带页面路径、设备信息、网络类型（可选）

如果你用 Nuxt，可以在客户端插件里做采集（示意）：

// plugins/web-vitals.client.ts（示意）
import { onCLS } from "web-vitals"

export default defineNuxtPlugin(() => {
  onCLS((metric) => {
    // 上报到你的接口或监控平台
    navigator.sendBeacon(
      "/api/vitals",
      JSON.stringify({
        name: metric.name,
        value: metric.value,
        rating: metric.rating,
        id: metric.id,
        path: location.pathname,
      })
    )
  })
})

重点不是“写得多花哨”，而是：

你能按页面维度看趋势
你能在某次发布后快速发现回归

5. CLS 最常见的 6 类原因与修复模式（可直接照做）

5.1 图片/视频没有尺寸（最常见）

现象：图片加载后把下面内容整体挤下去。

修复：

给图片设置明确的 width/height
或者用固定比例容器（aspect-ratio）占位

示例：

.hero {
  aspect-ratio: 16 / 9;
  background: #f3f4f6; /* 占位背景 */
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

5.2 字体加载导致重排（FOIT/FOUT）

现象：首屏先用系统字体渲染，字体文件加载后整段文字宽度变化，内容跳。

修复：

优先使用 font-display: swap
尽量减少字体变体（字重/子集）
对关键字体考虑 preload（谨慎使用）

示意：

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2");
  font-display: swap;
}

5.3 异步内容插入（推荐位/公告条/登录态）

现象：页面加载完后，顶部突然出现一个 banner，把整个页面挤下去。

修复思路：

预留高度（占位）
用骨架屏/placeholder
避免在视口顶部“插入新块”，尽量替换已有占位

示例：

.top-banner-slot {
  min-height: 48px; /* 永远占位 */
}

5.4 动画方式不对：用 `top/left` 引起布局变化

现象：动画过程中触发布局计算，引发抖动。

修复：

动画尽量用 transform 与 opacity
避免用 top/left/height 做动画

示例：

.modal {
  transform: translateY(8px);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}

.modal.open {
  transform: translateY(0);
  opacity: 1;
}