“在上面的内容中消除渲染阻塞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,并以一种阻塞的方式,你会得到一个FOUTFlash的无风格文本 )。 我真的不相信,这是“更好的”,比至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!

笔记

  1. 我现在只在我的主页上这样做,所以人们在我最重要的页面上获得了快速渲染。

  2. 你的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 。