Your background images might be causing CLS

这则博客文章探讨累积布局偏移(CLS)问题及其对网页性能的影响。Google 的核心网络指标之一就是 CLS ,它衡量网页内容在初始加载之后意外偏移的情况。

CLS 产生的原因

如何衡量 CLS

CLS 的衡量标准是十进制。小于或等于 0.1 是好的 CLS 分数,大于 0.25 是差的。Google 根据一系列突发的意外偏移来评价 CLS 。

如何避免意外累积布局偏移

避免 CLS 的方法包括:

在开发过程中检查 CLS

您可以使用 Chromium 浏览器的性能标签来识别布局偏移和相关分数。也可以开启 CPU 和网络节流来模仿慢速互联网和电脑环境。

CLS 不仅影响前台元素

CLS 计算网页中所有元素的变化,包括背景中可能不会影响用户操作的元素。

如何在生产环境中发现真实用户的 CLS

真实用户使用网站时收集的数据比在开发过程中进行检查要真实得多。文章作者使用 Sentry 来监控个人网站的性能和核心网络指标。Sentry 性能提供的资源包括可以识别 CLS 源的相关标签,以及相关的 HTML 元素。

CLS 源发现