累积版式移位和Cookie弹出

时间:2020-06-29 12:29:09

标签: google-pagespeed

我想提高我的Google页面速​​度结果。我发现我的主要问题之一是累积版式移位。我意识到此问题是由于Cookie和促销弹出窗口引起的。

您有如何解决此Google页面速​​度问题的提示吗?我认为延迟渲染Cookie弹出窗口是不正确的,Google可以检查并标记为问题。

1 个答案:

答案 0 :(得分:2)

您可以通过在弹出窗口中添加position:fixed来解决此问题。这将使它脱离文档流,并且不会引起版式移位。 (假设它更像是覆盖屏幕底部的烤面包,而不是对话框样式的弹出窗口)

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

或者,您也可以将弹出式窗口设置为页面顶部的一个栏(不必为position: fixed,因为它可以向下拖动内容),此时它将正确呈现(假设您内联了CSS)。

这是您的Cookie同意/ GDPR合规性应放在HTML中的位置,这是增加的奖励,以便在您的网站上使用屏幕阅读器的用户可以在与任何内容进行交互之前批准。

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