google-search-console - 如何减少 CLS 问题：超过 0.25（桌面）

Question

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

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

我们如何解决这些问题？

先感谢您。

Answer 1

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

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

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

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

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