想象一下：你正在加载一个网站，它看起来已经准备好了。您单击博客特色图片阅读文章，突然整个页面都发生了变化，因为刚刚加载了其他内容。然后您单击完全不同的内容并加载一个您从未想过的页面。如果您自己遇到过这个问题，您就会知道累积布局偏移 (CLS) 如何对站点的用户体验 (UX)产生负面影响。
累积布局偏移(CLS) 是页面布局在加载时发生多少偏移的术语，在本文中，我们将深入探讨它的含义。我们将向您展示如何衡量CLS，并解释什么是好分数。然后我们将讨论如何优化您网站的CLS分数。
什么是累积布局偏移 (CLS)？
没有比视觉示例更好的方法来说明高CLS分数（意味着来自Google PageSpeed Insights的任何超过0.10的任何内容）代表什么。这是一个布局随着页面加载而不断变化的网站。请注意，我们在捕获它时根本没有滚动。我们的视口保持不变，但页面本身发生了巨大的变化：
作为访问此网站的用户，您可能不确定它何时真正完成加载。你可能会尝试点击一个新闻故事，但布局却发生了巨大的变化。结果你最终在错误的页面上，你不得不浪费时间回去。根据页面的不同，这可能会发生多次。如果是这样，你很有可能会离开。
您的用户也将如此。
网站越复杂，就越有可能获得高CLS分数。对于标志性的Google主页等简单布局，没有CLS，因为它们包含的元素很少：
这并不是说所有复杂的网站都有很高的CLS分数。以亚马逊为例。没有人会说这家电子商务巨头使用简单的网页设计。然而，在浏览其目录时几乎看不到布局变化。
布局变化的发生是因为浏览器倾向于异步加载页面元素。更重要的是，您的页面上可能存在初始尺寸未知的媒体元素。这种组合意味着浏览器在加载完成之前不知道单个元素将占用多少空间。因此，剧烈的布局转变。
CLS的有趣之处在于它可以使用各种工具进行客观测量，但它也是以用户为中心的，因为每个用户的设备都会影响您网站布局的变化方式。虽然您无法控制该方面，但您当然可以采取预防措施，使其影响最小。
CLS（英文全称Cumulative Layout Shift）是Google 衡量的三个核心Web要素之一，可帮助其确定您的网站是否提供强大的用户体验 (UX)。Core Web Vitals其他两个要素是PageSpeed Insights。这与Google的设置回退以防它们不加载，因此空白空间不会导致布局偏移。
您可以对任何您想要的广告容器使用相同类型的CSS和内嵌样式，无论投放什么广告，都可以将其锁定在适当的位置。
累积布局偏移 (CLS) 常见问题
CLS可能比LCP和FCP指标更难掌握。考虑到这一点，让我们回顾一下用户对CLS的一些常见问题，以确保您不会遗漏任何关键信息。
CLS如何影响我网站的性能？
从理论上讲，您可以拥有一个速度非常快的网站，但其CLS分数仍然相对较低。与其他Core Web Vitals一样，CLS分数可能与整体网站性能没有直接关系。您的网站可能运行得非常快，但在加载时，它会像手风琴一样展开。即便如此，大的布局变化肯定会对网站的用户体验产生负面影响。谷歌认为这非常重要。这就是为什么谷歌如此重视这个数据点的原因。
CLS比FCP或LCP分数重要吗？
很多用户比CLS更关注FCP和LCP分数。这是因为这两个指标更容易与网站性能相关联。尽管FCP也是一个以用户为中心的指标，但CLS很难在大量用户中进行一致的衡量。
这三个指标构成了Google Core Web Vitals。这意味着，如果您忽略其中之一，您将面临在相关搜索结果中排名较低的风险。确保您的站点针对低CLS进行了优化通常只会对LCP和FCP等站点性能产生积极影响。如果最大的内容绘制在用户看到后立即被推下屏幕，那么快速的加载时间有多大用处？
怎样才算好的CLS分数？
从数字上看，谷歌认为低于0.10的任何东西都是一个很好的CLS分数。但是，如果您采取正确的步骤，获得0的CLS分数并不是不可能的，并且在优化良好的网站中这相对普通。但是请记住，即使是经常得分为0的网站，也可能有一小部分用户经历了变化。这是您无法控制的，您所能做的就是说明大多数用户的CLS为 0。
小结
在您的网站上提供强大的用户体验有很多因素。理想情况下，它应该加载速度快。应该很容易互动。它不应该在元素出现时移动布局位置。剧烈的布局变化会导致挫折和误点击。这些会导致更高的跳出率。这对任何网站都不利。
CLS是Google用来衡量您网站整体用户体验的核心网络要素之一。用户首先是您拥有网站的全部原因。他们的经验是优先级1。低CLS分数（低于0.10）意味着您的网站应该可以流畅地加载，并且其布局的每个方面都会从一开始就出现在正确的位置。
