为什么我的带有 media="all" 的样式表被列为渲染阻塞资源？
Why are my stylesheets with media="all" getting listed as render-blocking resources?
在我网站的 PageSpeed Insight 报告中，它将我的所有 css 文件列为 "render-blocking resources"。我的 css 链接都是这样的：
<link rel="stylesheet" type="text/css" media="all" href="https://example.com/something.css" />
在 the documentation 中，它表示如果 <link rel="stylesheet"> 标签没有与用户设备匹配的 media 属性，它们将被列为渲染阻止样式表。因为我的样式表都有 media="all"，为什么它们被列为渲染阻塞资源？
文档非常具有误导性。
他们想说的是，如果您有仅匹配用户设备的媒体查询（例如最大或最小宽度或方向），他们不会将某些内容标记为渲染阻塞。
但是即使那样他们也会在 'critical CSS' 下标记它，即使他们不标记它，如果 CSS 需要 'above the fold'内容.
在你问题中链接的页面下方，他们解释得更好一些
Another approach to eliminating render-blocking styles is to split up
those styles into different files, organized by media query. Then add
a media attribute to each stylesheet link. When loading a page, the
browser only blocks the first paint to retrieve the stylesheets that
match the user's device.
那部分是重要的部分，他们试图让你把你的移动风格放在一种风格 sheet，桌面放在另一种风格所以你只加载最小的熊 CSS 来呈现初始页面。
真正重要的是
忽略所有令人困惑的东西，这里是一次解决几个审计的最简单方法。
内联您的关键 CSS - 您真正需要的唯一步骤
呈现 'above the fold' 内容所需的任何 CSS 都应内嵌在您的 HTML 样式标签内。
我会警告你，这很难，none 的工具可以完美地做到这一点，并且它必须包含每一个样式规则才能工作。 （例如，如果您只错过了一个 class 需要呈现某些内容 'above the fold' ，浏览器将等待包含该规则的样式 sheet 被加载并阻止呈现。）
从一开始就为此设计是最好的选择
我将所有 'above the fold' 样式保存在一个单独的文件中，并在运行时内联它们。
我将这些文件分为 2 种类型 - 全局（站点 header、首屏多个页面上使用的一般样式等）和 page-specific（例如主页的英雄、表单样式联系表格等...每个页面上 'above the fold' 的任何内容都足够独特，不会添加到首屏样式中。）
这将处理渲染阻塞资源、关键请求链（针对 CSS）并为您提供超快的 First Contentful Paint 和 First Meaningful Paint。
然后按照他们的建议将移动和桌面样式分开，并确保尽可能删除未使用的 CSS（这又是一项非常困难的任务，因此最好从一开始就针对它进行设计） .
在我网站的 PageSpeed Insight 报告中，它将我的所有 css 文件列为 "render-blocking resources"。我的 css 链接都是这样的：
<link rel="stylesheet" type="text/css" media="all" href="https://example.com/something.css" />
在 the documentation 中，它表示如果 <link rel="stylesheet"> 标签没有与用户设备匹配的 media 属性，它们将被列为渲染阻止样式表。因为我的样式表都有 media="all"，为什么它们被列为渲染阻塞资源？
文档非常具有误导性。
他们想说的是，如果您有仅匹配用户设备的媒体查询（例如最大或最小宽度或方向），他们不会将某些内容标记为渲染阻塞。
但是即使那样他们也会在 'critical CSS' 下标记它，即使他们不标记它，如果 CSS 需要 'above the fold'内容.
在你问题中链接的页面下方，他们解释得更好一些
Another approach to eliminating render-blocking styles is to split up those styles into different files, organized by media query. Then add a media attribute to each stylesheet link. When loading a page, the browser only blocks the first paint to retrieve the stylesheets that match the user's device.
那部分是重要的部分，他们试图让你把你的移动风格放在一种风格 sheet，桌面放在另一种风格所以你只加载最小的熊 CSS 来呈现初始页面。
真正重要的是
忽略所有令人困惑的东西，这里是一次解决几个审计的最简单方法。
内联您的关键 CSS - 您真正需要的唯一步骤
呈现 'above the fold' 内容所需的任何 CSS 都应内嵌在您的 HTML 样式标签内。
我会警告你，这很难，none 的工具可以完美地做到这一点，并且它必须包含每一个样式规则才能工作。 （例如，如果您只错过了一个 class 需要呈现某些内容 'above the fold' ，浏览器将等待包含该规则的样式 sheet 被加载并阻止呈现。）
从一开始就为此设计是最好的选择
我将所有 'above the fold' 样式保存在一个单独的文件中，并在运行时内联它们。
我将这些文件分为 2 种类型 - 全局（站点 header、首屏多个页面上使用的一般样式等）和 page-specific（例如主页的英雄、表单样式联系表格等...每个页面上 'above the fold' 的任何内容都足够独特，不会添加到首屏样式中。）
这将处理渲染阻塞资源、关键请求链（针对 CSS）并为您提供超快的 First Contentful Paint 和 First Meaningful Paint。
然后按照他们的建议将移动和桌面样式分开，并确保尽可能删除未使用的 CSS（这又是一项非常困难的任务，因此最好从一开始就针对它进行设计） .