Google Page Speed Insights 不喜欢我的延迟加载英雄横幅答案

【问题标题】：Google Page Speed Insights doesn't like my lazy loading hero bannerGoogle Page Speed Insights 不喜欢我的延迟加载英雄横幅
【发布时间】：2017-06-02 14:43:43
【问题描述】：

我的首页上有一个巨大的英雄横幅，覆盖了整个屏幕，并且图像延迟加载，所以它是空白的，并显示一个微调器直到它淡入。问题是 Google Page Speed Insights 提到了渲染阻止 CSS 和优先考虑此页面的可见内容。但是，我在同一个网站上得到了 98/100，但在没有英雄横幅的不同页面上。

所以，我认为可以肯定地说图片引起了问题。当我查看报告上的屏幕截图时，它只显示加载图像之前的空白屏幕。我故意将其保持为空白，直到使用 JavaScript 完全加载和渲染。尽管有这种情况，有什么方法可以提高我的 Page Speed 分数？

【问题讨论】：

不要太在意谷歌所说的。如果您的页面加载速度足够快，那就没问题了。
真的有问题还是只是为了提高分数而提高分数？
嗯，更好的分数对 SEO 有好处不是吗？
我不认为延迟加载是关于分数的问题。如果它说它正在对接您以渲染阻塞 CSS，那么很可能它与延迟加载无关，而是与您部署样式表的方式有关。查看来自 Google 的 this link on CSS Render Blocking。另外，我建议您试用 Chrome Canary。他们最近实施了一种使用 Lighthouse 以及其他很棒的新功能来审核网站的新方法。

标签： javascript css google-pagespeed

【解决方案1】：

Google 页面洞察力在不运行您的 javascript 或外部 css 文件的情况下呈现您的初始 html 响应。所以它看到的只是你的 html 和嵌入的样式。它会向您显示页面的前后变化，如果两者之间的像素变化过多，则会降低您的分数。

要解决这个问题 - 不要延迟加载首屏之上的任何内容。

我知道很多人说“不要担心 google 页面速度洞察分数”，但我同意 google 的这项建议 - 您的页面应尽可能快地呈现首屏内容，并在必要时推迟首屏内容.

【讨论】：

我不同意。有时，如果没有 JavaScript 操作，折叠的顶部会看起来很丑。最好让用户稍等片刻，以获得更好的第一印象。
如果您的首屏内容依赖于 JavaScript 操作，那么无论如何您将无法以足够快的速度呈现它以在 google 中获得高分。无论如何，这是一个特定的案例。
@TomerAlmog 但是不会延迟加载它只会让你的页面更慢，因为浏览器现在必须拉入大图像才能开始渲染？故意让你的页面慢一点，只是为了让谷歌认为它实际上更快，这似乎适得其反。
我同意@Lawyerson，但谷歌重视快速初始渲染。我确实同意有些事情没有意义，例如，在外部文件中加载和缓存 css 对用户来说更好，而不是在每个页面中再次加载它。但谷歌会为此扣分。