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

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

图片[1] - 如何改善累积布局偏移 (CLS) 指标提高SEO效果 - 聚问天空网

什么是累积布局偏移 (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 属性浏览器支持情况

属性ChromeEdgeFirefoxSafariOpera
loading77.079.075.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懒加载设置如下:

图片[2] - 如何改善累积布局偏移 (CLS) 指标提高SEO效果 - 聚问天空网
Rocket懒加载排除LOGO与特色图片

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

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

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

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

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发

请登录后发表评论