优化CLS分数提升网站用户体验和SEO排名

想象一下您正在浏览一个网站，它看似已经准备就绪。您点击了博客的特色图片，希望阅读文章，却突然发现整个页面发生了变化——刚刚加载了其他内容。接着，您又点击了完全不同的内容，却意外地加载了一个您从未想过的页面。如果您曾经历过这样的场景，就会深刻理解累积布局偏移（CLS）如何对网站的用户体验（UX）产生负面影响。

累积布局偏移（CLS）是谷歌Core Web Vitals指标之一，它衡量网页内容意外移动的程度。高CLS分数往往意味着糟糕的用户体验，并可能拖累网站的SEO表现。在本文中，我们将深入探讨CLS的含义，展示如何衡量它，解释什么是好分数，并讨论如何优化您网站的CLS分数。

### 什么是累积布局偏移（CLS）？

累积布局偏移是衡量您网站页面在用户访问期间意外移动程度的指标，由布局不稳定性API（一个标准化的性能测试API）来衡量。它是谷歌核心网络生命力计划中的三个指标之一，另外还有最大内容绘画（LCP）和首次输入延迟（FID）。

### 布局转移的含义

当您网站上的内容意外地“移动”或“转移”时，就会发生布局转移。用技术术语来说，它是指任何在视口中可见的元素在两个框架之间改变其起始位置。一个常见的例子是，您正在阅读一个文本块，但随后一个迟来的广告突然出现，把文本内容推到了页面的下方。

谷歌提供了一个例子，展示了这种情况的发生：


在浏览网页时，您几乎肯定遇到过布局转移，即使您不知道它们的名字。一次访问可能有多个独立的布局转移事件。因此，累积布局转移指标旨在通过测量一个页面上意外布局转移的总量来捕捉整个画面。

### 高CLS分数的影响

没有比视觉示例更好的方法来说明高CLS分数（意味着来自Google PageSpeed Insights的任何超过0.10的任何内容）代表什么。这是一个布局随着页面加载而不断变化的网站。请注意，我们在捕获它时根本没有滚动。我们的视口保持不变，但页面本身发生了巨大的变化：


作为访问此网站的用户，您可能不确定它何时真正完成加载。您可能会尝试点击一个新闻故事，但布局却发生了巨大的变化。结果您最终在错误的页面上，不得不浪费时间回去。如果是这样，您很有可能会离开。您的用户也将如此。

### 布局变化的原因

网站越复杂，就越有可能获得高CLS分数。对于标志性的Google主页等简单布局，没有CLS，因为它们包含的元素很少：


这并不是说所有复杂的网站都有很高的CLS分数。以亚马逊为例。没有人会说这家电子商务巨头使用简单的网页设计。然而，在浏览其目录时几乎看不到布局变化。布局变化的发生是因为浏览器倾向于异步加载页面元素。更重要的是，您的页面上可能存在初始尺寸未知的媒体元素。这种组合意味着浏览器在加载完成之前不知道单个元素将占用多少空间。因此，剧烈的布局转变。

### CLS的测量与优化

CLS可以使用各种工具进行客观测量，但它也是以用户为中心的，因为每个用户的设备都会影响您网站布局的变化方式。虽然您无法控制该方面，但您当然可以采取预防措施，使其影响最小。

### 为什么累积布局偏移是个糟糕的事情？

累积布局偏移不好的主要原因是，它在您的网站上创造了一个糟糕的用户体验。在最好的情况下，它对你的访问者来说是温和的烦扰。在最坏的情况下，它可能导致访问者执行他们不想采取的行动。例如，如果一个用户想点击“取消”，但却不小心点击了“确认”，因为在他点击的时候，布局的改变改变了按钮的位置。

除了影响你的人类访客的体验之外，累积布局偏移的分数也会拖累你的网站在搜索引擎上的排名。从谷歌的页面体验更新（在2021年8月完成推出）来看，谷歌使用核心网页指标作为其SEO排名因素之一。因为累积布局偏移是核心网页指标的一部分，这意味着它可以影响你的网站的搜索性能。

### 是什么导致了累积布局偏移？

以下是一些关于布局偏移最常见的原因：

