核心网络要素 – 改善累积布局偏移 (CLS)
阅读时间：8分钟
您是否曾尝试点击某个按钮，但最终却打开了其他内容，比如令人厌烦的广告，因为页面 埃及 WhatsApp 负责人 内容突然被推到了下方？或者当出现新广告时，您正在阅读的内容也随之向下移动？
这些是在您未与页面交互的情况下发生的意外布局变化的示例。——无论如何，这对访问者来说都不是愉快的体验。累积布局变化是一种以客观方式量化影响的方法。
如何计算累积布局转变分数？
重要的不仅仅是首次加载时首屏的内容。在确定分数时，所有可见的布局变化（这些变化可能在滚动时发生）都会被考虑。
确定 CLS 分数时有两个因素需要考虑：
影响分数：屏幕受偏移影响的量
距离分数：移动距离占屏幕的百分比
CLS 分数 = 影响分数 * 距离分数
因此，如果屏幕的很大一部分（例如 80% 或 0.8）在屏幕上大幅向下移动（例如 40% 或 0.4），布局偏移分数为 0.32。在计算最终分数时，他们不会将所有布局偏移相加。他们不会计算平均值，因为这可能有利于打开时间相对较短的页面。相反，他们会在每个会话窗口中确定 CLS 并取最大值。
什么是良好的 CLS 分数？
它之所以被称为“累积布局偏移”，是因为分数是基于单个布局偏移的累积。最初，CLS 只是所有布局偏移的总和。现在它使用“最大会话窗口间隔 1 秒，上限为 5 秒”，以“使 CLS 指标对长时间打开的页面更加公平”。
尽管单个布局变化可能不会产生太大影响，但当它们综合在一起时，情况可能会有所不同。
“良好”的 CLS 分数是 0.1 以下的任何分数。高于 0.25 的任何分数都被视为“差”。0.1 到 0.25 之间的分数“需要改进”。
您可以使用 Lighthouse、Webpagetest 或 Chrome DevTools 等工具提供的实验室数据来测量 CLS。顾名思义，实验室数据模拟了用户的体验。您需要将您所做的更改的实验室数据与真实用户数据进行比较。在此过程中，需要记住的一件事是，布局变化仅在页面加载期间考虑。这与现场数据不同，现场数据会考虑从输入到页面关闭的所有布局变化。
真实用户数据来自 Google 和第三方在一段时间内和各种条件下收集的真实用户互动。Chrome 用户体验报告 (CrUX) 是 Google 真实用户数据（现场数据）的主要来源。PageSpeed Insights 和 Google Search Console 中的 Core Web Vitals 报告都使用这些数据。
由于多种因素，CLS 在移动设备上最具挑战性，其中包括：
屏幕或视口较小
移动网络问题
较弱的中央处理器 (CPU)
在评估 CLS 或任何其他核心网络生命力时，请务必先检查您的移动分数。@MarketMuseCo #corewebvitals #SEO
点击推文
以下是根据实验室数据得出的 CLS 分数较低的页面示例，为 1.065。PageSpeed Insights 会显示相关审核。
点击审计即可查看详细信息。
以下视频展示了页面如何首先加载内容，然后加载广告，从而导致内容的转变。