html - CLS 问题 : more than 0. 25(移动)

Question

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

CLS 问题:超过 0.25(移动)

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

页面洞察:

---

灯塔

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

Answer 1

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

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

我访问了这个页面，在使用它一秒钟后，我通过向下滚动页面来进行大量的布局转换 (0.484):

似乎正在发生的事情是“category : humor”下方的广告被注入(inject)到页面中，并且其下方的所有内容都向下移动。

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

1. 转到 webpagetest.org
2. 输入您的网址
3. 转到“高级设置”部分的“高级”标签
4. 在“注入(inject)脚本”下，输入此代码以将页面滚动 500 像素:

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

1. 开始测试

你可以看到 results here .

上面的幻灯片 View 和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.