google-pagespeed - Cumulative Layout Shift 和 cookies 弹出窗口

Question

我想提高我的谷歌页面速度结果。我发现我的主要问题之一是 Cumulative Layout Shift。我意识到这个问题是由 cookie 和促销弹出窗口引起的。

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

Answer 1

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

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

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

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

Cumulative Layout Shift 可以通过 inlining all critical CSS 解决并确保稍后加载的项目具有正确大小的占位符(即稍后加载的图像具有相同高度和宽度的占位符，以便在图像加载时布局不会改变)