之前我们讲完了CWV中的LCP和FID，那这次我们来讲一下核心网页指标（CWV）中的最后一个指标CLS。其实它指的就是页面的一个视觉的稳定性。因为很多时候，你的页面加载速度并不慢，但内容却在不断的跳动，比如图片突然加载出来把文字挤下去，或者按钮位置发生变化，这种体验对于用户来说很糟糕。所以说真正理解页面稳定性，对用户的体验来说非常的重要。在实际工作时我发现，CLS的问题往往容易被我们忽视，但它对用户体验和转化率的影响却非常直接，所以说它值得我们去重点关注。那今天乐站小杨不光会带大家理解CLS，还会结合我们之前学过的FID和LCP的内容，让大家学会如何做好核心页面指标。
什么是CLS？
还是先理解什么是CLS？CLS（Cumulative Layout Shift）指的是页面在加载过程中，视觉元素发生意外位移的程度。通俗的讲，就是页面内容在用户还没有操作的情况下发生“跳动”。
这种跳动通常会发生在以下情况：
- 第一，页面中的图片在加载出来后突然撑开空间
- 第二，广告位的动态插入导致页面中的内容下移
- 第三，页面中的字体在加载后发生样式变化
- 第四，页面的按钮的位置发生了偏移
因为CLS并不是只会衡量单次的偏移，而是会计算出整个页面加载过程中所有布局偏移的累计值。所以说，哪怕每次移动的位置不明显，但是只要发生的次数比较多，也会导致CLS分数较高。
还是举个例子，当我们的用户正准备点击按钮的时候，我们的页面中突然加载出一张图片，导致按钮的位置被挤下去了，从而促使用户误触。那么这种情况不仅非常的影响用户的体验，还可能直接影响到后续的转化。
CLS为什么如此重要
当我们接触的次数多了之后我们会发现，CLS对于用户信任感的影响非常明显。那是为什么呢？
首先，CLS会直接影响用户操作的准确性。因为页面元素的频繁移动，会导致用户很难准确点击他的目标，这就会促使用户操作失败甚至误操作。
其次，CLS会影响到用户对网站的印象。因为一个页面如果频繁发生跳动，就会容易让人感觉页面不稳定、不可靠，从而降低用户对页面的信任度。
另外，CLS和之前学到过的FID和LCP一样，同样是搜索引擎评估页面体验的重要指标之一。虽然它不会像内容质量那样直接决定排名，但在用户的体验层面会产生一定影响。
以我的经验来看，做好CLS的优化通常会给我们的页面带来以下变化：
- 首先就是页面整体的布局会更加稳定
- 其次，用户的操作会更顺畅，用户能精准的点击自己想点击的内容
- 而且还能提升页面的转化率
这种情况对于电商产品页或表单页来说，会直接影响到用户的决策行为。
CLS的参考标准
通常我们需要按照Google提供的参考标准来判断我们页面的CLS是否达标，那我们一起看一下Google对于CLS的标准是什么样的吧：
| CLS值 | 表现等级 |
|---|---|
| ≤ 0.1 | 良好（Good） |
| 0.1 – 0.25 | 需要优化（Needs Improvement） |
| > 0.25 | 较差（Poor） |
从参考标准来看，一般情况下，CLS超过0.1，就需要我们开始关注了；如果超过0.25，就说明页面存在明显的布局问题，会导致用户的体验不好，需要我们及时优化。
我们可以用以下的工具对它进行监测，从而帮助我们更好的判断CLS是否达标：
- PageSpeed Insights，这是一款网站测速工具
- Chrome DevTools，这是Google官方提供的一款开发者工具
- Search Console体验报告
影响CLS的常见因素
其实CLS出现的问题大多数来源于资源加载的方式不合理。
1. 图片或视频未设置尺寸
这是因为没有提前设置宽高，所以会导致资源加载后会改变布局。
我的解决方法：
- 为图片设置固定的宽高属性
- 使用占位空间（placeholder）
- 采用响应式图片方案
2. 广告或动态内容插入
因为广告在加载时往往会改变页面结构，所以我们也需要避免。
我的解决方法：
- 为广告预留固定区域
- 避免在已有内容中插入广告
- 控制动态内容加载位置
3. 字体加载导致布局变化
自定义字体在加载后，文本宽度就有可能发生变化。
我的解决方法：
- 使用font-display: swap
- 选择相似字体作为备用
- 减少字体加载延迟
4. 异步加载资源影响布局
因为某些脚本或组件加载后会改变页面结构，所以我们也需要注意。
我的解决方法：
- 优化资源加载顺序
- 避免影响首屏结构
- 延迟加载非关键组件
CLS与FID和LCP一起使用的整体效果
我们在实际工作时，我们不要单独看CLS，而是需要结合LCP和FID一起分析。
这三个指标分别代表：
| 指标 | 关注点 |
|---|---|
| LCP | 最大内容绘制的时间 |
| FID | 第一次页面交互响应的时间差 |
| CLS | 页面视觉稳定性 |
当我们将这三个指标同时做好优化的时候，我们的页面给用户的体验会明显提升。
例如：
- LCP优化后，用户能更快看到重点内容
- FID优化后，用户可以更快操作页面
- CLS优化后，页面不会干扰用户操作
当我们页面的这三个指标同时达标后，用户停留时间和转化率都有明显的提高。这说明页面体验是一个整体，而不是单一指标决定的。
做好CLS的优化让页面更稳定
我们的页面在加载过程中，应尽量保持结构的稳定性，让用户的预期与实际一致。所以说当页面内容不会随意跳动时，用户操作就会更加自然，体验也会更加流畅。这种稳定性方面的优化往往会更容易被忽视，所以我们需要重视起来。当我们页面的CLS表现良好时，页面不仅更易于使用，也更容易获得用户信任。对于SEO来说，这种稳定且友好的体验，会在长期中带来更好的表现。
