Cumulative Layout Shift（CLS）是什么意思

Cumulative Layout Shift (CLS) 是衡量网页视觉稳定性的核心指标，表示页面在加载或交互过程中，元素发生的意外布局偏移的累积程度。简单的说是量化了用户因内容突然移动（如：文字、图片位置跳动）而导致的体验干扰。

为什么 CLS 重要？
用户体验：布局偏移可能导致用户误点击（如：按钮突然移动）或阅读中断。
SEO影响：CLS是Google核心网页指标（Core Web Vitals）之一，直接影响搜索排名。
业务损失：例如、按钮位移可能导致用户错误关闭页面或点击错误链接。
典型场景

• 用户浏览新闻网站：
  
  
  • 1秒：文字内容加载完成。
  • 3秒：首屏图片加载，导致下方文字突然下移（布局偏移）。
  • 用户正欲点击链接，因位移误触广告，体验极差。
    
    

CLS如何计算？

CLS分数 = 影响范围（Impact Fraction） × 位移比例（Distance Fraction）

• 影响范围：偏移元素占视口的面积比例（如：元素占视口 50% → 0.5）。
• 位移比例：元素偏移距离占视口的比例（如：垂直移动视口高度的 25% → 0.25）。
• 单次偏移分数：0.5 × 0.25 = 0.125。
• CLS总分：页面生命周期内所有单次偏移分数的总和。
  
  

常见引发CLS的操作
未设置尺寸的图片或视频：延迟加载后挤压其他内容。
动态插入内容：如广告、弹窗突然插入现有内容上方。
异步加载字体：字体加载前后文本区域大小变化。
响应式设计缺陷：元素尺寸随视口变化不协调。
优化CLS的实用方法

为动态内容预留空间：

• 图片/视频：使用width和height属性或CSS aspect-ratio提前占位。
• 广告模块：通过占位容器固定尺寸（如：<div style="height: 300px">）。
  
  

预加载关键资源：

• 使用<link rel="preload">提前加载字体或首屏图片。
• 避免字体切换导致的布局变化（使用font-display: optional）。
  
  

避免在现有内容上方插入新元素：

• 广告或通知栏优先添加到页面底部或预留固定区域。
• 使用CSS transform替代修改top/left属性（减少布局重排）。
  
  

优化第三方脚本：

• 异步加载社交分享按钮或聊天插件。
• 为异步加载的内容设置占位骨架（Skeleton Loading）。
  
  

监控动态内容：

• 使用MutationObserver检测DOM变化是否引发偏移。
• 对用户交互触发的操作（如：点击展开）不纳入 CLS 计算。
  
  

测量工具与优秀标准

• 工具：Lighthouse、Chrome DevTools（Performance面板）、Web Vitals API。
• 优秀标准：CLS ≤ 0.1（Google建议），0.25 以上需优化。
  
  

与其他指标的区别

• CLS：关注视觉稳定性（内容是否意外移动）。
• FCP/LCP：关注内容渲染速度。
• TBT/FID：关注交互响应延迟。
  
  

常见误区

• 仅关注首次加载：CLS计算页面整个生命周期内的偏移（包括用户交互后）。
• 忽略小幅度偏移：即使微小位移（如：1px），若影响范围大（如：全屏横幅）也会显著增加CLS。
  
  

网站通过优化CLS可以显著减少页面内容的“跳动”，提升用户操作的确定性和页面的专业感，同时满足搜索引擎的排名要求。