如何减少 CLS 问题：超过 0.25（桌面）答案

【问题标题】：How to reduce CLS issue: more than 0.25 (desktop)如何减少 CLS 问题：超过 0.25（桌面）
【发布时间】：2021-12-11 17:27:45
【问题描述】：

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

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

我们如何解决这些问题？

提前谢谢你。

【问题讨论】：

请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。
如上所述将您的问题拆分为问题之一，CSL 或 LCP。并提供引起您关注的页面的 url 示例。
CLS URL - sopact.com/monitoring-and-evaluation sopact.com/impact-measurement @TonyMcCreath

【解决方案1】：

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

展开每个问题以获取有关导致问题的原因以及有时如何解决问题的更多详细信息。

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

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

我感觉在您的情况下，您有一些元素在加载时会在屏幕外扩展您的主 div，并导致它发生变化。 Page Speed Insights 列出了一些可以调整的元素，以便它们不会扩展 div 作为负载。例如提前定义它们的高度。

【讨论】：