累计偏移布局Cumulative Layout Shift (CLS)

**累积布局偏移 (Cumulative Layout Shift，简称 CLS)** 也是 Google “核心网页指标”(Core Web Vitals) 的三大支柱之一。如果说 LCP 衡量的是“速度”，那么 **CLS 衡量的就是网页的“视觉稳定性”**。

#status / growing #type / concept #tech / dev / frontend #platform / browser #resource / web-vitals

[!info] related notes

简单来说，CLS 测量的是网页在加载和整个生命周期中，页面元素发生意外移动（跳动）的程度。

相信你一定遇到过这种烦人的情况：你正准备点击页面上的一个按钮或链接，结果页面顶部突然加载出来一张图片或者广告，导致整个页面内容被往下推，你一不小心就点到了错误的地方。这就是典型的、糟糕的布局偏移。

防止用户误操作： 意外的布局偏移不仅会打断用户的阅读体验，更严重的是会导致用户误触（比如点错购买按钮、点到广告、甚至点到取消按钮），这会极大地增加用户的挫败感。
SEO 排名因素： 和 LCP 一样，Google 将页面的视觉稳定性作为评估页面质量和搜索排名的核心指标之一。

CLS 的计算方式比较特殊，它不是一个时间单位（秒），而是一个没有单位的分数。浏览器会计算元素移动的距离（距离分数）以及它在屏幕上占据的影响面积（影响分数）相乘得出。

为了提供良好的用户体验，网站应努力将 CLS 分数控制在 0.1 以内：

注意：只有“意外”的偏移才会被扣分。如果是用户点击了折叠面板、搜索按钮等主动触发的布局变化，只要发生在交互后的 500 毫秒内，就不会计入 CLS。

导致页面跳动通常是由于浏览器在渲染时“不知道”某些资源需要占用多大空间，直到资源加载完成才突然把周围的元素挤开。以下是四大常见“元凶”及对策：

这是最常见的原因。浏览器在下载完图片之前，不知道图片的长宽比，所以不会为它预留空间。图片一旦加载出来，就会把下方的文字全部挤下去。

优化方向： * 永远在 <img> 和 <video> 标签上写明 width 和 height 属性（即使你用 CSS 控制了响应式宽度，浏览器也能根据这两个属性计算出占位比例）。
- 或者在 CSS 中使用较新的 aspect-ratio 属性，直接告诉浏览器元素的宽高比，让其提前预留好确切的盒子空间。

广告网络通常支持动态调整广告大小，这很容易导致不可预测的布局变动。

优化方向：
- 为包含广告或 Iframe 的外层容器（<div>）设置一个 min-height（最小高度）或固定的尺寸。即使广告还没加载出来，或者最终没有加载出广告，这个空间也会一直保留在那里，不会引起周围内容的塌陷或偏移。

网页在加载后，突然在页面顶部或现有内容上方插入一段“订阅电子报”、“安装 App 提示”或“相关文章推荐”的横幅。

优化方向：
- 永远不要在现有内容上方动态插入内容，除非是为了响应用户的直接交互（如点击）。
- 如果必须显示横幅，可以使用固定定位 (position: fixed 或 sticky) 将其悬浮在页面边缘，或者提前在文档流中为它预留好骨架屏 (Skeleton Screen) 空间。

当自定义字体加载较慢时，浏览器可能会先用系统默认字体渲染（无样式文本闪烁，FOUT），或者先隐藏文字（不可见文本闪烁，FOIT）。由于不同字体的字号、字间距不同，当自定义字体加载完成并替换默认字体时，整段文字排版可能会发生剧变，导致高度变化。

优化方向：
- 在 CSS 的 @font-face 中使用 font-display: optional 或 font-display: swap。
- 使用 CSS 的 size-adjust 等新特性，调整后备字体（系统字体）的度量标准，使其在视觉大小上尽可能接近你的自定义字体，从而把替换时的排版变化降到最低。

测量工具与 LCP 完全一致：

实验室工具： Chrome 开发者工具的 Performance 面板中，会有一条专门的 “Layout Shifts” 轨道，你可以点击查看每一次偏移发生的具体位置和元凶元素。
真实用户监控： PageSpeed Insights (PSI) 和 Search Console。

Related notes