如何对同一个标签同时使用 rel="preload" 和 rel="stylesheet"？
How to use both rel="preload" and rel="stylesheet" for the same tag?
Google Pagespeed 测试在与样式表一起使用时无法识别预加载。我试过了
<link rel="preload stylesheet" href="http://www.example.com/style.css" />
而且它仍然显示 "Consider using to prioritize fetching resources that are currently requested later in page load."。如果我从 rel 属性中删除样式表，它会识别预加载。
我想试试这个：
<link rel="preload" rel="stylesheet" href="http://www.example.com/style.css" />
但我不确定您是否可以为同一个 link 标签设置 2 个相同的属性。这行得通吗？
对于异步加载 CSS 样式，您应该指出它，作为预加载样式表。 每当您单独使用 rel="preload" 时，它不会在页面加载时转换为样式表，它将保持为 preload，因此要将其指示为您应该使用的样式表另一个属性，例如 as，它 表示元素的类型，在您的情况下，它应该是 style。然后你需要在加载过程完成时告诉浏览器你需要将其视为样式表，因此你必须定义另一个属性，如onload，然后定义其真正的关系.
所以你必须像这样导入它：
<link rel="preload" as="style" onload="this.rel='stylesheet'" href="http://www.example.com/style.css">
注意： 您可以在 google 开发人员中阅读更多相关信息 here。
更新
由于 preload 直到现在才在 firefox 中得到支持（根据 this），唯一的方法是声明它两次在一个 rel 标签或两个单独的标签中。
<link rel="preload" as="style" href="http://www.example.com/style.css">
<link rel="stylesheet" href="http://www.example.com/style.css">
或
<link rel="stylesheet" rel="preload" as="style" href="http://www.example.com/style.css">
注意： 由于@JohnyFree 测试了第二个 （有一条线穿过） Google 页面速度, 它不会被识别为有效的 preload 样式，而格式根据 W3.org.
有效
预加载https://web.dev/defer-non-critical-css/
<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="http://www.example.com/style.css"/>
不支持的浏览器回退https://www.filamentgroup.com/lab/load-css-simpler
<link rel="stylesheet" media="print" onload="this.media='all'" href="http://www.example.com/style.css"/>
Firefox 据说在 85 版本中启用了“预加载”，但它似乎无法正常工作。我发现以下代码有效：
<link rel="preload stylesheet" as="style" href="style.css">
如果你觉得你需要这样做Javascript马戏团的把戏来节省几百毫秒，我推荐下面的版本。如果你想要 cross-browser 支持，请改用它：
<link media="print" onload="this.media='all'" rel="stylesheet" type="text/css" href="style.css" />
为什么这行得通？在几乎所有可追溯到 1990 年代的浏览器中，都普遍支持链接的“打印”媒体类型样式 sheet。链接的打印样式 sheet 仅在打印页面时使用。因为浏览器知道“sheet”媒体类型必须始终在“print”之前下载，所以它们经常延迟或异步下载带有“media=print”的sheets。页面作者不需要任何东西。自然地，它在大多数浏览器中以这种方式工作了很多年。
最近，试图遵循 Google 的新排名政策的开发人员发现了这个技巧，可以阻止某些样式阻止其他样式或立即下载。然后他们意识到“打印”媒体类型是唯一 built-in、cross-browser 欺骗浏览器延迟下载样式 sheets.
的方法
使用上面的技巧将您的样式 sheet 变成“印刷”类型并不意味着它是“印刷”，因为稍后脚本会将其改回“全部”。它只是一种“黑客”或阻止现代浏览器与其他 sheet 并行下载您的 CSS 样式的方法。
注意：包括 Internet Explorer 版本 1-7 在内的大量旧版浏览器不支持“all”，无论如何，这是个坏主意。
阻止一种或两种风格 sheet 阻止另一种 sheet 下载是使用此技巧的唯一原因，并假设您使用的是一种巨大的风格 sheet大小超过 50 KB，并使用连接速度较慢的服务器。
建议？
我建议您永远不要“预加载”CSS，原因如下！
- 只是因为 Google 将此标记为 Lightspeed 中的一个问题，并不意味着用重复的样式链接填充您的网页并精心设计 JavaScript 技巧以缩短 100 毫秒是个好主意. 您应该更关心 HTML 页面的质量和完整性，而不是其他所有问题，包括速度或 advertising-driven 搜索引擎需求!
- 可能存在赛车问题！当您的 HTML 在您的异步“打印”sheet 自行解析回“全部”之前下载时会发生什么？您可能会在某些浏览器中看到闪烁，其中 HTML 首先下载并在下载异步样式之前开始渲染。然后您的用户会看到您的网站布局和字体移动或移动。恶心！！
- Async'ing CSS 与孩子们在 2021 年下载的这些设计糟糕的 Javascript 框架相比有点毫无意义，无论如何都会浪费下载时间。大多数样式 sheet 的大小为 50 KB 或更小，相比之下，当今最现代的 Javascript 框架（即 React、Angular、Ember，等等）。无论如何，这些下载经常将相同的 CSS 一遍又一遍地“嵌入”到浏览器的缓存中，强制重新加载相同的 CSS 每次站点访问，这与 CSS 可以缓存数月的链接样式不同！因此，如果每次访问都重新加载，预加载链接 CSS 是没有意义的。那有什么意义呢？
- 许多浏览器可能会因为这个技巧而崩溃和烧毁！
preload 无论如何都没有被广泛采用，所以你 运行 在一定比例的用户中面临着巨大的风险
如果您使用此“hack”，则会看到一个无样式的网站。想象一下，有 5%-10% 的用户看到您的网站以默认 'Times Roman' 字体和白色 block-level 无样式内容页面显示，因为您想节省 500 毫秒的下载时间？抱歉，不值得冒险！
- 大多数旧浏览器在下载文件时只允许打开 2 个连接，因此它们受到打开连接的限制，而不是样式 sheet 下载。许多现代浏览器最多有 6 个。因此，再次强调，当与多个打开的 JavaScript 调用相结合时，连接是这里的瓶颈，而不是样式 sheet 下载。使用此技巧收效甚微。
- 缓慢的服务器通常是真正的瓶颈：服务器在打开连接时的延迟可能是巨大的瓶颈。即使您的主机提供商或 Wordpress 之类的 Web 应用程序正在使用缓存的图像、页面和代理，但您等待数百毫秒才能在服务器上打开连接，这一切都变得毫无意义。 CDN 也可能会失败、延迟、阻塞等。
- 除了缓慢的服务器和巨大的 JavaScript API 库之外，延迟下载的第一大因素通常是 巨大的图像文件 。考虑使用具有多种图像类型的新 HTML5 'picture' 元素，例如高度压缩的“WebP”。如果您的页面有“on-demand”、non-streaming 视频，那也必须设置为异步预加载或下载。添加“宽度”和“高度”值以强制 'alt' 属性 paceholders，因为图片下载会在您的页面布局中创建保留尺寸，因此它们不会转移等待下载的图片。当您专注于图像和媒体问题而不是 CSS。
时，您会惊讶于下载时间的节省和瓶颈的避免
所有这些使得预加载 CSS 就网站改进而言毫无价值。我会查看浏览器中堆积的多个 Bootstrap、JavaScript 模块和 JQuery 文件下载，以获取有限的共享浏览器连接并关注较少的脚本。 30 KB 左右的 CSS 可能不是问题。
Google Pagespeed 测试在与样式表一起使用时无法识别预加载。我试过了
<link rel="preload stylesheet" href="http://www.example.com/style.css" />
而且它仍然显示 "Consider using to prioritize fetching resources that are currently requested later in page load."。如果我从 rel 属性中删除样式表，它会识别预加载。
我想试试这个：
<link rel="preload" rel="stylesheet" href="http://www.example.com/style.css" />
但我不确定您是否可以为同一个 link 标签设置 2 个相同的属性。这行得通吗？
对于异步加载 CSS 样式，您应该指出它，作为预加载样式表。 每当您单独使用 rel="preload" 时，它不会在页面加载时转换为样式表，它将保持为 preload，因此要将其指示为您应该使用的样式表另一个属性，例如 as，它 表示元素的类型，在您的情况下，它应该是 style。然后你需要在加载过程完成时告诉浏览器你需要将其视为样式表，因此你必须定义另一个属性，如onload，然后定义其真正的关系.
所以你必须像这样导入它：
<link rel="preload" as="style" onload="this.rel='stylesheet'" href="http://www.example.com/style.css">
注意： 您可以在 google 开发人员中阅读更多相关信息 here。
更新
由于 preload 直到现在才在 firefox 中得到支持（根据 this），唯一的方法是声明它两次在一个 rel 标签或两个单独的标签中。
<link rel="preload" as="style" href="http://www.example.com/style.css">
<link rel="stylesheet" href="http://www.example.com/style.css">
或
<link rel="stylesheet" rel="preload" as="style" href="http://www.example.com/style.css">
注意： 由于@JohnyFree 测试了第二个 （有一条线穿过） Google 页面速度, 它不会被识别为有效的 preload 样式，而格式根据 W3.org.
预加载https://web.dev/defer-non-critical-css/
<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="http://www.example.com/style.css"/>
不支持的浏览器回退https://www.filamentgroup.com/lab/load-css-simpler
<link rel="stylesheet" media="print" onload="this.media='all'" href="http://www.example.com/style.css"/>
Firefox 据说在 85 版本中启用了“预加载”，但它似乎无法正常工作。我发现以下代码有效：
<link rel="preload stylesheet" as="style" href="style.css">
如果你觉得你需要这样做Javascript马戏团的把戏来节省几百毫秒，我推荐下面的版本。如果你想要 cross-browser 支持，请改用它：
<link media="print" onload="this.media='all'" rel="stylesheet" type="text/css" href="style.css" />
为什么这行得通？在几乎所有可追溯到 1990 年代的浏览器中，都普遍支持链接的“打印”媒体类型样式 sheet。链接的打印样式 sheet 仅在打印页面时使用。因为浏览器知道“sheet”媒体类型必须始终在“print”之前下载，所以它们经常延迟或异步下载带有“media=print”的sheets。页面作者不需要任何东西。自然地，它在大多数浏览器中以这种方式工作了很多年。
最近，试图遵循 Google 的新排名政策的开发人员发现了这个技巧，可以阻止某些样式阻止其他样式或立即下载。然后他们意识到“打印”媒体类型是唯一 built-in、cross-browser 欺骗浏览器延迟下载样式 sheets.
的方法使用上面的技巧将您的样式 sheet 变成“印刷”类型并不意味着它是“印刷”，因为稍后脚本会将其改回“全部”。它只是一种“黑客”或阻止现代浏览器与其他 sheet 并行下载您的 CSS 样式的方法。
注意：包括 Internet Explorer 版本 1-7 在内的大量旧版浏览器不支持“all”，无论如何，这是个坏主意。
阻止一种或两种风格 sheet 阻止另一种 sheet 下载是使用此技巧的唯一原因，并假设您使用的是一种巨大的风格 sheet大小超过 50 KB，并使用连接速度较慢的服务器。
建议？
我建议您永远不要“预加载”CSS，原因如下！
- 只是因为 Google 将此标记为 Lightspeed 中的一个问题，并不意味着用重复的样式链接填充您的网页并精心设计 JavaScript 技巧以缩短 100 毫秒是个好主意. 您应该更关心 HTML 页面的质量和完整性，而不是其他所有问题，包括速度或 advertising-driven 搜索引擎需求!
- 可能存在赛车问题！当您的 HTML 在您的异步“打印”sheet 自行解析回“全部”之前下载时会发生什么？您可能会在某些浏览器中看到闪烁，其中 HTML 首先下载并在下载异步样式之前开始渲染。然后您的用户会看到您的网站布局和字体移动或移动。恶心！！
- Async'ing CSS 与孩子们在 2021 年下载的这些设计糟糕的 Javascript 框架相比有点毫无意义，无论如何都会浪费下载时间。大多数样式 sheet 的大小为 50 KB 或更小，相比之下，当今最现代的 Javascript 框架（即 React、Angular、Ember，等等）。无论如何，这些下载经常将相同的 CSS 一遍又一遍地“嵌入”到浏览器的缓存中，强制重新加载相同的 CSS 每次站点访问，这与 CSS 可以缓存数月的链接样式不同！因此，如果每次访问都重新加载，预加载链接 CSS 是没有意义的。那有什么意义呢？
- 许多浏览器可能会因为这个技巧而崩溃和烧毁！
preload无论如何都没有被广泛采用，所以你 运行 在一定比例的用户中面临着巨大的风险 如果您使用此“hack”，则会看到一个无样式的网站。想象一下，有 5%-10% 的用户看到您的网站以默认 'Times Roman' 字体和白色 block-level 无样式内容页面显示，因为您想节省 500 毫秒的下载时间？抱歉，不值得冒险！ - 大多数旧浏览器在下载文件时只允许打开 2 个连接，因此它们受到打开连接的限制，而不是样式 sheet 下载。许多现代浏览器最多有 6 个。因此，再次强调，当与多个打开的 JavaScript 调用相结合时，连接是这里的瓶颈，而不是样式 sheet 下载。使用此技巧收效甚微。
- 缓慢的服务器通常是真正的瓶颈：服务器在打开连接时的延迟可能是巨大的瓶颈。即使您的主机提供商或 Wordpress 之类的 Web 应用程序正在使用缓存的图像、页面和代理，但您等待数百毫秒才能在服务器上打开连接，这一切都变得毫无意义。 CDN 也可能会失败、延迟、阻塞等。
- 除了缓慢的服务器和巨大的 JavaScript API 库之外，延迟下载的第一大因素通常是 巨大的图像文件 。考虑使用具有多种图像类型的新 HTML5 'picture' 元素，例如高度压缩的“WebP”。如果您的页面有“on-demand”、non-streaming 视频，那也必须设置为异步预加载或下载。添加“宽度”和“高度”值以强制 'alt' 属性 paceholders，因为图片下载会在您的页面布局中创建保留尺寸，因此它们不会转移等待下载的图片。当您专注于图像和媒体问题而不是 CSS。 时，您会惊讶于下载时间的节省和瓶颈的避免
所有这些使得预加载 CSS 就网站改进而言毫无价值。我会查看浏览器中堆积的多个 Bootstrap、JavaScript 模块和 JQuery 文件下载，以获取有限的共享浏览器连接并关注较少的脚本。 30 KB 左右的 CSS 可能不是问题。