CLS发行:超过0.25 (移动)

Question

无论是分页和照明(即使在缓慢的3g)显示良好的结果，如附件。然而，我仍然保持警惕的网站管理员。

CLS发行:超过0.25 (移动)

网址：https://gpuzzles.com/mind-teasers/astronauts-key/

页面-INSIGHT：

​

​

灯塔

​

，这是一种水果，现在不知道该做什么.

Answer 1

使用灯塔这样的实验室工具来调试CLS可能是一个困难的度量，因为它们只在默认情况下评估初始视图端口。换句话说，他们的行为不像一个真正的用户。当一个真正的用户登陆到一个页面上时，他们会滚动并点击一些东西。

因此，在尝试调试Core问题时，特别是对于CLS，我建议您自己使用启用Chrome的Web Vitals扩展的诊断工具访问该页面。

我访问了这个页面，在使用它的短短一秒之后，我就能够通过滚动页面向下滚动页面，从而产生了很大的布局变化(0.484)：

​

​

似乎正在发生的事情是，在“类别:幽默”下面的广告被注入到页面中，下面的所有内容都向下移动。

​

​

为了再现这一点，我使用WebPageTest来模拟真正的用户向下滚动页面的行为。

1. 转到webpagetest.org
2. 输入您的URL
3. 转到“高级设置”部分的“高级”选项卡
4. 在“注入脚本”下，输入以下代码以滚动500 by的页面：

window.addEventListener('DOMContentLoaded', function() {
  window.scrollBy(0, 500);
});

1. 开始测试

你可以看到这里的结果。

​

​

​

​

上面的电影片视图和视频演示了这个问题。在页面部分加载并在8秒点向下滚动之后，我们可以看到广告异步加载并将其下方的内容向下推送，导致版面移位，得分为0.409，足以使页面体验被评估为“差”。

如果大多数用户在页面加载后不久就会向下滚动，那么这就是为什么您的第75百分位数CLS评分处于“差”类别的原因。

要修复这些由广告引起的布局变化，请参阅https://web.dev/optimize-cls/#ads-embeds-and-iframes-without-dimensions上的建议

广告是网络布局变化的最大贡献者之一。广告网络和出版商通常支持动态广告大小。广告规模增加表现/收入，因为更高的点击率和更多的广告竞争在拍卖。不幸的是，这可能导致一个次优的用户体验，因为广告推送您正在浏览的页面上的可见内容。