CLS 手动计算器 - 模拟布局偏移分数

CLS（Cumulative Layout Shift，累积布局偏移）是 Google Core Web Vitals 的核心指标之一，用于衡量网页视觉稳定性。

当页面加载过程中，可见元素发生非预期的位置移动时，就会产生布局偏移。例如：广告突然出现把内容往下推、无尺寸图片加载后撑开布局、动态注入的内容导致按钮移位等。

CLS 分数 = 影响分数（Impact Fraction）× 距离分数（Distance Fraction）。分数越低越好，理想值应 < 0.1。

影响分数衡量的是布局偏移影响的视口面积比例。

计算方法：取元素移动前和移动后所占据视口区域的并集面积，除以视口总面积。

影响分数 = (区域A ∪ 区域B) / 视口面积

例如：一个占视口20%的元素向下移动，如果新旧位置不重叠，影响分数就是 20% + 20% = 40% = 0.40。如果有部分重叠，影响分数会相应减少。

距离分数衡量的是元素移动的幅度。

计算方法：取元素在水平方向位移与视口宽度之比和垂直方向位移与视口高度之比中的较大值。

距离分数 = max(|Δx|/视口宽度, |Δy|/视口高度)

例如：元素向下移动了200px，视口高度为667px，距离分数 = 200/667 ≈ 0.30。

Google 建议网站应达到第75百分位CLS < 0.1（即75%的页面访问的CLS都在Good范围内）。

CLS 使用会话窗口机制来累积多次布局偏移。一个会话窗口持续5秒，在此期间发生的所有布局偏移的CLS分数会被累加。

如果5秒内没有新的布局偏移，会话窗口关闭。如果继续发生偏移，窗口会延长（最多5秒无偏移后关闭）。最终报告的CLS是最大会话窗口的累积值。

本工具计算的是单次布局偏移的CLS值。在实际页面中，多次偏移会在会话窗口中累积。

• 为图片/视频设置尺寸：始终在 <img> 和 <video> 上设置 width/height 属性，或使用CSS预留宽高比（aspect-ratio）。
• 预留广告位空间：在广告加载前为其预留固定的占位空间，避免广告突然撑开布局。
• 避免在现有内容上方动态注入：如需插入新内容，放在用户当前视口下方或使用平滑过渡。
• 使用font-display: optional：控制Web字体的加载行为，减少字体切换导致的文本位移。
• 动画使用transform：使用CSS transform 而非修改 top/left 等布局属性来做动画。

CLS 是 Google 页面体验排名信号的一部分，直接影响搜索排名。自2021年Google推出页面体验更新以来，Core Web Vitals（包括CLS）已成为重要的排名因素。

CLS 过高的网站可能在搜索结果中排名下降，尤其是在移动搜索中。优化CLS不仅能提升SEO，还能显著改善用户体验、降低跳出率、提高转化率。