CLS 问题：大于 0.25（移动）

Question

pagespeed 和 lighhouse（即使在慢速 3g 下）都显示出良好的效果，如附件所示。但是我仍然收到网站管理员的提醒。

CLS 问题：超过 0.25（移动）

URL : https://gpuzzles.com/mind-teasers/astronauts-key/

页面洞察力：

灯塔

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

Answer 1

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

因此，在尝试调试 Core Web Vitals 问题时，尤其是对于 CLS，我建议您使用启用了 Web Vitals extension for Chrome 之类的诊断工具自行访问该页面。

我访问了该页面，在使用它一秒钟后，通过向下滚动页面，我能够进行相当大的布局偏移 (0.484)：

好像是“category : humour”下面的广告被注入了页面，下面的所有内容都向下移动了。

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

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

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

开始测试

你可以看到 results here.

上面的幻灯片视图和 video 证明了这个问题。在页面部分加载并在 8 秒标记处向下滚动后，我们可以看到广告异步加载并向下推送其下方的内容，导致布局偏移，得分为 0.409，足以让页面体验得到评估作为“穷人”。

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

要修复这些由广告引起的布局偏移，请参考 https://web.dev/optimize-cls/#ads-embeds-and-iframes-without-dimensions 中的建议：

Ads are one of the largest contributors to layout shifts on the web. Ad networks and publishers often support dynamic ad sizes. Ad sizes increase performance/revenue due to higher click rates and more ads competing in the auction. Unfortunately, this can lead to a suboptimal user experience due to ads pushing visible content you're viewing down the page.

CLS 问题：大于 0.25（移动）

CLS issue: more than 0.25 (mobile)

html

seo

core-web-vitals