什么是累积布局偏移以及如何优化它？

dirilisartogul.

影响性能分数的六个标准中的最后一个标准是累积布局偏移或 CLS。当然，我们在文章中专门讨论了这个标准，什么是累积转移。感谢 Lighthouse，该指标也于 2020 年添加到了新的 GTmetrix 中。正如我们迄今为止共同回顾的，GTmetrix 的标准除了速度之外，还充分关注用户体验（ UX ）。但累积布局偏移量仅涉及用户体验，与页面速度无关。也许这就是为什么CLS 对性能分数的影响小于其他情况，只有 5%。但这并不意味着这个标准不那么重要。事实上，CLS衡量的是页面在加载过程中的稳定性。 让我们一起来看一个实际场景。您是否注意到，在进入页面后，当页面仍在加载时，页面的其中一项内容（例如照片、段落、按钮等）被意外移动？ 这称为布局转换。如果您有过这种糟糕的经历，您就会完全理解为什么 CLS 基准测试是由 Web 开发人员创建的，并且现在是 GTmetrix 基准测试的一部分。

页面元素位移的总和决定了累积布局偏移的量，它越低，我们的页面就越稳定和更好的用户体验。内容移动有时是由于页面上的广告突然出现在页面顶部，导致页面其他内容下移。 有时这种转变只会让我们感到惊讶并失去我们正在阅 阿尔及利亚 手机号码 读的文本。但有时，当我们想点击某个按钮时，转移就会发生，让我们点击另一个按钮或链接，进入另一个页面；这意味着糟糕的用户体验！ web.dev 的另一张照片显示了累积布局偏移指标的重要性。 累积布局偏移测量 累积布局偏移测量 CLS优化方法： 和之前的案例一样，我们首先检查CLS的GTmetrix评分： 0.1以下：良好 0.1 到 0.15 之间：可以接受，但需要优化 0.15 至 0.25 之间：比标准稍长 大于 0.25：比标准长很多 为了减少累积布局偏移，建议遵守以下几点： 指定照片和视频的尺寸 减少广告、嵌入和 iframe 造成的流量 不在页面内容之上创建动态内容（除非响应用户的请求） 简介： CLS 是检查页面加载期间元素稳定性的基准，完全专注于创建用户体验。该标准也存在于 Core Web Vitals 中。



页面的内容和元素不应意外移动并导致用户困惑。 如果您想了解更多信息，请务必阅读文章什么是累积布局偏移，我们在那里解释了更多详细信息。 检查性能报告中的浏览器计时 好了，最后，GTmetrix 中提高性能分数的 6 个重要且关键的标准回顾结束了。在本文的最后部分，我们快速浏览一下浏览器计时部分并快速分析其报告。您应该知道，本节中的所有计时均与 GTmetrix 更新无关，并且在该工具的先前版本中，所有这些项目都在“计时”选项卡中可见。 GTmetirx 中的浏览器计时 new GTmetirx 中的浏览器计时 new 重定向持续时间：如果在进入此页面之前已完成重定向，则此部分将指定时间。否则，我们会看到数字零（如上图所示）。 连接持续时间：重定向（如果有）后，连接到服务器创建请求所需的时间称为连接持续时间。