我一直在使用Google PageSpeed的见解来尝试提高我网站的效果，到目前为止，它已经证明非常成功。推迟脚本之类的东西工作得非常漂亮，因为我已经有一个内部版本的jQuery的.ready()来推迟脚本直到页面完全加载，我所要做的就是内联该特定功能并将完整脚本移动到页面末尾。这很有效。
但是现在我发现自己瞪着核对清单上剩下的一个黄点：“在首映内容中消除渲染阻止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?
首先，你必须注意到这都是关于“移动页面”的。 因此，当我正确解释您的问题和截图时，这不适合您的网站！
相反 - 在他们的指导方针中做一些谷歌所建议的事情，对于“普通”网站而言，事情会变得更糟。 并非所有来自谷歌的东西都是“圣杯”，因为它来自谷歌。如果你看一下他们的HTML标记，他们自己就不是一个好的榜样。
我能给你的最好建议是：
另外，为什么你使用不同的CSS文件，而不只是一个？ 附加请求比少量数据量更糟糕。在第一次请求之后，无论如何都要缓存CSS文件。
应该经常照顾的事情是：
并且不要让大脑知道如何获得100％的Google的PageSpeed Insights工具......！ ;-)
增加1：这是Google向我们展示的页面，以及他们为Optimize CSS Delivery推荐的内容。
如前所述，我不认为这既不现实，也不认为对于“普通”网站来说是有意义的！因为主要是当你有一个响应式网页设计时，你肯定会使用媒体查询和其他布局样式。因此，如果您不首先加载CSS并以阻塞方式加载FOUT（Flash of Unstyled Text）。我真的不相信这比“渲染页面至少一些毫秒”更“好”！
Imho Google正在开始一个新的“炒作”（当我在Stackoverflow上查看有关它的所有问题时）...！
TLDR：在<style></style>标签之间压缩并嵌入整个css脚本。
我一直在追逐那个难以捉摸的100/100分数，现在大约一周。和你一样，剩下的最后一项是消除“渲染阻塞css以上的折叠内容”。
当然有一个简单的解决？不。我尝试了Filament group's loadCSS解决方案。我喜欢太多.js。
css的jazxswpoi属性怎么样（比如js）？它们不存在。
我准备放弃了。然后它突然出现在我身上。如果链接脚本阻止了渲染，那么如果我改为将整个css嵌入到头部中，该怎么办呢。那样就没有什么可以阻止了。
在我的样式标记中嵌入1263行CSS似乎绝对错误。但我给了它一个旋转。我首先使用以下方法对其进行压缩（并将其作为前缀）：
async postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/。
现在它只是一条无空间css的长线。我把css放在我主页上的See the NPM postcss package标签上。然后我重新分析了页面速度的见解。
手机上我从90/100到99/100！
这违背了我（也许你）的一切。但它解决了这个问题。我现在只是在我的主页上使用它，并通过PHP include编程方式包含压缩的css。
YMMV（您的里程可能会有所不同）等待您的css长度。谷歌可能会为您提供太多的内容。但不要假设;测试！
一些可能有用的提示：
<style>your;great-wall-of-china-long;css;here</style>
关于CSS的许多有用信息以及CSS导致最多性能消耗的信息。关闭问题：我为你正在加载的所有小图标创建一个精灵的第二个@Enzino。文件大小非常小，并不能保证每个图标的服务器往返。还要记住浏览器可以执行的并发http请求总数。因此，对大量小图标的请求也是“渲染阻止”。虽然一个空页与你的相比，我喜欢requireJS加载的例子。
请看下面的页面require-CSS。这有助于我摆脱“渲染阻止CSS”。我使用以下代码来删除“渲染阻止CSS”。现在在谷歌页面速度洞察力我没有得到与渲染阻止CSS相关的问题。
CSSO
我也一直在努力使用这个新的pagespeed指标。
虽然我没有找到实用的方法让我的分数回到％100，但我发现有一些有用的东西。
将所有css组合成一个文件有很大帮助。我所有的网站都恢复到％95 - ％98。
我能想到的唯一另一件事是在第一页上内联所有必要的css（看起来大部分都是 - 至少对我的页面而言）以获得甜蜜的高分。虽然它可能有助于您的速度得分，但这可能会使您的页面加载速度变慢。
2019年的最佳解决方案是HTTP / 2服务器推送。
您不需要任何hacky javascript解决方案或内联样式。但是，您确实需要一台支持HTTP 2.0（任何现代服务器版本）的服务器，它本身要求您的服务器运行SSL。但是，使用Let的加密，无论如何都没有理由不使用SSL。
我的网站duckduckgo的移动和桌面分数为100/100。
这些错误的原因是浏览器获取HTML，然后必须等待CSS下载才能呈现页面。使用HTTP2，您可以同时发送HTML和CSS。
您可以通过设置链接标头来使用HTTP / 2推送。
Apache示例（.htaccess）：
https://varvy.com/pagespeed/render-blocking-css.html
对于NGINX，您可以将标头添加到服务器配置中的位置标记：
<!-- loadCSS -->
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/cssrelpreload.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/loadCSS.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/onloadCSS.js"></script>
<script>
/*!
loadCSS: load a CSS file asynchronously.
*/
function loadCSS(href){
var ss = window.document.createElement('link'),
ref = window.document.getElementsByTagName('head')[0];
ss.rel = 'stylesheet';
ss.href = href;
// temporarily, set media to something non-matching to ensure it'll
// fetch without blocking render
ss.media = 'only x';
ref.parentNode.insertBefore(ss, ref);
setTimeout( function(){
// set media back to `all` so that the stylesheet applies once it loads
ss.media = 'all';
},0);
}
loadCSS('styles.css');
</script>
<noscript>
<!-- Let's not assume anything -->
<link rel="stylesheet" href="styles.css">
</noscript>
使用此标头集，浏览器同时接收HTML和CSS，从而阻止CSS阻止呈现。
您将需要调整它以便CSS仅在第一个请求时发送，但是Link标头是“消除渲染阻止Javascript和CSS”的最完整和最少hacky解决方案
有关详细讨论，请查看我的帖子：https://r.je/
考虑使用包从css文件自动生成内联样式。一个好的是Header add Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload"
或location = / {
add_header Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload";
}
。