如何对同一个标签同时使用 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">

注意：你可以在谷歌开发者中阅读更多关于它的信息。

更新

由于到目前为止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是有效的。