“在上面的内容中消除渲染阻塞CSS”
我一直在使用Google PageSpeed的见解来改善我的网站的性能，到目前为止它已经被certificate是非常成功的。 诸如推迟脚本之类的工作的效果非常好，因为我已经有了jQuery的.ready()的内部版本来推迟脚本，直到页面完全加载完毕，我所要做的就是内联该特定的函数，并将完整的脚本移动到末尾的页面。 这很好。
但是现在我发现自己瞪着检查清单上剩下的一个黄点：“在上面的内容中去掉渲染阻塞的CSS”。
我的CSS设置的方式是有一个全局_.css文件，其中包含一般适用于页面结构的样式，或者在整个网站的多个或两个位置使用。 大多数页面都有一个关联的CSS文件（例如， party.php具有party.css ），其中包含特定于该特定页面的样式。 所有的CSS文件被无限期地caching，因为我追加了/t=FILEMTIME到文件名（以后用.htaccess删除它们），以保证文件在更改时被更新。
因此，无论如何，Googlebuild议内联重要内容所需的关键样式。 麻烦是…好吧，看看这个截图： http : //prntscr.com/1qt49e
正如你所看到的… 所有的内容都是在折叠之中！ 人们讨厌滚动，特别是在涉及加载许多页面的游戏上。 所以我devise的网站适合在一个屏幕上（假设足够好的分辨率）。 所以这意味着… 所有的风格都适用于上面的内容！ 所以…有什么解决办法吗？ 还是我坚持那个黄色的标记呢？
之前曾经有人提出过一个相关的问题： Google Pagespeed中的“折叠内容”是什么？
首先你必须注意到，这是关于' 移动网页 '的。
所以当我正确地解释你的问题和截图的时候，这不适合你的网站！
相反，按照Google的指导，Google做出的一些build议会使“普通”网站变得更糟。
并不是所有来自Google的东西都是“圣杯”，因为它来自Google。 如果你看看他们的HTML标记，他们自己也不是一个好的榜样。
我可以给你的最好的build议是：
- 在你的CSS中设置replace元素的宽度和高度，以便浏览器可以布置元素，而不必等待replace的内容！
另外为什么你使用不同的CSS文件，而不是一个？
额外的请求比less量的数据量更差。 在第一个请求之后，CSS文件仍然被caching。
应该总是照顾的事情是：
- 尽可能减less请求数量
- 保持整体页面重量尽可能低
不要迷惑你的大脑如何获得100％的Google的PageSpeed Insights工具…！ 😉
添加1：以下是Google向我们显示的页面，他们推荐用于优化CSS投放的页面 。
如前所述，我不认为这是不现实的，也不认为“正常”的网站是有意义的！ 因为主要是当你有一个响应式的网页devise ，你肯定会使用媒体查询和其他布局风格。 所以，如果你不是首先加载你的CSS，并以一种阻塞的方式，你会得到一个FOUT （ Flash的无风格文本 ）。 我真的不相信，这是“更好的”，比至less几毫秒来渲染页面！
谷歌正在开始一个新的“炒作”（当我看看所有关于它在Stackoverflow的问题）…！
我如何在Google Page Speed上获得99/100（针对手机）
TLDR：在你的<style></style>标签之间压缩并embedded你的整个CSS脚本。
我一直在追赶这个难以捉摸的100/100分，现在一个星期左右。 和你一样，剩下的最后一项是消除了“超过折叠内容的渲染阻塞CSS”。
当然有一个简单的解决？ 不。 我尝试了Filament集团的loadCSS解决scheme。 太多.js我喜欢。
什么是CSS的async属性（如JS）？ 他们不存在。
我准备放弃。 然后，我明白了。 如果连接脚本阻塞了渲染，如果我反而将我的整个CSSembedded到头部。 那样就没有什么可阻挡的了。
在我的样式标记中embedded1263行CSS绝对是错误的。 但我给了它一个旋转。 我压缩它（和前缀）首先使用：
postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ 请参阅NPM postcss软件包 。
现在，这只是一个空间较小的CSS行。 我<style>your;great-wall-of-china-long;css;here</style>标签中<style>your;great-wall-of-china-long;css;here</style>在我的主页上填入了<style>your;great-wall-of-china-long;css;here</style>标签。 然后我重新分析页面速度的见解。
我从90/100到99/100在手机上！
这违背了我（甚至可能是你）的一切。 但它解决了这个问题。 我只是现在在我的主页上使用它，包括通过PHP包含编程压缩的CSS。
YMMV（您的里程可能会有所不同）等待您的CSS的长度。 谷歌可能会因为太多的内容而感到厌烦。 但是不要假设; testing！
笔记
-
我现在只在我的主页上这样做，所以人们在我最重要的页面上获得了快速渲染。
-
你的CSS不会被caching。 我不太担心。 第二个他们击中我的网站上的另一个页面，.css 将被caching（见注1）。
几个可能有帮助的提示：
-
我昨天在CSS优化中遇到了这篇文章： CSS profiling for … optimization
关于CSS的很多有用的信息和CSS导致最多的性能消耗。 -
我在jQueryUK上看到了关于Googe Chrome（Canary）开发工具中的“隐藏的秘密”的以下演示： DevTools可以做到这一点 。 查看“第一次绘制时间” ，重新绘制和昂贵的CSS部分。
-
另外，如果你使用像requireJS这样的加载器，你可以看看其中一个CSS加载器插件，叫做require-CSS ，它使用了CSSO – 一个优化器，也可以进行结构优化。 合并具有相同属性的块。 我用了几次，可以节省不lessCSS。
closures这个问题：我第二个@Enzino为所有正在加载的小图标创build一个精灵。 文件大小非常小，并不能保证每个图标的服务器往返。 还要记住浏览器可以做的并发http请求的总数。 所以对大量小图标的请求也是“渲染阻塞”的。 虽然空白页面与你的比较，我喜欢duckduckgo如何加载例如。
请看下面的页面https://varvy.com/pagespeed/render-blocking-css.html 。 这帮助我摆脱了“渲染阻塞CSS” 。 我使用下面的代码，以消除“ 渲染阻塞CSS ”。 现在在谷歌页面速度的洞察力，我没有得到与呈现阻塞CSS的问题。
<!-- 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>
我也一直在努力与这个新的pagespeed指标。
尽pipe我没有find切实可行的方法将我的分数提高到100％，但还是有一些我发现有帮助的。
将所有的CSS结合到一个文件中帮了很多忙。 我所有的网站都回到％95 – ％98。
我唯一能想到的其他事情就是在第一页上将所有必要的CSS（至less对我的页面来说是最重要的）进行内联，以获得甜蜜的高分。 虽然它可能会帮助你的速度得分，但这可能会让你的页面加载速度变慢。
考虑使用一个包来从你的css文件自动生成内联样式。 对于Laravel来说， Grunt Critical或Critical css是一个不错的select 。