1. **没有为图片、iframe、视频或其他嵌入物设置尺寸。**
2. **自定义字体加载的问题，这可能导致文本不可见或在自定义字体加载时改变大小。**
3. **提供不同尺寸的响应式广告（例如AdSense）（并且没有为这些广告保留空间）。**
4. **用插件动态地注入内容（cookie同意通知、线索生成表格等）。**
5. **使用没有CSS Transform属性的动画。**

### 如何测量累积布局偏移CLS

确定您的网站是否显示明显的布局变化相对简单。首先，我们建议您尝试从各种设备访问您的网站，并要求其他人也这样做。这样做时，您可以观察页面加载时布局是否保持一致。您可能会发现CLS的体验可能会有很大差异。这不仅取决于您的网站的优化程度，还取决于您使用的设备。考虑到这一点，衡量网站CLS的最佳工具是PageSpeed Insights。

通过此服务，您可以输入一个URL并根据Google过去28天收集的数据接收该URL的总体性能得分。该分数考虑了几个指标，包括CLS、FCP和LCP。

### 如何才算好的累积布局偏移得分

根据谷歌的核心网页指标，一个好的累积布局偏移分数是0.1或更少。如果您的累计布局偏移分数在0.1和0.25之间，谷歌将其定义为“需要改进”。如果您的累计布局偏移得分高于0.25，谷歌将其定义为“差”。

### 如何确定导致布局偏移的原因

如果您想确定哪些元素导致您网站上的布局发生变化，您可以使用Chrome开发工具。如果您打开工具（CTRL-SHIFT-I）并跳转到性能选项卡，您将能够在浏览网络时记录性能测试。停止录制后，Chrome Dev Tools将返回一个时间轴，显示加载时间、单个请求和Core Web Vitals。从此时间线中，您可以选择在Experience下列出的各个Layout Shift事件。这样，您就可以看到它们对应于哪些元素。

### 如何优化您网站的CLS分数

总的来说，高CLS分数有两大罪魁祸首：媒体文件和广告。例如，如果您上传一个分辨率很高的图片文件，但没有指定它的高度和宽度，则很可能会破坏您的页面布局。在网站性能方面，最好使用已经是您将要显示的精确尺寸的图像。这样，浏览器就不必花费处理能力（和时间）来适当地调整它们的大小。然而，这并不总是可能的。如果不是，您应该为您显示的每个图像设置宽度和高度属性。这样，用户的浏览器将准确地知道图像适合的位置，并且不需要在最后一秒移动布局。

### 如何修复WordPress（或其他平台）中的累积布局移动

现在您明白了累积布局偏移发生了什么，是时候转向一些关于如何修复WordPress的累积布局偏移的可操作的提示了。虽然这些提示是来自WordPress的角度，但它们都是通用的，你可以把它们应用到其他网站建设工具上。

1. **始终指定图像的尺寸。**
2. **始终为视频、iframes和其他嵌入物指定尺寸。**
3. **修复和优化字体加载。**
4. **为广告预留空间（如果使用显示广告）。**
5. **在使用插件动态注入内容时要谨慎行事。**
6. **尽可能为动画使用CSS变换属性。**

### 累积布局偏移 (CLS) 常见问题

CLS可能比LCP和FCP指标更难掌握。考虑到这一点，让我们回顾一下用户对CLS的一些常见问题，以确保您不会遗漏任何关键信息。

### 小结

在您的网站上提供强大的用户体验有很多因素。理想情况下，它应该加载速度快，应该很容易互动，它不应该在元素出现时移动布局位置。剧烈的布局变化会导致挫折和误点击，这些会导致更高的跳出率。这对任何网站都不利。CLS是Google用来衡量您网站整体用户体验的核心网页指标要素之一。用户首先是您拥有网站的全部原因。他们的经验是优先级1。低CLS分数（低于0.10）意味着您的网站应该可以流畅地加载，并且其布局的每个方面都会从一开始就出现在正确的位置。如果您的网站有一个很高的累计布局偏移分数，重要的是要解决这个问题，为您的人类访客创造一个更好的体验，并最大限度地提高您的网站在谷歌搜索结果中的表现。