在我的网站的PageSpeed Insight报告中，它将我所有的css文件都列为 "render-blocking resources"。 我的css链接看起来都是这样的。
<link rel="stylesheet" type="text/css" media="all" href="https://example.com/something.css" />
在... 文件它说 <link rel="stylesheet"> 标签，如果它们没有一个单独的 media 属性，以匹配用户的设备。 由于我的样式表都有 media="all"为什么它们会被列为 "渲染阻塞资源"？
他们想说的是，如果你的媒体查询只与用户的设备相匹配（例如最大或最小宽度或方向），他们就不会将某些东西标记为渲染阻止。
然而，即使如此，他们也会在 "关键CSS "下标记它，即使他们不标记它。如果 "折页以上 "的内容需要该CSS，它仍然会被渲染屏蔽.
在你问题中链接的那页下面，他们解释得稍微好一点。
另一种消除渲染阻塞样式的方法是将这些样式分割成不同的文件，按媒体查询来组织，然后给每个样式表链接添加一个媒体属性。然后给每个样式表链接添加一个媒体属性。当加载一个页面时，浏览器只屏蔽第一个油漆，以检索与用户设备匹配的样式表。.
这一部分是重要的部分，他们试图让你把你的移动风格放在一个样式表中，桌面风格放在另一个样式表中，所以你只加载熊最小的CSS来渲染页面的初始。
忽略所有这些令人困惑的东西，这里有一个最简单的方法来同时处理几个审计。
任何需要渲染 "折线以上 "内容的CSS都应该在你的HTML中内嵌一个样式标签。
我要提醒你，这是很困难的，没有一个工具能完美地做到这一点，而且必须包含每一个样式规则才能工作。(例如，如果你漏掉了一个需要渲染 "折线以上 "的东西的类，浏览器会等待包含该规则的样式表被加载并阻止渲染。)
我把所有的 "折页以上 "样式都保存在一个单独的文件中，并在运行时内联它们。
我把这些文件分为2种类型--全局的（网站头，多个页面上使用的一般样式等）和特定页面的（例如主页的英雄，联系表单的表单样式等......每个页面上的任何 "折页以上 "的样式都是独一无二的，不会添加到全局的折页以上样式中）。
这将处理渲染阻塞资源、关键请求链（对于CSS），并给你超快的First Contentful Paint和First Meaningful Paint。
然后你只需要按照他们的建议让移动和桌面的样式分开，如果可以的话，确保你删除未使用的CSS（然而这又是一个非常困难的任务，所以最好从一开始就为它设计）。