Web 性能入门指南-2.4 理解和改进累积布局偏移 (CLS)

累积布局偏移量衡量页面的视觉稳定性。人性化的定义是，CLS 可帮助您了解页面给浏览者带来不顺畅、不愉快体验的可能性。

CLS 是一种基于公式的指标，它考虑了网页的视觉内容在视口内的移动量，以及这些视觉元素移动的距离。CLS 可以通过合成和 RUM 来衡量。Google 建议您的网页的 CLS 分数不超过 0.1。

什么因素导致 CLS 恶化？

累积布局偏移的好处之一是，它让我们跳出通常的基于时间的指标的思维，而是让我们思考未优化的页面元素可能降低用户体验的其他微妙方式。

CLS 受网页上资源数量以及提供这些资源的方式和时间的强烈影响。如果您的 CLS 分数很低，那么最大的罪魁祸首包括：

• 网络字体– 默认字体和自定义字体的大小可能存在很大差异，从而导致布局偏移。虽然在等待网络字体加载时不隐藏内容是一种很好的做法，但如果网络字体在渲染时移动元素，则会对您的 CLS 分数产生负面影响。

• 不透明度变化 ——CLS 不考虑不透明度变化，因此添加不透明度为 0 的元素然后移动它会影响您的 CLS 分数。

• 广告 – 广告会导致整个页面的编辑主体发生偏移。在计算 CLS 时，偏移元素的大小确实很重要。

• 轮播 – 令人惊讶的是，许多轮播都使用非合成动画，这可能会导致 CLS 问题。在带有自动播放轮播的页面上，这可能会导致无限的布局转换。