Cumulative Layout Shift 和 cookies 弹出窗口
Cumulative Layout Shift and cookies popup
我想提高我的 google 页面速度结果。我发现我的主要问题之一是 Cumulative Layout Shift。我意识到这个问题是由 cookie 和促销弹出窗口引起的。
您有什么解决此 google 页面速度问题的技巧吗？我认为延迟呈现 cookie 弹出窗口不正确，google 可以检查并标记为问题。
您可以通过在弹出窗口中添加 position:fixed 来解决这个问题。这会将其从文档流中移除，并且不会导致布局偏移。 （假设它更像是覆盖屏幕底部的吐司而不是对话框样式的弹出窗口）
您需要确保在弹出窗口之前的 HTML 中内联应用此样式，以在收到样式后阻止它四处移动。
或者，您可以将弹出窗口设置为页面顶部的栏（不必 position: fixed，因为它可以将内容向下推），此时它会正确呈现（假设您内联你的 CSS).
额外的好处是您的 cookie 同意/GDPR 合规性应位于 HTML 中，以便在您网站上使用屏幕 reader 的人可以在与任何内容交互之前获得批准。
累积布局偏移可以通过 inlining all critical CSS 解决，并确保稍后加载的项目具有正确大小的占位符（即稍后加载的图像具有相同高度和宽度的占位符，因此布局不会'在加载图像时更改)
我想提高我的 google 页面速度结果。我发现我的主要问题之一是 Cumulative Layout Shift。我意识到这个问题是由 cookie 和促销弹出窗口引起的。
您有什么解决此 google 页面速度问题的技巧吗？我认为延迟呈现 cookie 弹出窗口不正确，google 可以检查并标记为问题。
您可以通过在弹出窗口中添加 position:fixed 来解决这个问题。这会将其从文档流中移除，并且不会导致布局偏移。 （假设它更像是覆盖屏幕底部的吐司而不是对话框样式的弹出窗口）
您需要确保在弹出窗口之前的 HTML 中内联应用此样式，以在收到样式后阻止它四处移动。
或者，您可以将弹出窗口设置为页面顶部的栏（不必 position: fixed，因为它可以将内容向下推），此时它会正确呈现（假设您内联你的 CSS).
额外的好处是您的 cookie 同意/GDPR 合规性应位于 HTML 中，以便在您网站上使用屏幕 reader 的人可以在与任何内容交互之前获得批准。
累积布局偏移可以通过 inlining all critical CSS 解决，并确保稍后加载的项目具有正确大小的占位符（即稍后加载的图像具有相同高度和宽度的占位符，因此布局不会'在加载图像时更改)