我一直在使用 Google PageSpeed insights 来尝试改进我网站的性能，到目前为止，它被证明是非常成功的。诸如延迟脚本之类的东西工作得很好，因为我已经有了一个内部版本的 jQuery 的 .ready() 来延迟脚本直到页面完全加载，我所要做的就是内联那个特定的函数和将完整脚本移至页面末尾。效果很好。
但现在我发现自己正盯着 list 上剩下的一个黄点:“消除首屏内容中的渲染阻塞 CSS”。
我的 CSS 设置方式是有一个全局 _.css 文件，其中包含适用于一般页面结构的样式，或者在整个网站的一两个地方使用的样式.大多数页面都有一个关联的 CSS 文件(例如，party.php 有 party.css)，其中包含特定于该特定页面的样式。所有 CSS 文件都被无限期缓存，因为我将 /t=FILEMTIME 附加到文件名(然后使用 .htaccess 删除它们)以保证文件在更改时得到更新。
因此，无论如何，Google 建议内联首屏内容所需的关键样式。问题是......好吧，看看这个截图:http://prntscr.com/1qt49e
如您所见...所有 内容都在首屏!人们讨厌滚动，尤其是在涉及加载许多页面的游戏中。所以我将网站设计为适合一个屏幕(假设分辨率足够好)。所以这意味着... 所有 样式都适用于首屏内容!那么……有什么解决办法吗？还是我在接近完美的分数上被那个黄色标记卡住了？
最佳答案
之前有人问过相关问题:What is “above-the-fold content” in Google Pagespeed?
首先您必须注意到，这都是关于“移动页面”的。
因此，当我正确解释了您的问题和屏幕截图后，这不适用于您的网站!
相反 - 执行 Google 在其指南中建议的一些事情对于“普通”网站来说只会变得更糟而不是更好。
并非所有来自 Google 的东西都因为来自 Google 而成为“ chalice ”。如果您查看他们的 HTML 标记，他们本身并不是一个好的榜样。
我能给你的最好建议是:
- 在 CSS 中设置替换元素的宽度和高度，以便浏览器可以布局元素，而不必等待替换的内容!
此外，为什么您使用不同的 CSS 文件，而不是一个？
额外的请求比小数据量更糟糕。在第一个请求之后，CSS 文件无论如何都会被缓存。
人们应该始终注意的事情是:
- 尽可能减少请求数量
- 尽可能降低整体页面权重
不要为如何获得 100% 的 Google PageSpeed Insights 工具而绞尽脑汁......! ;-)
添加 1:这是 Google 向我们展示的页面，他们为 Optimize CSS Delivery 推荐的内容.
如前所述，我认为这对于一个“普通”网站来说既不现实也不有意义!因为主要是当您拥有响应式网页设计时，您肯定会使用媒体查询和其他布局样式。因此，如果您不首先加载 CSS 并以阻塞方式加载，您将得到一个 FOUT(Flash Of Unstyled Text)。我真的不相信这比至少多花几毫秒来呈现页面“更好”!
恕我直言，Google 正在开始新的“炒作”(当我在 Stackoverflow 上查看所有关于它的问题时)...!
关于css - "Eliminate render-blocking CSS in above-the-fold content"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18761251/