&引用；消除折叠内容上方的渲染阻塞CSS“；

我一直在使用Google PageSpeed insights来尝试提高我的网站的性能，到目前为止，它被证明是非常成功的。延迟脚本之类的工作非常出色，因为我已经有了jQuery的内部版本

.ready（）

。要延迟脚本直到页面完全加载，我所要做的就是内联该特定函数并将完整脚本移动到页面的末尾。这很有效

但现在我发现自己盯着清单上剩下的一个黄点：“消除折叠内容上方的渲染阻塞CSS”

设置我的CSS的方法是使用一个全局的

\.CSS

文件，其中包含通常应用于页面结构的样式，或者在整个站点的一个或两个以上位置使用的样式。大多数页面都有一个关联的CSS文件（例如，

party.php

有

party.CSS

），其中包含特定于该特定页面的样式。所有CSS文件都被无限期地缓存，因为我将

/t=FILEMTIME

附加到文件名中（然后使用.htaccess删除它们），以确保文件在更改时得到更新

因此，无论如何，谷歌建议内联关键风格需要以上折叠内容。问题是。。。好的，看一下这个屏幕截图：

---

正如你所看到的。。。所有的内容都在上面！人们讨厌滚动，尤其是在需要加载很多页面的游戏中。因此，我设计的网站，以适应一个屏幕（假设一个足够好的分辨率）。这意味着。。。所有样式都适用于上面的折叠内容！所以有什么解决办法吗？还是我在接近完美的分数上被那个黄色的分数困住了？

以前有人问过一个相关的问题：

首先，您必须注意，这一切都是关于“移动页面”。
所以，当我正确地解释了你的问题和截图时，这就不适合你的网站了

相反，做一些谷歌在其指导方针中建议的事情会让“正常”网站的情况变得更糟。
并不是所有来自谷歌的东西都是“圣杯”，仅仅因为它来自谷歌。如果你看一下他们的HTML标记，他们自己也不是一个好的榜样

我能给你的最好建议是：

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

另外，为什么使用不同的CSS文件，而不是一个？
附加请求比少量数据量更糟糕。在第一次请求之后，CSS文件仍然被缓存

人们应该始终注意以下事项：

• 尽可能减少请求的数量
• 尽可能降低页面总重量

而且不要让你的大脑困惑于如何获得谷歌PageSpeed Insights工具的100%。！；-）

补充1：这是谷歌向我们展示的页面，是他们推荐的

如前所述，我不认为这既不现实，也不认为这对一个“正常”的网站是有意义的！因为主要是当你有一个响应性很强的网页设计时，你最肯定会使用媒体查询和其他布局风格。因此，如果您不打算先加载CSS，然后以阻塞方式加载，您将得到FOUT（未设置样式的文本的闪烁）。我真的不相信这比至少多几个毫秒来呈现页面“更好”

---

Imho谷歌正在开始一个新的“炒作”（当我在Stackoverflow上看到所有关于它的问题时）

一些可能有用的提示：

• 昨天我在CSS优化中看到了这篇文章：
  关于CSS的许多有用信息，以及什么样的CSS会导致最大的性能损失

• 我在谷歌Chrome（Canary）开发工具中看到了关于jQueryUK“隐藏的秘密”的以下演示： . 请查看“重新绘制”和“昂贵的CSS”部分

• 此外，如果您使用的是类似于的加载程序，您可以查看一个名为的CSS加载程序插件，它使用一个Optimizer，也可以进行结构优化，例如合并具有相同属性的块。我用过几次，它可以节省大量的CSS

不提这个问题：

---

我支持@Enzino为所有正在加载的小图标创建精灵。文件大小太小，以至于不能保证每个图标都有服务器往返。还请记住浏览器可以执行的并发http请求的总数。因此，对大量小图标的请求也是“渲染阻塞”。虽然与您的页面相比，我的页面是空的，但我喜欢加载的方式。

我也一直在努力解决这个新的页面速度指标

虽然我没有找到切实可行的方法使我的分数恢复到100%，但我发现有一些东西是有用的

将所有css合并到一个文件中有很大帮助。我的所有网站都备份到%95-%98

---

我唯一能想到的另一件事是在第一页内联所有必要的css（这似乎是其中的大部分——至少对我的页面来说是如此），以获得甜蜜的高分。虽然这可能有助于你的速度得分，但这可能会使你的页面加载速度变慢。

请查看下一页。 这帮助我摆脱了“渲染阻塞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>

/*!
loadCSS：异步加载CSS文件。
*/
函数loadCSS（href）{
var ss=window.document.createElement（'link'），
ref=window.document.getElementsByTagName（'head'）[0]；
ss.rel=‘样式表’；
ss.href=href；
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";
}