如何减少 CLS 问题：大于 0.25（桌面）

Question

目前，97 个 URL 受到 CLS 问题的影响超过 0.25（桌面）和 85 个受 LCP 问题影响的 URL：在我们的网站上超过 4s（移动）。

网站 - www.sopact.com 进行调查。

我们如何解决这些问题？

提前致谢。

Answer 1

运行 Page Speed Insights 中的一些受影响的页面。 Select 桌面是您最大的问题区域。该工具有一个“显示与以下内容相关的审核”选项，您可以在其中 select CLS。然后该报告将仅显示与在桌面设备上导致布局偏移相关的问题。

展开每个问题以详细了解导致问题的原因以及解决问题的方法。

如果您想更深入地挖掘 Chrome 浏览器性能工具可以提供很多详细信息。它还可以让您限制浏览器，以便您可以更轻松地看到发生的布局变化。

如果启用屏幕截图，您可以将鼠标悬停在屏幕截图行上，以查看页面在加载时如何变化。确保您开始将鼠标悬停在新页面加载的位置，因为初始部分显示的是被替换之前的前一页。

我觉得在你的情况下你有一些元素在屏幕外扩展你的主要 div 当它们加载时，并导致它移动。 Page Speed Insights 列出了一些可以调整的元素，以便它们不会将 div 扩展为负载。例如提前定义他们的身高。