“消除高于折叠内容的渲染阻塞 CSS”

我一直在使用谷歌网页速度的洞察力来尝试和改善我的网站的性能，到目前为止，它被证明是非常成功的。像延迟脚本这样的事情工作得非常出色，因为我已经有了内部版本的 jQuery 的 .ready()来延迟脚本直到页面完全加载，所有我需要做的就是内联那个特定的函数并将完整的脚本移动到页面的末尾。效果不错。

但是现在我发现自己盯着清单上剩下的一个黄点: “消除高于折叠内容的呈现阻塞 CSS”。

我的 CSS 的设置方式是有一个全局 _.css文件，其中包含适用于一般页面结构的样式，或者在整个站点的多个位置使用。然后，大多数页面都有一个相关的 CSS 文件(例如，party.php有 party.css) ，其中包含特定于该特定页面的样式。所有 CSS 文件都是无限缓存的，因为我将 /t=FILEMTIME附加到文件名后面(然后用。Htaccess) ，以保证文件在更改时得到更新。

不管怎样，谷歌建议内嵌关键风格需要以上的折叠内容。问题是... 好吧，看看这个截图: http://prntscr.com/1qt49e

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

132491 次浏览
小开
最佳答案

一个相关的问题已经被问过了: 什么是谷歌页面速度中的“超级内容”

首先，你必须注意到这都是关于“ 流动网页”的。
所以当我正确解释你的问题和截图时，这是 < strong > 不适合你的网站！

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

我能给你的最好建议是:

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

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

人们应该时刻注意的事情是:

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

不要困惑你的大脑如何获得100% 的谷歌网页速度洞察工具... ! ; -)

附加1: 这是 Google 向我们展示的页面，他们对 优化 CSS 传递 的推荐。

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

Imho 谷歌正在开始一场新的“炒作”(当我在 Stackoverflow 上看到所有关于它的问题时) ... ！

小开

一些小贴士可能会有帮助:

  • 我昨天在 CSS 优化中看到了这篇文章: 用于优化的 CSS 分析
    很多关于 CSS 的有用信息，以及什么样的 CSS 导致了最大的性能下降。

  • 我在 jQueryUK 上看到了以下关于 Google Chrome (金丝雀)开发工具中“隐藏的秘密”的演示: DevTools 可以做到这一点。 看看 第一次涂漆时间的章节，重新粉刷和昂贵的 CSS。

  • 另外，如果你正在使用像 要求这样的加载器，你可以看看一个名为 要求-CSS的 CSS 加载器插件，它使用 CSSO-一个优化器，也可以进行结构优化，例如合并具有相同属性的块。我使用它几次，它可以节省相当多的 CSS 案例到案例。

回避问题: 我第二@Enzino 在创建一个精灵为所有的小图标，你正在加载。文件的大小是如此之小，以至于实际上不需要为每个图标进行服务器往返。还要记住浏览器可以做的并发 http 请求的总数。因此，对大量小图标的请求也是“呈现阻塞”。虽然一个空的页面比较你的，我喜欢如何 鸭鸭走加载例如。

小开

我也为这个新的网页速度指标而苦恼。

虽然我没有找到任何可行的方法使我的分数回到% 100，但是有一些事情我发现是有帮助的。

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

我唯一能想到的另一件事就是在第一页嵌入所有必要的 css (这似乎是大部分内容——至少对我的页面来说是这样) ，以获得甜蜜的高分。虽然它可能会帮助您的速度得分，这可能会使您的页面加载较慢，但。

小开

请看下面的 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>
小开

我是如何在谷歌页面上获得99/100的速度(手机版)

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

我已经追踪这个难以捉摸的100/100分数快一个星期了。像你一样，最后剩下的项目是消除“渲染-阻塞 CSS 以上的折叠内容。”

当然有一个简单的解决方案? ? 没有。我尝试了 长丝组的 loadCSS解决方案。太多。 js 为我的喜好。

那么 CSS 的 async属性(比如 js)呢? 它们不存在。

我都准备放弃了。然后我明白了。如果 连接脚本阻塞了渲染，那么如果我将整个 css 嵌入到头部中会怎么样呢。这样就没什么可阻挡的了。

在我的 style 标签中嵌入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)。

小开

考虑使用一个包从 css 文件自动生成内联样式。一个好的样式是 临界步兵或 Laravel 的关键 CSS。

小开

2019年的最佳解决方案是 HTTP/2服务器推送。

您不需要任何拙劣的 javascript 解决方案或内联样式。但是，您确实需要一个支持 HTTP 2.0(任何现代服务器版本都会支持)的服务器，而该服务器本身需要您的服务器运行 SSL。但是，对于 Let’s Encrypt，没有理由不使用 SSL。

我的网站 https://r.je/在手机和台式机上的得分都是100/100。

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

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

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 只发送在第一个请求，但链接头是最完整的，最不粗糙的解决方案“消除渲染阻塞 Javascript 和 CSS”

要进行详细的讨论，请看我在这里的帖子: 使用 HTTP/2 Push 消除渲染阻塞 CSS


提交答案