【问题标题】:Cumulative Layout Shift and cookies popup累积布局移位和 cookie 弹出窗口
【发布时间】:2020-06-29 12:29:09
【问题描述】:

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

你有什么技巧可以解决这个谷歌页面速度问题吗?我认为延迟渲染 cookie 弹出窗口是不正确的,谷歌可以检查并标记为问题。

【问题讨论】:

    标签: google-pagespeed


    【解决方案1】:

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

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

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

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

    累积布局移位可以通过inlining all critical CSS 解决,并确保稍后加载的项目具有正确大小的占位符(即稍后加载的图像具有相同高度和宽度的占位符,因此布局不会改变图像加载)

    【讨论】:

      猜你喜欢
      • 2021-05-28
      • 2020-12-31
      • 2022-07-23
      • 1970-01-01
      • 1970-01-01
      • 2022-11-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多