“消除首屏内容中的阻止渲染的CSS”

Question

我一直在使用Google
PageSpeed见解来尝试改善网站的性能，到目前为止，事实证明它非常成功。推迟脚本之类的事情可以很好地工作，因为我已经拥有一个内部版本的jQuery，.ready()可以将脚本推迟到页面完全加载之前，我要做的就是内联该特定函数并将完整的脚本移到页面末尾。效果很好。

但是现在我发现自己瞪着清单上剩下的一个黄色圆点：“在首屏内容中消除渲染阻止CSS”。

设置我的CSS的方法是拥有一个_.css包含通用样式的全局文件，这些样式通常应用于页面结构，或者在整个网站的一两个以上位置中使用。然后，大多数页面都有一个关联的CSS文件（例如party.php具有party.css），其中包含特定于该特定页面的样式。我将所有CSS文件无限期地缓存，因为我会附加/t=FILEMTIME到文件名（然后使用.htaccess删除它们），以确保在更改文件时对它们进行更新。

因此，无论如何，Google建议内嵌折叠内容所需的关键样式。问题是…好了，请看以下屏幕截图： http

//prntscr.com/1qt49e

如您所见… 所有
内容都在首位！人们讨厌滚动，特别是在涉及加载许多页面的游戏上。因此，我将网站设计为适合一个屏幕（假定分辨率足够好）。因此，这意味着… 所有
样式都适用于首屏内容！那么…有什么解决办法吗？还是我在那个接近完美的得分上留下了那个黄色标记？

Answer 1

之前有人问过一个相关的问题： GooglePagespeed中的“首屏内容”是什么？

首先，您必须注意，这全都与“ 移动页面 ”有关。
因此，当我正确解释了您的问题和屏幕截图时，这 并不适合您的网站！

相反，按照Google指南中的建议进行某些操作，会使“正常”网站的情况变得更糟而不是更好。
并非所有来自Google的东西都是“圣杯”，仅仅是因为它来自Google。而且，如果您查看它们的HTML标记，它们本身并不是一个好的榜样。

我能给您的最佳建议是：

• 在CSS中设置替换元素的宽度和高度，以便浏览器可以布局元素，而不必等待替换的内容！

另外，为什么要使用不同的CSS文件而不是一个？
额外的请求比少量的数据量还差。在第一个请求之后，无论如何都会缓存CSS文件。

人们应该始终注意的事情是：

• 尽可能减少请求数量
• 保持页面总重量尽可能低

并且不要为如何获得Google的PageSpeed Insights工具的100％而困惑…！;-)

补充1：这是Google向我们展示的页面，他们对“优化CSS交付”的
建议。

如前所述，我认为这既不切合实际，也不适合“正常”网站！因为主要是在您具有 响应式Web设计时
，最确定的是您使用媒体查询和其他布局样式。因此，如果您不打算首先以阻塞的方式加载CSS，则会得到 FOUT （无 样式文本的Flash）。我真的不相信这比渲染页面至少要好几毫秒！