google-pagespeed - 累积布局移位和 cookie 弹出窗口

Question

我想提高我的谷歌页面速度结果。我发现我的主要问题之一是累积布局移位。我意识到这个问题是由于 cookie 和促销弹出窗口引起的。

你有任何提示如何解决这个谷歌页面速度问题吗？我认为延迟呈现 cookie 弹出窗口是不正确的，谷歌可以检查这一点并将其标记为问题。

标签： google-pagespeed

Answer 1

您可以通过添加position:fixed到弹出窗口来解决此问题。这会将其从文档流中移除，并且不会导致布局偏移。（假设它更像是覆盖屏幕底部的吐司而不是对话框样式的弹出窗口）

您需要确保在弹出窗口之前在 HTML 中内联应用此样式，以在收到样式后阻止它移动。

或者，您可以将弹出窗口设置为页面顶部的栏（不必如此，position: fixed因为它可以将内容向下推），此时它将正确呈现（假设您内联 CSS）。

额外的好处是您的 cookie 同意/GDPR 合规性应位于 HTML 中，以便在您的网站上使用屏幕阅读器的人可以在与任何内容交互之前进行批准。

累积布局移位可以通过内联所有关键 CSS并确保稍后加载的项目具有正确大小的占位符来解决（即稍后加载的图像具有相同高度和宽度的占位符，因此布局不会在图像加载）