CLS方法是用来衡量网页上的内容在整个页面渲染周期的生命周期中的转移或移动程度，或者换句话说，衡量网站的视觉外观的稳定性。
在你的生活中，可能有很多次你亲眼目睹了能够点击菜单中的一个项目而不小心点击了一个广告，然后把你带到了一个第三方网站，以及当网页上的内容在互动过程中发生转移时，是多么令人沮丧的事情。当然，布局转移也是对用户的一种烦扰。然而，它们也能够给网络出版商带来更多的问题，包括高跳出率和由于布局转移导致的意外点击而违反其广告政策。
此外，由于谷歌认为CLS是三个 "核心网络生命体"之一，CLS得分低会对整个核心网络生命体得分产生负面影响，导致用户获得不及格的分数。作为谷歌搜索算法最近变化的一部分，在核心网络生命体征评估中获得合格分数的网站在搜索结果中的排名会更有利。
提高CLS得分，改善整体用户体验，可能提高谷歌排名，并增加谷歌有机流量，这之间有直接的关系。
如何衡量累积布局转移？
当一个在视口中可见的元素由于任何原因移动了它的起始位置，这个移动将被记录下来。因此，如果它改变了它的起始位置，它将被认为是不稳定的。需要注意的是，只有当一个可见的元素由于页面上发生的事情而移动到页面上的不同位置时，才有可能产生布局转移，而不是当一个新的元素或一个现有的元素增长或缩小时。
CLS得分由两个旨在跟踪布局转移的具体措施组成：影响分数和距离分数。这两个措施被用来确定CLS分数。影响分数衡量不稳定元素在两帧之间对视口的影响，其方法是将原始元素和移动作为一个比率，可以与两帧之间的视口总可见面积进行比较。在一个水平或垂直移动的不稳定元素的情况下，距离分数代表该元素在视口中移动的距离（水平或垂直）。
如何提高你的CLS分数？
为了减少不稳定的元素/移位行为，这里有几个建议。
- 不同的网页可能会得到其他的CLS分数，这取决于你的网站结构。例如，文章页面的CLS分数可能比主页的分数高。因此，第一步是测量你网站所有主要页面模板的CLS分数。
- 图片和视频应该总是有宽度和高度属性。创建具有确定长宽比的响应式图像。
- 另外，可以使用CSS长宽比框来保留元素所需的空间。在加载过程中，这可以确保浏览器在文档中分配到适当的空间。
- 如果广告投放没有得到适当的优化，广告服务会大大促进布局的转变。
- 不要在已经加载的内容上面注入动态内容，除非是为了响应用户的互动，在这种情况下，布局会改变。
用我们的网站优化服务加快WordPress的性能!
