作者

Image

奥利维耶-佩尔贝特

搜索引擎优化部门负责人

1 年前，Google 就将用户体验作为搜索结果中的定位因素。网站性能关键绩效指标（KPIs de webperformance que sont les Core Web Vitals）已被 SEO 负责人广泛采用。请在今天向我们提出有关累积布局偏移的问题。.

莱斯 核心网络活力 (Signaux Web Essentiels en français)评估了网页对用户的收费情况：

  • 第一视觉元素（LCP）之前的等待时间是多久？
  • Quelle réactivité de la page à une interaction (FID) ?
  • 充电（CLS）时的视觉稳定性如何？

什么是累计版面移动？

CLS（累积版面偏移）衡量页面的视觉稳定性。最典型的例子是公共网站。当一篇文章的标题和开头出现时，用户会点击 "显示"，但当他点击 "显示 "时，页面上就会出现一个 "宣传条幅"。因此，如果用户被告知他将访问一个不受欢迎的网站，他就必须向右移动，以便重新阅读文章，并保持警惕，避免再次点击惊奇头像。.

Cumulative Layout Shift

优化累积布局偏移 - Google - https://web.dev/optimize-cls/

在现代网站上，这种情况非常普遍，因此谷歌推出了一种测量指标，以鼓励网站编辑改进网站。.

如何测量？

C'est une métrique composée deux éléments ：

  • 表面 = 受降额影响的屏幕表面

  • 距离 = 有关设备的折算值，在屏幕上显示的距离

例如：主设备占用了 50% 的屏幕空间，并将其从 25% 中移出，因此它总共占用了 75% 的屏幕空间。.

CLS 是 ：表面 x 距离 = 0,75 * 0,25 = 0,1875

因此，要使有关页面被视为 CLS 页面，必须进行修正。

Plus simplement, les outils de webperformance de Google permettent de relever le Cumulative Layout Shift d’une page donnée : PageSpeed Insights (site tiers) et Lighthouse (module du navigateur Google Chrome).

更简单地说，Google 的网络性能工具允许发布指定页面的 CLS：PageSpeed Insights（网站层）和 Lighthouse（Google Chrome 浏览器模块）。最好的数据源自然还是用户的原始数据，例如搜索控制台。在 Signaux Web Essentiels 报告中，我们重新列出了被视为 "缺陷 "或需要改进的页面数量，每个关键绩效指标都有自己的报告。.

这样就可以很容易地识别出受影响较大的页面，并与类似页面（gabarit/模板）进行分组。.

如何改进 CLS？

很好的创新，此外我们还提供了最大的测量数据、, 谷歌指南 pour résoudre d'éventuels problèmes d'instabilité visuelle.
我们还讨论了多个未来场景：

  • 无明确尺寸的图片或宣传品

  • 动态注入内容（弹出窗口）

  • 政策收费

在页面结构之后给图片充电的情况在各种类型的网站上都很常见，尤其是电子商务网站（图片或产品列表）。.

在下面的示例中，产品名称首先被充入，然后是产品图像。这些图片会删除已充入的名称，使页面在充入期间不稳定。.

Cumulative Layout Shift

在对这些图像充电之前，可以为它们指定专用区域，从而避免这种情况的发生。.

其中一种可能的方法是说明图像的尺寸，然后导航员通过计算大与小的比例（宽高比）来确定图像的空间大小。.

Cumulative Layout Shift

还可以在 CSS 中直接说明宽高比，以便应用于类似的图像类别。.

Comment améliorer le CLS - Cumulative Layout Shift ?

我们注意到，这一改进在网站投入使用时提高了相关网站的净得分：从 0.178 的 CLS 下降到 0.002。受网站不稳定性影响的访问者从 26% 下降到 1,27% （数据来源于搜索控制台，与网站用户的表现一致）。.