如何将 rel="preload" 和 rel="stylesheet" 用于同一个标签？

Question

Google Pagespeed 测试在与样式表一起使用时无法识别预加载。我试过了

<link rel="preload stylesheet" href="http://www.example.com/style.css" />

它仍然显示“考虑使用以优先获取页面加载中稍后请求的资源。”。如果我从 rel 属性中删除样式表，它会识别预加载。

我想试试这个：

<link rel="preload" rel="stylesheet" href="http://www.example.com/style.css" />

但我不确定您是否可以为同一个链接标签设置 2 个相同的属性。这行得通吗？

Answer 1

对于异步加载 CSS 样式，您应该将其指定为预加载样式表。 当您单独使用rel="preload" 时，它不会在页面加载时转换为样式表，它将保持为preload，因此要将其指示为样式表，您应该使用另一个属性，例如as 表示元素的类型，在您的情况下，它应该是style。然后，您需要在加载过程完成时告诉浏览器您需要将其视为样式表，因此您必须定义另一个属性，例如onload，然后定义其真正的关系。

所以你必须像这样导入它：

<link rel="preload" as="style" onload="this.rel='stylesheet'" href="http://www.example.com/style.css">

注意：您可以在谷歌开发者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有效。

Answer 2

预加载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"/>

Answer 3

如果您觉得需要这样做Javascript 马戏团技巧来节省几百毫秒，我推荐以下版本。如果您需要跨浏览器支持，请改用它：

<link media="print" onload="this.media='all'" rel="stylesheet" type="text/css" href="style.css" />

为什么会这样？几乎所有可以追溯到 1990 年代的浏览器都普遍支持链接的“打印”媒体类型样式表。链接的打印样式表仅在打印页面时使用。因为浏览器知道“sheet”媒体类型必须总是在“print”之前下载，所以他们经常延迟或异步下载带有“media=print”的sheet。页面作者不需要任何东西。自然，它在大多数浏览器中都以这种方式工作了很多年。

最近，尝试遵循 Google 新排名政策的开发人员发现了这个技巧，可以阻止某些样式阻止其他样式或立即下载。然后他们意识到“打印”媒体类型是唯一一种内置的、跨浏览器的方法，可以欺骗浏览器延迟下载样式表。

使用上述技巧将样式表转换为“打印”类型并不意味着它的“打印”，因为脚本稍后会将其更改回“全部”。这只是一种“黑客”或阻止现代浏览器与其他工作表并行下载您的 CSS 样式的方法。

注意：“all”在包括 Internet Explorer 版本 1-7 在内的各种旧浏览器中不受支持，所以无论如何都是个坏主意。

阻止一个或两个样式表阻止另一个表下载将是使用此技巧的唯一原因，并假设您使用的是 50+ KB 大小的 HUGE 样式表并使用连接速度较慢的服务器。

建议？

出于以下原因，我建议您永远不要“预加载” CSS！

1. 仅仅因为 Google 将此标记为 Lightspeed 中的一个问题，并不意味着用重复的样式链接和精心设计的 JavaScript 黑客来填充您的网页以缩短 100 毫秒是一个好主意。 您应该更关心 HTML 页面的质量和完整性，而不是其他所有问题，包括速度或广告驱动的搜索引擎需求！
2. 可能存在赛车问题！当您的 HTML 下载在您的异步“打印”表本身解析回“全部”之前会发生什么？您可能会在某些浏览器中看到闪烁，其中首先下载 HTML 并在下载异步样式之前开始渲染。然后，您的用户会看到您的网站布局和字体移动或移动。讨厌！！
3. 与孩子们在 2021 年下载的这些设计不佳的 Javascript 框架相比，异步 CSS 有点毫无意义，无论如何都会浪费下载时间。与当今大多数现代 Javascript 框架（即 React、Angular、Ember 等）塞进浏览器的 MASSIVE 500-1500+ KB 相比，大多数样式表的大小为 50 KB 或更小。无论如何，这些下载通常会将相同的 CSS 一遍又一遍地“嵌入”到浏览器的缓存中，从而强制每次站点访问都重新加载相同的 CSS，这与可以缓存数月的 CSS 链接样式不同！因此，如果每次访问都重新加载链接的 CSS，则预加载链接的 CSS 毫无意义。那么有什么意义呢？
4. 许多浏览器可能会因为这个技巧而崩溃和烧毁！ preload 无论如何都没有被广泛采用，因此您在一定比例的用户中冒着巨大的风险 如果你使用这个“hack”，就会看到一个没有样式的网站。想象一下，有 5%-10% 的用户看到您的网站以默认的“Times Roman”字体和白色块级、无样式的内容页面显示，因为您想节省 500 毫秒的下载时间？抱歉，不值得冒险！
5. 大多数旧浏览器在下载文件时只允许 2 个打开的连接，因此它们受到打开连接的限制，而不是样式表下载。许多现代浏览器最多有 6 个。同样，当与多个打开的 JavaScript 调用结合使用时，连接是这里的瓶颈，而不是样式表下载。使用这个技巧收效甚微。
6. 慢速服务器通常是真实瓶颈：在服务器上打开连接的服务器延迟可能是巨大的瓶颈。即使您的主机提供商或 Web 应用程序（如 Wordpress）使用缓存的图像、页面和代理，但您等待数百毫秒以在服务器上打开连接，这一切都变得毫无意义。 CDN 也可能出现故障、延迟、阻塞等情况。
7. 除了缓慢的服务器和庞大的 JavaScript API 库之外，延迟下载的第一大因素通常是巨大的图像文件。考虑使用具有多种图像类型的新 HTML5“图片”元素，例如高度压缩的“WebP”。如果您的页面有“点播”、非流式视频，也必须设置为异步预加载或下载。添加“宽度”和“高度”值以强制“alt”属性占位符，因为图像下载将在您的页面布局中创建保留尺寸，因此它们不会转移等待图像下载。您会惊讶于下载时间和瓶颈的节省当您专注于图像和媒体问题而不是 CSS 时会被阻止。

就网站改进而言，所有这些都使得预加载 CSS 毫无价值。我会看一下浏览器中堆积的多个 Bootstrap、JavaScript 模块和 JQuery 文件下载，它们抓住了有限的共享浏览器连接，并专注于更少的脚本。 30 KB 左右的 CSS 可能不是问题。

Answer 4

Firefox 应该在 85 版中启用了“预加载”，但它似乎无法正常工作。我发现下面的代码有效：

<link rel="preload stylesheet" as="style" href="style.css">