我一直在使用 Google PageSpeed 见解来尝试提高网站的性能，到目前为止，事实证明它非常成功。像延迟脚本这样的事情工作得很好，因为我已经有了 jQuery 的内部版本.ready()要推迟脚本直到页面完全加载，我所要做的就是内联该特定函数并将完整脚本移至页面末尾。效果很好。
但现在我发现自己盯着清单上剩下的一个黄点：“消除首屏内容中的渲染阻塞 CSS”。
我的 CSS 设置方式是有一个全局的_.css文件包含通常适用于页面结构的样式，或者在网站上的一两个以上位置使用的样式。大多数页面都有一个关联的 CSS 文件（例如，party.php has party.css）包含特定于该特定页面的样式。正如我所附的，所有 CSS 文件都会无限期缓存/t=FILEMTIME文件名（然后使用 .htaccess 删除它们），以保证文件在更改时得到更新。
因此无论如何，Google 建议内联首屏内容所需的关键样式。问题是......好吧，看看这个截图：http://prntscr.com/1qt49e http://prntscr.com/1qt49e
如你看到的...ALL内容的内容位于首屏！人们讨厌滚动，尤其是在涉及加载许多页面的游戏中。因此，我将该网站设计为适合一个屏幕（假设分辨率足够好）。所以这意味着...ALL的样式适用于首屏内容！那么……有什么解决办法吗？或者我是否在原本接近完美的分数上被那个黄色标记所困扰？
之前有人问过一个相关问题：Google Pagespeed 中的“首屏内容”是什么？ https://stackoverflow.com/questions/18340402/what-is-above-the-fold-content-in-google-pagespeed
首先你必须注意到这都是关于'移动页面'.
所以当我正确解释你的问题和屏幕截图时，那就是不适合您的网站！
相反，按照谷歌在其指南中建议的一些做法，对于“正常”网站来说，事情会变得更糟而不是更好。
并不是所有来自谷歌的东西都因为来自谷歌而成为“圣杯”。如果您查看他们的 HTML 标记，他们本身并不是一个好的榜样。
我能给你的最好建议是：
- 在 CSS 中设置替换元素的宽度和高度，以便浏览器可以布局元素，而不必等待替换内容！
另外，为什么要使用不同的 CSS 文件，而不是只使用一个？
额外的请求比少量的数据量更糟糕。在第一个请求之后，CSS 文件无论如何都会被缓存。
人们应该始终注意的事情是：
并且不要让您的大脑困惑于如何获得 100% 的 Google PageSpeed Insights 工具......！ ;-)
添加 1：这是 Google 向我们展示的页面，他们推荐的内容优化 CSS 交付 https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery.
如前所述，我认为这既不现实，对于“正常”网站来说也没有意义！因为主要是当你有一个响应式网页设计最确定的是您使用媒体查询和其他布局样式。因此，如果你不打算先以阻塞方式加载 CSS，你会得到一个FOUT (闪烁的无样式文本）。我真的不相信这比渲染页面至少多几毫秒“更好”！
恕我直言，谷歌正在开始一场新的“炒作”（当我在 Stackoverflow 上查看所有有关它的问题时）......！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
