156

我一直在使用 Google PageSpeed 洞察力来尝试改进我的网站的性能，到目前为止，它已被证明非常成功。诸如延迟脚本之类的工作效果很好，因为我已经有一个 jQuery 的内部版本.ready()来延迟脚本直到页面完全加载，我所要做的就是内联该特定函数并将完整的脚本移动到页面的末尾。那效果很好。

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

我的 CSS 设置方式是拥有一个全局_.css文件，其中包含通常适用于页面结构的样式，或者在整个站点中不止一两个地方使用。然后，大多数页面都有一个关联的 CSS 文件（例如party.phphas party.css），其中包含特定于该特定页面的样式。所有 CSS 文件都被无限期地缓存，因为我附加/t=FILEMTIME到文件名（后来用 .htaccess 删除它们）以保证文件在更改时得到更新。

所以无论如何，谷歌建议内联首屏内容所需的关键样式。麻烦的是......好吧，看看这个截图： http: //prntscr.com/1qt49e

如您所见...所有内容都在首屏！人们讨厌滚动，尤其是在涉及加载许多页面的游戏中。所以我将网站设计为适合一个屏幕（假设分辨率足够好）。所以这意味着......所有样式都适用于首屏内容！那么……有什么解决办法吗？还是我在一个接近完美的分数上被那个黄色标记卡住了？

4

7 回答 7

186

之前有人问过一个相关问题：Google Pagespeed 中的“首屏内容”是什么？

首先，您必须注意到这都是关于“移动页面”的。
因此，当我正确解释您的问题和屏幕截图时，这不适合您的网站！

相反 - 做一些谷歌在他们的指导方针中建议的事情，对于“正常”网站来说，事情会变得更糟。
并不是所有来自谷歌的东西都是“圣杯”，因为它来自谷歌。如果您查看他们的 HTML 标记，他们本身也不是一个好的榜样。

我能给你的最好建议是：

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

此外，为什么你使用不同的 CSS 文件，而不是一个？
额外的请求比少量的数据量更糟糕。在第一次请求之后，CSS 文件无论如何都会被缓存。

应该始终注意的事情是：

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

并且不要为如何获得 100% 的 Google PageSpeed Insights 工具而困惑......！;-)

附加 1：这是谷歌向我们展示的页面，他们推荐的优化 CSS 交付。

如前所述，我认为这既不现实也不对“正常”网站有意义！因为主要是当您拥有响应式网页设计时，最确定的是您使用媒体查询和其他布局样式。所以如果你不打算先加载你的 CSS 并且以阻塞的方式你会得到一个FOUT ( Flash Of Unstyled Text )。我真的不相信这比渲染页面至少多几毫秒“更好”！

恕我直言，谷歌正在开始一个新的“炒作”（当我在 Stackoverflow 上查看所有关于它的问题时）......！

于 2013-09-14T15:40:04.803 回答
16

我如何在 Google Page Speed（移动版）上获得 99/100

<style></style>TLDR：压缩并在标签之间嵌入整个 CSS 脚本。

大约一个星期以来，我一直在追求难以捉摸的 100/100 分数。和你一样，最后剩下的一项是消除“首屏内容的渲染阻止 css”。

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

css的async属性（比如 js）呢？它们不存在。

我准备放弃了。然后我恍然大悟。如果链接脚本阻止了渲染，那么如果我改为将整个 CSS 嵌入头部会怎样。这样就没有什么可以阻止的了。

在我的样式标签中嵌入 1263 行 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>我在主页上的标签中添加了 css 。然后我重新分析了页面速度洞察力。

我在手机上从 90/100 到 99/100！！！

这违背了我（可能还有你）的一切。但它解决了问题。我现在只是在我的主页上使用它，并通过 PHP 包含以编程方式包含压缩的 css。

YMMV（您的里程可能会有所不同）取决于您的 CSS 长度。谷歌可能会因为您的首屏内容过多而对您不利。但不要假设；测试！

笔记

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

  2. 你的css不会被缓存。不过我并不太担心。当他们点击我网站上的另一个页面时，.css将被缓存（见注 1）。

于 2016-08-21T18:30:23.150 回答
9

一些可能有帮助的提示：

  • 昨天我在 CSS 优化中看到了这篇文章： CSS profiling for ... optimization
    很多关于 CSS 的有用信息以及什么 CSS 导致了最大的性能消耗。

  • 我在 Googe Chrome (Canary) 开发工具中看到了关于 jQueryUK 的以下关于“隐藏的秘密”的演示： DevTools 可以做到。查看Time to First Paint、重绘和昂贵的 CSS 部分。

  • 此外，如果您使用的是requireJS 之类的加载器，您可以查看一个名为require-CSS的 CSS 加载器插件，它使用CSSO - 一种也进行结构优化的优化器，例如。合并具有相同属性的块。我用了几次，它可以节省大量的 CSS。

题外话：我第二个@Enzino 为您正在加载的所有小图标创建一个精灵。文件大小非常小，它并不真正保证每个图标的服务器往返。还要记住浏览器可以执行的并发 http 请求总数。因此，对大量小图标的请求也是“阻止渲染”的。尽管与您的页面相比是一个空白页面，但我喜欢例如dadduckgo的加载方式。

于 2013-09-16T19:36:09.777 回答
6

请查看以下页面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>
于 2016-02-17T09:14:14.297 回答
4

我也一直在为这个新的页面速度指标而苦苦挣扎。

虽然我没有找到让我的分数回到 %100 的实用方法，但我发现有一些事情很有帮助。

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

我能想到的唯一另一件事是在第一页上内联所有必要的 css（这似乎是其中的大部分 - 至少对于我的页面而言）以获得甜蜜的高分。尽管它可能有助于您的速度得分，但这可能会使您的页面加载速度变慢。

于 2013-09-18T18:38:24.073 回答
1

2019 年的最佳解决方案是HTTP/2 Server Push。

您不需要任何 hacky javascript 解决方案或内联样式。但是，您确实需要支持 HTTP 2.0 的服务器（任何现代服务器版本都可以），它本身要求您的服务器运行 SSL。但是，有了 Let's Encrypt，无论如何都没有理由不使用 SSL。

我的网站https://r.je/在移动设备和桌面设备上的得分均为 100/100。

这些错误的原因是浏览器获取 HTML，然后必须等待 CSS 下载后才能呈现页面。使用 HTTP2，您可以同时发送 HTML 和 CSS。

您可以通过设置 Link 标头来使用 HTTP/2 推送。

Apache 示例（.htaccess）：

Header add Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload"

对于 NGINX，您可以将标头添加到服务器配置中的位置标记：

location = / {
    add_header Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload";
}

使用此标头集，浏览器会同时接收 HTML 和 CSS，从而阻止 CSS 阻塞渲染。

您将需要对其进行调整，以便仅在第一个请求时发送 CSS，但 Link 标头是“消除渲染阻塞 Javascript 和 CSS”的最完整和最简单的解决方案

有关详细讨论，请查看我的帖子：使用 HTTP/2 Push 消除渲染阻塞 CSS

于 2019-03-17T16:16:50.957 回答
0

考虑使用包从您的 css 文件中自动生成内联样式。一个好的是Laravel 的Grunt Critical或Critical css。

于 2017-04-06T13:11:35.643 回答