"在首映内容中消除渲染阻止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

之前已经提出过相关问题:Google Pagespeed中的"首屏内容"是什么？

首先,你必须注意到这都是关于" 移动页面 "的.
因此,当我正确解释您的问题和截图时,这不适合您的网站!

相反 - 在他们的指导方针中做一些谷歌所建议的事情,对于"普通"网站而言,事情会变得更糟.
并非所有来自谷歌的东西都是"圣杯",因为它来自谷歌.如果你看一下他们的HTML标记,他们自己就不是一个好的榜样.

我能给你的最好建议是:

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

另外,为什么你使用不同的CSS文件,而不只是一个？
附加请求比少量数据量更糟糕.在第一次请求之后,无论如何都要缓存CSS文件.

应该经常照顾的事情是:

• 尽可能减少请求数量
• 保持您的整体页面重量尽可能低

并且不要让大脑知道如何获得100%的Google的PageSpeed Insights工具......!;-)

增加1:以下是Google向我们展示的页面,以及他们对Optimize CSS Delivery的推荐.

如前所述,我不认为这既不现实,也不认为对于"普通"网站来说是有意义的!因为主要是当你有一个响应式网页设计时,你肯定会使用媒体查询和其他布局样式.因此,如果您不首先加载CSS并以阻塞方式加载FOUT(Flash of Unstyled Text).我真的不相信这比"渲染页面至少一些毫秒"更"好"!

Imho Google正在开始一个新的"炒作"(当我在Stackoverflow上查看有关它的所有问题时)...!

Answer 2

我如何获得Google Page Speed上的99/100(适用于移动设备)

TLDR:在<style></style>标签之间压缩并嵌入整个css脚本.

我一直在追逐那个难以捉摸的100/100分数,现在大约一周.和你一样,剩下的最后一项是消除"渲染阻塞css以上的折叠内容".

当然有一个简单的解决？不.我试用了Filament group的loadCSS解决方案.我喜欢太多.js.

asynccss的属性怎么样(比如js)？它们不存在.

我准备放弃了.然后它突然出现在我身上.如果链接脚本阻止了渲染,那么如果我将整个css嵌入到头部中会怎么样.这样就没有什么可以阻止了.

在我的样式标记中嵌入1263行CSS似乎绝对错误.但我给了它一个旋转.我首先使用以下方法对其进行压缩(并将其作为前缀):

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ 请参阅NPM postcss包.

现在它只是一条无空间css的长线.我把css <style>your;great-wall-of-china-long;css;here</style>放在我主页上的标签上.然后我重新分析了页面速度的见解.

手机上我从90/100到99/100!

这违背了我(也许你)的一切.但它解决了这个问题.我现在只是在我的主页上使用它,并通过PHP include编程方式包含压缩的css.

YMMV(您的里程可能会有所不同)等待您的css长度.谷歌可能会为您提供太多的内容.但不要假设; 测试!

笔记

1. 我现在只在我的主页上执行此操作,以便人们在我最重要的页面上获得快速渲染.

2. 你的css不会被缓存.我不是太担心.第二个是他们在我的网站上的另一个页面,.css 将被缓存(见注1).

Answer 3

一些可能有用的提示:

• 昨天我在CSS优化中遇到了这篇文章: CSS分析...优化CSS上
  有很多有用的信息以及CSS导致性能最大的问题.

• 我在Googe Chrome(Canary)Dev Tools中看到了关于jQueryUK关于"隐藏秘密"的以下演示: DevTools可以做到这一点.查看Time to First Paint,重绘和昂贵的CSS部分.

• 此外,如果您使用的是装载机像requireJS你可以看看的CSS加载插件之一,被称为需要,CSS,它采用CSSO -一个optimzer也做结构优化,例如.合并具有相同属性的块.我使用了几次,它可以在不同情况下保存相当多的CSS.

关闭问题:我为你正在加载的所有小图标创建一个精灵的第二个@Enzino.文件大小非常小,并不能保证每个图标的服务器往返.还要记住浏览器可以执行的并发http请求总数.因此,对大量小图标的请求也是"渲染阻止".虽然一个空页与你的相比,我喜欢duckduckgo加载的例子.

Answer 4

请查看以下页面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>