使用 PageSpeedInsights 测量的

nusun

CLS 分数较差时的行为和因素 CLS 分数较差时的行为 用户在 CLS 分数较差时遇到的行为是，他们试图点击的按钮被点击之前突然出现的按钮元素推出，而稍后出现的按钮被意外点击。这是一个案例无法按下按钮的地方。 当页面可见且布局因动画而发生变化，或者布局因图像加载缓慢而发生变化时，CLS 分数将会较差。有必要检查 JavaScript 的运行或图像等大文件的加载是否会导致 CLS 恶化。 如何计算布局偏移和 CLS 分数 如何计算布局移位分数 由于 CLS 分数是已发生的布局的累积数量，因此我们首先了解如何计算已发生的布局偏移。布局移动分数是根据占据设备显示区域的“总移动元素（影响系数）”和占据设备显示区域的“移动距离（距离系数）”来计算的。布局偏移的计算公式如下。



布局移 电话号码列表 位分数 = 总移位元素（影响系数） x 移动距离（距离系数） CLS 是布局变化的总（累积）分数。CLS 根据以下定义进行测量和评分。该定义于2021年6月2日发生更改，因此如果您了解之前的信息，请更新它。 单个会话窗口是 1 秒间隔内发生的布局变化的总和。 确定多个会话窗口的布局偏移的最大值作为CLS分数 CLS最高得分可达5秒 我们以 1 秒为间隔使用一个会话窗口的原因是，如果没有秒，布局变化将无限期地累积。如果无限地积累，你将无法定位瓶颈。此外，以前对最高分数没有限制，但现在 CLS 分数是每个会话窗口测量的 CLS 分数中的最高分数。 如何查看您的 CLS 分数 CLS 分数可以使用 PageSpeedInsights进行测量。CLS 分数因页面设计和模板文件而异，因此请检查每个不同模板的 CLS 分数。 ⇒查看PageSpeedInsights要检查PageSpeedInsights，只需在栏中输入您想要评分的页面的URL，如下图所示。页面速度洞察屏幕 如果在栏中输入URL并按“分析”按钮，几秒钟后就会显示CLS分数和判断结果。





查看下面显示分析结果的示例图像，CLS 为 0.09，判断为 GOOD。 使用 PageSpeedInsights 测量的 CLS 分数屏幕 如何提高CLS JavaScript 通常是导致 CLS 瓶颈的原因。您不仅需要验证您自己网站的 JavaScript，还需要验证第三方 JavaScript。在这里，我将介绍一下我是如何在CLS成绩不好的情况下提高成绩的。不同站点的CLS因子有所不同，因此这里介绍的信息仅供参考，您应该先通过测量来寻找因子。 如何提高 内容 指定图像和视频元素的宽度和高度 使用图像或视频时，请指定尺寸。使用宽度和高度来指定尺寸。如果检索图像或视频需要很长时间，请使用通过长宽比指定框大小的 CSS。 指定要显示的广告的容器大小。 当显示第三方发布的广告时，请提前指定所显示广告的容器尺寸。如果不指定容器大小，将会发生较大的布局偏移，因此在自动分发广告时请小心。 显示网络字体需要时间 Web 字体通常需要很长时间才能加载，并且加载字体后可能会发生布局变化。使用 font-display:swap 显示替代文本，或使用 preload 首先加载它。