在我网站的 PageSpeed Insight 报告中，它将我的所有 css 文件列为“阻止渲染的资源”。我的css链接都是这样的：
<link rel="stylesheet" type="text/css" media="all" href="https://example.com/something.css" />
在the documentation 中，如果<link rel="stylesheet"> 标签没有与用户设备匹配的media 属性，则它们会被列为阻止呈现的样式表。既然我的样式表都有media="all"，为什么它们被列为渲染阻塞资源？
【问题讨论】：
标签： pagespeed lighthouse pagespeed-insights
他们想说的是，如果您的媒体查询仅与用户设备匹配（例如最大或最小宽度或方向），他们不会将某些内容标记为渲染阻塞。
但是即使这样，他们也会在“关键 CSS”下标记它，即使他们没有标记它，如果“首屏”内容需要该 CSS，它仍然会呈现阻塞 .
在您在问题中链接的页面下方，他们解释得更好
另一种消除渲染阻塞样式的方法是拆分 这些样式到不同的文件中，由媒体查询组织。然后加 每个样式表链接的媒体属性。 加载页面时， 浏览器只阻止第一次绘制来检索样式表 匹配用户的设备。
这部分是重要的部分，他们试图让您将移动样式放在一个样式表中，将桌面样式放在另一个样式表中，因此您只需加载最少的 CSS 即可最初呈现页面。
忽略所有令人困惑的东西，这是一次解决几个审核的最简单方法。
渲染“首屏”内容所需的任何 CSS 都应内联在 HTML 的样式标记中。
我会警告你，这很困难，没有一个工具可以完美地做到这一点，它必须包含每一个样式规则才能工作。 （例如，如果您错过了渲染“首屏”内容所需的一个类，浏览器将等待包含该规则的样式表被加载并阻止渲染。）
我将所有“首屏”样式保存在一个单独的文件中，并在运行时内联它们。
我将这些文件分为 2 种类型 - 全局（站点标题、首屏上多个页面上使用的通用样式等）和特定页面（例如主页的 hero、联系表单的表单样式等......无论是什么每个页面上的“首屏”都足够独特，不会添加到全局首屏样式。）
这将处理渲染阻塞资源、关键请求链（用于 CSS）并为您提供超快的 First Contentful Paint 和 First Meaningful Paint。
然后，您只需按照他们的建议将移动和桌面样式分开，并确保尽可能删除未使用的 CSS（这又是一项非常艰巨的任务，因此最好从一开始就为它设计）。
【讨论】：