CLS问题：大于0.25（移动）

Question

Pagespeed 和 lighthouse（即使在慢速 3g 中）都显示出良好的结果（如附件所示）。但是我仍然收到网站管理员的警报。

CLS问题：大于0.25（移动）

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

页面洞察：

---

灯塔

现在这有点令人沮丧，不知道该怎么办。

Answer 1

使用 Lighthouse 等实验室工具调试 CLS 可能是一个困难的指标，因为它们默认情况下仅评估初始视口。换句话说，他们的行为不像真正的用户。当真正的用户登陆页面时，他们会滚动并单击内容。

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

我访问了该页面，使用它一秒钟后，我就可以通过向下滚动页面来实现显着的布局变化（0.484）：

似乎发生的情况是“类别：幽默”下面的广告被注入到页面中，并且其下面的所有内容都向下移动。

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

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

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

5. 开始测试

您可以在此处查看结果。

上面的幻灯片视图和视频演示了这个问题。页面部分加载并向下滚动到第 8 秒时，我们可以看到广告异步加载并将其下方的内容向下推送，导致布局偏移，得分为 0.409，足以导致页面体验需要评估为“穷”。

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

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

广告是网络布局变化的最大贡献者之一。广告网络和发布商通常支持动态广告尺寸。由于更高的点击率和更多的广告参与竞价，广告尺寸可以提高效果/收入。不幸的是，这可能会导致用户体验不佳，因为广告会将您正在查看的可见内容推送到页面下方。