累积布局变化—2021年谷歌排名因素概述

累积布局变化—2021年谷歌排名因素概述已关闭评论

A+

所属分类：博客文章

累积布局转移（CLS）是一个Google度量标准，用于度量用户体验事件。据说这一指标将成为2021年的排名因素。这意味着了解什么是CLS以及如何对其进行优化非常重要。

累计布局偏移的定义

什么是累积布局偏移

CLS是网页还在下载时，网页元素的意外移动。容易引起变化的元素有字体、图像、视频、联系人表单、按钮和其他类型的内容。
最小化CLS很重要，因为页面的移动会导致糟糕的用户体验。
CLS分数低表示编码问题可以解决。

为什么会发生CLS

根据谷歌的说法，累积布局变化发生的原因有五个：

“无尺寸图像

无维度的广告、嵌入和iframes

动态注入内容

导致FOIT/FOUT的Web字体

更新DOM之前等待网络响应的操作“

图像和视频需要有HTML中声明的高度和宽度维度。对于响应图像，请确保不同视口的不同图像大小使用相同的纵横比。
谷歌建议使用spectRatioCalculator.com计算纵横比。这是一个很好的资源。

广告会导致CLS

这个有点棘手。处理导致CLS的广告的一种方法是对广告要显示的元素进行样式化。
例如，如果将div设置为具有特定的高度和宽度，则广告将被限制为这些高度和宽度。
如果库存不足和广告没有出现，有两种解决方案。
如果广告中没有广告元素，则可以使用广告元素来填充广告。
或者，对于某些布局，广告会在网页的右边或左边的栏的顶部填充一整行，如果页面没有出现，就不会有任何变化，无论是在移动还是桌面上。但这取决于主题布局。如果广告库存是个问题，你就得测试一下。

动态注入内容

这是注入到网页中的内容。例如，在WordPress中，你可以链接到YouTube视频或Tweet，WordPress会将视频或Tweet显示为一个嵌入对象。

基于Web的字体

下载的网络字体会导致所谓的不可见文本（FOIT）和非样式文本的Flash（FOUT）。
一种防止这种情况的方法是在下载该web字体的链接中使用rel=“preload”。
灯塔可以帮助你诊断引起CLS的原因。

CLS可以在开发过程中潜入

在开发阶段，累积的布局转换可能会滑过。可能发生的情况是，外贸网站优化呈现页面所需的许多资产都加载到浏览器的缓存中。下一次开发人员或发布者访问正在开发的页面时，他们不会注意到布局的变化，因为页面元素已经下载。
这就是为什么在实验室或野外进行测量是有用的。

如何计算累积布局偏移

计算涉及两个指标/事件。第一种被称为冲击分数。

冲击分数

碰撞分数是不稳定元素在视口中所占空间的度量。
视口是您在移动屏幕上看到的内容。
当元素下载并移动时，元素所占用的总空间，从它在视口中第一次呈现时所占的位置到页面呈现时的最终位置。
Google使用的例子是一个元素，它占据了视窗的50%，然后又下降了25%。
当加在一起时，75%的值称为影响分数，它表示为0.75分。

距离分数

第二个测量称为距离分数。距离分数是页面元素从原始位置移动到最终位置的空间量。
在上面的示例中，page元素移动了25%。
因此，现在累积布局得分是通过将影响分数乘以距离分数来计算的：
0.75 x 0.25=0.1875
在计算中还有更多的数学和其他考虑因素。重要的是，分数是衡量一个重要的用户体验因素的一种方法。

如何测量CLS

测量CLS有两种方法。谷歌在实验室里调用第一种方法，第二种方法在现场调用。
在实验室里，这意味着模拟实际用户下载网页。Google使用一个模拟的motog4在实验室环境中生成CLS分数。
实验室工具是了解布局如何执行的最好工具，然后再向用户推送它。它为出版商提供了测试版面是否存在问题的机会。
实验室工具包括Chrome开发工具和Lighthouse。