想象一下：你正在加载一个网站，它看起来已经准备好了。您单击博客特色图片阅读文章，突然整个页面都发生了变化，因为刚刚加载了其他内容。然后您单击完全不同的内容并加载一个您从未想过的页面。如果您自己遇到过这个问题，您就会知道累积布局偏移 (CLS) 如何对站点的用户体验 (UX)产生负面影响。 累积布局偏移，简称CLS，是谷歌Core Web Vitals的一个指标。 简而言之，它衡量一个网页的内容有多少是 “意外 “移动的。一个高的CLS分数可以表明一个糟糕的用户体验，也可以拖累你的网站的SEO。 累积布局偏移(CLS) 是页面布局在加载时发生多少偏移的术语，在本文中，我们将深入探讨它的含义。我们将向您展示如何衡量CLS，并解释什么是好分数。然后我们将讨论如何优化您网站的CLS分数。 什么是累积布局偏移 (CLS)？ 累积布局偏移是衡量你的网站上的一个页面在用户访问期间意外移动的程度，由布局不稳定性API（一个标准化的性能测试API）来衡量。 累积布局偏移（CLS）是谷歌核心网络生命力计划中的三个指标之一，另外还有最大内容绘画（LCP）和首次输入延迟（FID）。 为了理解累积布局转移的含义，有必要从总体上讨论布局转移。 当你的网站上的内容意外地 “移动 “或 “转移 “时，就会发生布局转移。 或者，用技术术语来说，它是指任何在视口中可见的元素在两个框架之间改变其起始位置。 一个常见的例子是，你正在阅读一个文本块……但随后一个迟来的广告突然出现，把文本内容推到了页面的下方。 下面是谷歌提供的另一个例子，展示了这种情况的发生。 谷歌提供的一个累积布局转变的例子 在浏览网页时，你几乎肯定遇到过布局转移，即使你不知道它们的名字。 一次访问可能有多个独立的布局转移事件。因此，累积布局转移指标旨在通过测量一个页面上意外布局转移的总量来捕捉整个画面*。 *在谷歌做了一些改变之后，确切的衡量标准变得更加技术化了，但这仍然是基本的想法。如果你对这些细节感兴趣，你可以在这里了解更多信息。 没有比视觉示例更好的方法来说明高CLS分数（意味着来自Google PageSpeed Insights的任何超过0.10的任何内容）代表什么。这是一个布局随着页面加载而不断变化的网站。请注意，我们在捕获它时根本没有滚动。我们的视口保持不变，但页面本身发生了巨大的变化： 作为访问此网站的用户，您可能不确定它何时真正完成加载。你可能会尝试点击一个新闻故事，但布局却发生了巨大的变化。结果你最终在错误的页面上，你不得不浪费时间回去。根据页面的不同，这可能会发生多次。如果是这样，你很有可能会离开。 您的用户也将如此。 网站越复杂，就越有可能获得高CLS分数。对于标志性的Google主页等简单布局，没有CLS，因为它们包含的元素很少： 这并不是说所有复杂的网站都有很高的CLS分数。以亚马逊为例。没有人会说这家电子商务巨头使用简单的网页设计。然而，在浏览其目录时几乎看不到布局变化。 布局变化的发生是因为浏览器倾向于异步加载页面元素。更重要的是，您的页面上可能存在初始尺寸未知的媒体元素。这种组合意味着浏览器在加载完成之前不知道单个元素将占用多少空间。因此，剧烈的布局转变。 CLS的有趣之处在于它可以使用各种工具进行客观测量，但它也是以用户为中心的，因为每个用户的设备都会影响您网站布局的变化方式。虽然您无法控制该方面，但您当然可以采取预防措施，使其影响最小。 CLS（英文全称Cumulative Layout Shift）是Google 衡量的三个核心Web要素之一，可帮助其确定您的网站是否提供强大的用户体验 (UX)。Core Web Vitals其他两个要素是First Input Delay (FID)和Largest Contentful Paint (LCP)，它们也绝对值得您为优化付出任何努力。 为什么累积布局偏移是个糟糕的事情？ 累积布局偏移不好的主要原因是，它在你的网站上创造了一个糟糕的用户体验。 在最好的情况下，它对你的访问者来说是温和的烦扰。在最坏的情况下，它可能导致访问者执行他们不想采取的行动。 例如，想象一下，如果一个用户想点击 […]
