累积布局偏移（CLS）
累积布局偏移（CLS）是一项 Core Web Vitals 指标，用于量化可见内容在页面生命周期内意外偏移位置的程度。它刻画的是「内容跳动」问题，即用户想点击某个按钮时，按钮在最后一刻移动了位置。
累积布局偏移（CLS）是一项 Core Web Vitals 指标，用于量化可见内容在页面生命周期内意外偏移位置的程度。它刻画的是「内容跳动」问题，即用户想点击某个按钮时，按钮在最后一刻移动了位置。
为什么重要
CLS 是 Google 已确认的排名信号，也是三项 Core Web Vitals 之一。Google 的阈值为：良好 ≤ 0.1，需要改进 0.1 至 0.25，较差 > 0.25。高 CLS 会损害用户信任，Google 的研究表明，CLS > 0.15 的页面跳出率要高出 24%。它也是最容易修复的 Core Web Vital，因为几乎每种成因都有简单的补救办法。
CLS 如何计算
CLS 分数 = 影响比例 × 距离比例，对页面生命周期内所有意外布局偏移求和得出。
- 影响比例：受偏移元素影响的视口占比（偏移前与偏移后区域的并集）。
- 距离比例：任何元素移动的最大距离，以视口的比例表示。
自 2021 年起，Chrome 采用「窗口化 CLS」，只统计最差的 5 秒窗口，因此长时间运行的 SPA 不会因一时的糟糕表现而被永久惩罚。
常见原因
未指定尺寸的图片：没有 width/height 属性的 <img> 会迫使浏览器在图片加载时重新排版。
未预留空间的广告和嵌入内容：在初次渲染之后插入的第三方广告位会把内容往下挤。
导致 FOIT/FOUT 的网页字体：当自定义字体加载时，由于后备字体的度量不同，文本会重新排版。
动态注入的内容：出现在已有内容之上的「你可能也喜欢」小工具、Cookie 横幅和通知。
并非基于 transform 的动画：对 top 或 left 做动画会触发布局，而对 transform 做动画则不会。
如何修复 CLS
为图片和视频设置明确的尺寸：<img width="800" height="600">，浏览器会在文件加载前预留空间。
预留广告位空间：为广告容器设置固定的 min-height，使插入的广告不会挤压内容。
使用 font-display: optional 或预加载网页字体，以尽量减少 FOUT。
在首屏以下插入新内容，或在用户交互时插入，而不是插入到已有内容之上。
只用 transform 和 opacity 做动画，它们不会触发布局。
使用 aspect-ratio CSS 来处理没有明确尺寸的响应式媒体。
测量 CLS
实地数据：CrUX、Search Console 的 Core Web Vitals 报告、PageSpeed Insights 的实地数据部分。
实验室数据：Lighthouse、Chrome DevTools 的 Performance 面板。请注意，实验室 CLS 可能与实地数据不同，因为真实用户会触发不同的滚动位置和交互。
CLS 按真实用户数据的第 75 百分位进行评定，因此对 SEO 而言，真正起作用的是实地数据。
Sources: