累积布局转变：提高 Google CLS 分数

当您尝试下订单时，您是否遇到过结帐按钮消失的情况？

是的！ 这令人沮丧。

事实是，它发生得太频繁了，而且发生在我们太多人身上。

值得庆幸的是，谷歌一如既往地把用户体验放在首位。

这就是为什么从 2021 年开始，它将推出三个新的性能指标作为其核心 Web Vitals 的一部分。

Core Web Vitals 旨在测量页面的加载速度、交互性和视觉稳定性。

三个指标代表这些：

1.最大的内容涂料（LCP）

2. 首次输入延迟 (FIP)

3. 累积布局移位（CLS）

让我们从用户和网站管理员 (SEO) 的角度来理解 CLS。

什么是累积布局移位？

累积布局偏移 (CLS) 代表网站的视觉稳定性。

它测量页面上微不足道的布局变化量。

意外的布局变化是网页在没有用户输入的情况下自行移动的结果。

Google CLS 是一种指示器（信号），您可以通过测量页面元素的意外移动影响用户体验的频率来解决问题。

当可见元素的位置从一个渲染帧更改为下一帧时，布局中的任何时候都可能发生变化。

让我们试着理解一下常见的含义，用简单的话来定义“Cumulative Layout Shift”：

累积是数量的增加。

布局是框架

转变是位置的变化

简而言之，Cumulative Layout Shift 是网站设计位置中所有单个框架变化的总和。

图片来自 web.dev

标准 CLS 分数应低于 0.1。

衡量这一点的一个很好的阈值是移动和桌面设备上页面加载的 75%。

在上图中，很明显，根据 Google：

1、如果CLS分数小于0.1，就是一个好信号。 这意味着您的网站没有任何布局变化的问题。

2. 如果 CLS 分数在 0.1 到 0.25 之间，则表示您的网站在视觉布局上需要一定的改进。

3.如果CLS分数大于0.25，则为信​​号差，也意味着视觉元素的运动发生非常频繁。

累积版式偏移如何计算？

Google 通过计算每次意外布局偏移的影响分数和距离分数来计算页面的 CLS。

CLS的影响分数

它测量不稳定元素在两帧之间的视口区域中占用的空间量。

计算 CLS 影响分数的公式

要计算布局移位分数，我们需要影响分数。

如何计算 CLS 的影响分数？

图形表示将帮助您更好地理解影响分数。

 Impact Fraction = [Area of​​ Impact Region] / [Area of​​ Viewport] Impact Fraction = [330 x 490] / [375 x 667] Impact Fraction = [161700] / [250125] Impact Fraction = 0.645

CLS的距离分数

它是页面元素从原始位置移动到最终位置的空间量的度量，该位置基本上在布局中发生了变化。

为避免过度惩罚情况，通过引入距离分数将大元素移动少量。

计算 CLS 距离分数的公式

如何计算 CLS 的距离分数？

图形表示将帮助您更好地理解距离分数。

距离分数 = [最大。 移动距离] / [视口高度]距离分数 = [120] / [667]距离分数 = 0.179

计算 Google CLS 分数的公式

累积布局分数是通过将影响分数乘以距离分数来计算的：

 累积布局偏移 (CLS) = 影响分数 x 距离分数

CLS = 0.645 x 0.179 CLS = 0.1154 。

随着冲击力和距离分数的增加，CLS 分数不断上升。

用一个简单的例子来累积布局移位。

您访问了一个站点并看到了一些有趣的内容。

你继续点击链接。

但就在您要点击链接时，它在网页中向下移动了半英寸，您最终点击了位于其上方的广告。

来源：nitropack.io

听起来不公平，对吧？

这是一个意想不到的布局转变。

这仅意味着您将被重定向到一些不需要的登录页面，您必须从该页面返回原始网页。

我们还有一些被称为预期布局转变的东西。

当您单击网页上的某些内容时会发生这种情况，它会更改页面的当前布局。

例如，您去博客寻找特定的信息。

只要您在搜索栏中输入主题名称，它就会检索特定的博客文章，您可以在其中找到所需的信息或提出与该主题相关的几篇博客文章。

资料来源：nitropack.io

这是网页的预期结果，可以认为是预期的布局转变。

是什么导致 CLS 问题？

根据搜索引擎巨头 Google 的说法，Cumulative Layout Shift 有 5 个可能的原因：

没有尺寸的图像和视频

建议始终指定图像和视频的宽度和高度。

您还可以利用 CSS 纵横比框来允许浏览器在加载图像时在网页上分配适量的空间。

没有尺寸的广告、嵌入和 iframe

广告尺寸可以通过高点击率增加收入。

但是，这可能会通过将内容下推到页面下方而损害用户体验的质量。

可以通过为广告位保留空间、通过为广告位保留尽可能大的尺寸来消除偏移或根据历史数据选择广告位的最佳尺寸来减轻这种布局变化。

动态注入内容

避免在现有内容之上插入任何新内容，除非它是为了响应用户交互。

这将确保始终预期发生的任何布局变化，而不是触发图像或文本意外移动。

导致 FOIT/FOUT 的 Web 字体

尝试将 font:display 值与您的自定义字体（如 auto、swap、block、fallback 和 optional）一起使用，以防止不必要的布局变化。

要确定没有布局偏移，请使用 font:display 和链接 rel=preload。

在字体资源完全下载之前，任何使用该字体的元素都将被隐藏，称为 FOIT（不可见文本的 Flash）。

来源： malthemilthers.com

在加载自定义字体之前，在字体堆栈中显示后备字体称为 FOUT（无样式文本的 Flash）。

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

总是为触发布局更改的属性动画选择“转换”动画。

Google CLS 分数如何通过广告影响？

要处理导致 CLS 的广告，您需要设置广告要展示的元素的样式。

因此，如果您对 div、WordPress 中的图像或视频分区或任何具有特定高度和宽度测量的网站元素进行样式设置，您的广告将仅被限制在上述尺寸范围内。

如果包含广告的元素没有显示广告，您可以将其设置为替代横幅广告或占位符图像可以填充空白空间。

或者，对于某些布局，广告可能会填充页面右侧或左侧装订线中一列顶部的整行。

如果该页面未显示，则不会发生变化，并且在移动设备或台式机上也不会产生任何影响。

但是，您应该注意，这取决于主题布局，如果广告库存存在问题，您必须对其进行测试。

Web开发过程中CLS如何滑动？

Google CLS 可能会滑过开发阶段。

这是可能发生的事情。

呈现网页所需的许多资产都加载到浏览器的缓存中。

下次开发人员访问正在开发的页面时，他们不会注意到布局变化，因为页面元素已经下载。

因此，建议在现场或实验室进行测量。

累积布局移位测试

累积布局转换性能网站指标可以通过以下任何一种方式来衡量：

现场工具

在现场：在实际与页面交互的真实用户上。 可以使用以下现场工具进行测量：

Chrome 用户体验报告

它为现实世界的 Chrome 用户如何体验网络上的热门目的地提供用户体验指标。

PageSpeed 见解

该工具分析网页的内容并生成建议以使该页面比以前更快。

Search Console（Core Web Vitals 报告）

Search Console会根据实际使用情况数据（有时称为字段数据）显示您的网页的执行情况。

实验室工具

在实验室中：使用工具在受控环境中模拟页面加载可以使用以下实验室工具进行测量：

Chrome 开发者工具

Chrome DevTools 可以帮助您即时编辑页面并快速诊断问题，最终使您能够更快地构建更好的网站。

灯塔

LightHouse是用于提高网页质量的开源自动化工具。

您可以针对任何网页、公共网页或需要身份验证的网页运行它。

它对性能、可访问性、渐进式 Web 应用程序、SEO 等进行审计。

网页测试

使用真实浏览器以消费者连接速度在全球范围内运行免费的网站速度测试，并提供详细的优化建议。

根据web.dev ； 注意：实验室工具通常在合成环境中加载页面，并且仅在页面加载期间测量布局变化。

因此，实验室工具为给定页面报告的 CLS 值可能低于实际用户在该领域的体验。

检查累积布局偏移的快速工具

1. 来自 Chris Johnson 的 Defaced Tool 的 GIF 格式 CLS 以识别有问题的 LS。

2. 累积版面偏移计算器

CLS 计算中的缺陷

谷歌收到了关于 CLS 指标不足以衡量长时间打开的网页的反馈，以较低的分数惩罚它们。

谷歌审查了三个更新其 CLS 得分方式的解决方案，因此无需担心 CLS 得分会因这一变化而变差。

用于测量 CLS 的会话窗口

Google 采用会话窗口方法来衡量 CLS。

页面元素的度量是在会话窗口中度量的，会话窗口对应于用户向下滚动网页时到达的网页的不同部分。

每个会话窗口的总分是累积的布局偏移，即整个页面的总偏移。

3% 具有无限滚动或用户界面处理程序对用户交互反应缓慢的网页将看到他们的分数上升到良好的评级。

更新使 CLS 分数更准确

随着新的评分系统变得更加公平，这对出版商来说是一个好处，特别是对于长时间打开或使用无限滚动并因此而被不公平评分的网页。

随着 Core Web Vitals 指标将在 2021 年 5 月成为排名因素，在最后一分钟做出重要更改。

结论

了解 Cumulative Layout Shift (CLS) 将帮助您在未来几天提供更好的用户体验。

由于该指标是改善用户体验的核心 Web Vitals 的一部分，并计划在 2021 年成为排名信号，因此了解其重要性和对您网站的影响非常重要。