Google Page Speed Insights不喜欢我的懒加载英雄横幅

Question

我的首页上有一个巨大的英雄横幅，覆盖了整个屏幕，图像懒惰地加载，所以它是空白的，显示一个微调，直到它淡出。问题是Google page Speed Insights提到了渲染-阻塞CSS，并对该页面的可见内容进行了优先排序。然而，我在同一个网站上得到了98/100，但在不同的页面上没有英雄横幅。

因此，我认为可以肯定地说，图像导致了一个问题。当我查看报告上的屏幕截图时，它只是在图像加载之前显示空白的白色屏幕。我故意将它保留为空白，直到使用JavaScript完全加载和呈现它。有没有办法提高我的页面速度分数，尽管存在这种情况？

Answer 1

谷歌页面洞察正在渲染你的初始html响应，而不运行你的javascript或外部css文件。所以它能看到的只有你的html和嵌入样式。它会向你显示页面的前后变化，如果在这两个页面之间改变了太多像素，它会降低你的得分。

为了解决这个问题--不要懒惰地加载任何高于折叠层的东西。

我知道很多人说“不用担心谷歌页面速度洞察得分”，但我同意谷歌的这个建议-你的页面应该尽可能快地呈现上面的折叠内容，如果必要的话，推迟折叠下面的项目。