如何改善累积布局偏移 (CLS) 指标提高SEO效果

SEO优化中有很多关于用户体验的指标，这些指标与内容无关，但与性能、网页布局、界面美观、交互性等有关。其中累积布局偏移 (CLS) 让很多人摸不着头脑，亦不知如何处理。

什么是累积布局偏移 (CLS) ？

该项指标是由Google提出来的，并在PageSpeed Insights测试中作为一项重要打分项。那么到底它是什么呢？

Google给出了一个常见的场景来解释如果CLS不佳带来的负面影响：

您是否曾经历过在网上阅读一篇文章，结果页面上的某些内容突然发生改变？文本在毫无预警的情况下移位，导致您找不到先前阅读的位置。

或者更糟糕的情况：您正要点击一个链接或一个按钮，但在您手指落下的瞬间，诶？链接移位了，结果您点到了别的东西！

web.dev

也就是说，累积布局偏移 (CLS) 就是用户在浏览网页的过程中，网页的布局在动态变化，尤其是影响到用户阅读和操作的变化。布局动态改变幅度太大的话，会影响用户体验。

什么原因造成累积布局偏移 (CLS) 太大？

造成这样的问题的原因可能是：

• 页面内容的意外移动通常是由于异步加载资源，或者动态添加 DOM 元素到页面现有内容的上方。
• 也可能是没有指定图像或视频的尺寸、实际渲染后比后备字体更大或更小的字体，或者是使用了动态调整自身大小的第三方广告或小组件。

很多开发者在开发过程中，是有可能没察觉到这些问题的。因为在开发环境中，视频、图片可能已经在浏览器的缓存中了，并且本地调用 API 的速度一般非常快，几乎察觉不到延迟。

另外就是网站为了提高性能与最大内容绘制 (LCP) ，而使用了延迟加载技术。性能也是很重要的用户体验指标，但二者之间应取得平衡。

WordPress如何改善累积布局偏移 (CLS) 指标

图像和视频标签应始终包含尺寸

响应式网页中的图像和视频标签应始终包含尺寸，或者通过使用CSS 长宽比容器之类的方式预留所需的布局空间。

很多响应式网页中插入图片的做法是这样的：

img {
  width: 100%; /* 或 max-width: 100%; */
  height: auto;
}

这样做的缺点是只有在图像开始下载后才能为图像分配空间，浏览器才可以确定其尺寸。这就造成了较大的偏移空间。

正确的做法应该是这样：

<picture>
  <source media="(max-width: 799px)" srcset="demo-480w-cropped.jpg" />
  <source media="(min-width: 800px)" srcset="demo-800w.jpg" />
  <img src="demo-800w.jpg" alt="Puppy with balloons" />
</picture>

在大屏幕中显示的完整尺寸的图片，而在小屏幕中使用的则是经过裁剪的小尺寸图片。

优化WordPress延迟加载

从Wordpress 5.5开始，默认集成了图片与框架延迟加载的功能，其实WordPress的实现原理很简单，通过浏览器自带的延迟加载功能实现的，无需额外加载任何JS代码。

但这种方式对于不支持loading属性的浏览器是不起作用的，例如苹果的Safari浏览器目前不支持，IE浏览器也不支持。

loading 属性语法示例：

<!--图像延迟加载，只有鼠标滚动到该图片所在位置才会显示-->
<img src="URL" loading="lazy">

<!--默认，图像立即加载
-->
<img src="URL" loading="eager">

loading 属性浏览器支持情况

属性	Chrome	Edge	Firefox	Safari	Opera
loading	77.0	79.0	75.0	不支持	64.0

loading=”lazy”的浏览器支持情况

如果只是SEO的话，loading=”lazy”是没问题的，如果要兼容更多浏览器真实提高所有用户体验的话，可以考虑使用第三方延迟加载插件或通过JS代码实现延迟加载功能。推荐使用perfmatters插件或WP Rocket的懒加载功能。

在perfmatters或WP Rocket设置中，应该排除延迟加载首屏出现的图片或视频，如站长帮排除LOGO与会在首屏出现的特色图片。

• LOGO图片添加了class="header-image is-logo-image"样式
• 文章中的特色图片添加了class="attachment-full size-full"样式

在WP Rocket懒加载设置如下：

在首屏中不要使用自适应广告代码

从用户体验的角度，首屏中最好不要投放广告，然而首屏的广告位又是效果最好的，所以要投放广告的话，在首屏中不要使用自适应广告代码。例如Adsense的自适应广告，就会造成布局偏移。

但是开启了WP Rocket的JaveScript延迟执行功能的话，可以优化Adsense自适应广告的CLS指标，还能提升页面加载速度。

因为在WP Rocket的JaveScript延迟执行功能中，未产生交互之前Adsense代码是不加载的，只有当用户点击或移动鼠标才会加载并展示Adsense广告。这是符合Google的要求的。