Cumulative Layout Shift(CLS,累积布局偏移 ),谷歌现在对这个指标比较看重,因为它直接和客户的页面体验度相关联,而页面体验度在2021年8月升级到了主核心算法里面一个重要考评的维度。

那么什么是累积布局偏移?当在打开某个网页进行浏览的时候,原本出现在顶部的一行文字突然被排挤到下面去了,在原来顶部显示文字的地方可能被其他内容所占据。这种页面内容的意外移动通常是由于异步加载资源或者DOM元素动态添加到现有内容页面的上方而发生的。而造成这种情况的“罪魁祸首”往往是尺寸未知的图像或者是视频,呈现比其后备更大或者更小的字体,或者是动态调整自身大小的第三方广告或者小部件。

谷歌PageSpeed Insights速度得分指标CLS讲解

CLS会测量在页面的生命周期中版式发生意外位移的所有布局位移分数的总和。对于CLS,可用相关的手段去改善这个速度测评项目的分值,以下是一些用来避免布局意外移动的指导优化原则。

(1)务必在图片和视频元素上添加size属性,否则使用CSS宽高比来保留所需的空间。这种方法能够确保在加载图像的时候,浏览器可以在文档中分配正确的空间量。

(2)除非是相应用户交互,否则不要在现有内容上方插入内容,这样可以预期任何版式的移动位置。

(本文内容根据网络资料整理,出于传递更多信息之目的,不代表连连国际赞同其观点和立场)