需要帮助:您能识别我的URL上的桌面CLS (累积布局移位)吗？

Question

网址: tinyurl.com/36utmdnc

在中，我看到了Core的数千个错误，特别是桌面模式下的CLS。我做了很多改变，比如删除所有的广告，调整CSS，HTML和其他代码。实际上，我已经做了一年的改变，但在过去的2-3个月里，我真的尝试过解决这个问题，因为“页面体验”显示“好的URL”大幅减少，我相信它正在影响我在Google搜索中的流量。现在已经过了几个星期了，搜索控制台中的CLS没有改变。我已经验证了几个月了。

根据/，上面的示例URL (产品页面)的CLS评分为0.33。看起来所有的错误都出现在我的产品页面上，就像上面的例子一样。我在PageSpeed Insight中运行了测试，它显示了一个"0“的CLS。据我所知，谷歌搜索控制台显示的报告来自"Chrome用户体验报告“，这与PageSpeed Insight的”实验室设置“不同。

以下是我所做的事情：

• 打开并单击“布局移位区域”复选框，该区域在布局转换期间闪烁蓝色。还检查了"Core“，以便能够在整个浏览体验中叠加CLS。
• 打开Network，将速度降低到“非常慢的测试”，并在页面缓慢加载时仔细监视布局变化。
• 仔细阅读web.dev/cls/上的指南，运行Chrome的LightHouse测试，在webvitals.dev/cls、defaced.dev/tools/layout gif-生成器/、webpagetest.org/webvitals等不同站点上进行测试。
• 手动测试使用不同的屏幕分辨率宽度/高度使用Chrome开发工具(800 etc宽度，1400 etc宽度，8000 etc高度等)。
• 请精通技术的朋友/用户也检查并帮助识别CLS。

我找不到任何可能导致0.33的大CLS的东西。搜索控制台中CLS错误的数量是稳定的，每天上升和下降大约100个URL，但是上面这个例子URL已经停留了几个月了。所以我希望有知识的人能找到它或者找出潜在的问题。

谢谢

Answer 1

我不能看到该页面的CLS评分为0.33，而且我也认为自己测试它显示的CLS很少。

您是正确的，PageSpeed洞察是基于实验室的，但它也显示了顶部的基于字段的数据，在这种情况下，它是说它没有足够的基于字段的数据为这个网址，所以是显示原版的数据，为您的网站的所有页面。

​

​

Google搜索控制台也显示基于字段的数据，但分组页面可能是相似的，并给他们所有相同的CLS分数。这是在一个更低层次的分组比整个起源，所以它可以分组您的所有产品页面在一起，例如，如果它有一些数据。

例如，此页有一个悬停效应，当使用它时，它会给提供巨大的CLS --但不太明白为什么在开发工具中很难手动触发。

这些页面可能是有实际CLS问题的页面，并且它们被合并到产品页面组下的好页面中。如果你能减少悬停效应的话，我会调查。

另外，我注意到您正在延迟加载图像，但是加载了没有在它们上指定宽度和高度。如果图像在该区域滚动到视图例如，当链接到页面底部的位时，此测试。时未加载，这将导致CLS。它是建议在延迟加载的图像上始终包括图像维数。 (事实上，在所有图像上！)为了避免这件事。这可能是您的高CLS的另一个原因，这在基于实验室的工具中并不明显，因为这些工具通常只加载页面的顶部而不加载延迟加载的内容。

我还建议您阅读在字段中调试Web Vitals和更高级的使用Google 4和BigQuery测试和调试性能，以获得关于如何回答为什么您的基于字段的度量可能与您可以观察到的不同的其他信息。