logo标签列表

如何在同一个标签上同时使用rel ="preload"和rel ="stylesheet"？

csspreloadgoogle-pagespeed
3
Google PageSpeed测试无法识别preload，当它与样式表一起使用时。我尝试了。
<link rel="preload stylesheet" href="http://www.example.com/style.css" />

它仍然显示“考虑使用 <link rel="preload"> 来优先获取当前页面加载后请求的资源。” 如果我从rel属性中删除样式表，它会识别到预加载。

我正在考虑尝试这个：

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

但我不确定同一个链接标签是否可以有两个相同的属性。这样做会有效吗？

你必须声明两次 - https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content - Andy Holmes
1
注意：<llink> 标签不使用也不需要在 HTML 中添加闭合斜杠，这一点从未改变。 - Rob
4个回答
16
为了异步加载CSS样式，您应该将其指定为预加载样式表。 每当您仅使用rel="preload"时，它不会在页面加载时转换为样式表。它将保持为preload，因此要将其指定为样式表，您应该使用另一个属性，例如as，它指示元素的类型；在您的情况下，应该是style。然后，您需要告诉浏览器何时完成加载过程您需要将其视为样式表，因此必须定义另一个属性，例如onload，然后定义其真实关系。

因此，您必须像这样导入它：

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

注意：您可以在Google开发者这里阅读更多相关信息。

更新

根据此处的说明，由于preload在Firefox中尚未得到支持，因此唯一的方法是在一个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的规范。

2023年更新

感谢@Hewlett，根据Caniuse的数据，所有主流浏览器现在都支持preload功能，可以安全地使用<link rel="preload">预取资源而无需执行它们。因此，在上述情况下，关于浏览器兼容性的工作解决方案应该是：

<link rel="preload" as="style" href="http://www.example.com/style.css">
抱歉，我不明白，应该使用哪种方式才能让Google Pagespeed将其识别为有效，并允许旧浏览器下载样式表？ - Samul
现在看起来Firefox已经支持它了。 - Hewlett
0
如果你觉得需要使用这个“Javascript杂技特技”来节省几百毫秒的时间，我建议使用下面的版本。如果你想要跨浏览器支持，请使用它：
<link media="print" onload="this.media='all'" rel="stylesheet" type="text/css" href="style.css" />

为什么这个方法有效呢？几乎所有的浏览器从上世纪90年代开始，都普遍支持链接“打印”媒体类型样式表。链接的打印样式表仅在打印页面时使用。因为浏览器知道“sheet”媒体类型必须在“print”之前下载，所以它们经常异步延迟或下载带有“media=print”的样式表。页面作者不需要做任何事情。在大多数浏览器中，它自然而然地运作了很多年。
最近，试图遵循谷歌的新排名政策的开发人员发现了这个技巧，可以阻止某些样式阻塞其他样式或立即下载。然后他们意识到，“打印”媒体类型是唯一内置的、跨浏览器的方法来欺骗浏览器延迟下载样式表。
使用上述技巧将样式表转换为“打印”类型并不意味着它是“打印”，因为脚本稍后会将其改回“all”。这只是一种“hack”或方法，可以防止现代浏览器与其他样式表并行下载您的CSS样式。
注意：“all”不受广泛支持的老旧浏览器，包括Internet Explorer 1-7版本，所以这是一个不好的想法。

阻止一个或两个样式表阻止另一个样式表下载将是使用此技巧的唯一原因，并假定您正在使用一个超过50千字节大小的巨大样式表并使用连接速度较慢的服务器。

建议？

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

  1. 仅仅因为Google在Lightspeed中标记这个问题，就不意味着填充网页上的重复样式链接和精心设计的JavaScript技巧以节省100毫秒是一个好主意。你应该更关注HTML页面的质量和完整性，而不是速度或广告驱动的搜索引擎需求！
  2. 可能会出现竞争问题！当你的HTML在异步“打印”表格返回到“全部”之前下载时会发生什么？在某些浏览器中，您可能会看到HTML先下载并开始渲染，然后再下载异步样式。然后，您的用户会看到您的网站布局和字体移动或移位。非常糟糕！
  3. 与2021年孩子们下载的这些设计不良的Javascript框架相比，异步CSS有点无意义，这些框架浪费了下载时间。大多数样式表的大小不到50千字节，而现代Javascript框架推入浏览器的巨大500-1500+千字节（例如React、Angular、Ember等）则远远超过这个大小。这些下载通常会将相同的CSS一遍又一遍地“嵌入”到浏览器的缓存中，每次访问网站都会强制重新加载相同的CSS，而链接的CSS样式可以缓存数月！因此，如果每次访问都重新加载，那么预加载链接的CSS就没有意义。那么这有什么意义呢？
  4. 许多浏览器可能会崩溃并烧毁这个技巧！preload并不被广泛采用，因此如果您使用这个“hack”，在一定比例的用户中，您将面临巨大的风险，看到未经过样式处理的网站。想象一下，5%-10%的用户看到您的网站以默认的“Times Roman”字体和白色块级未经过样式处理的内容页面显示，因为您想节省500毫秒的下载时间？抱歉，这个风险不值得。
  5. 大多数旧浏览器只允许同时打开2个连接来下载文件，因此它们受到打开连接的限制，而不是样式表下载。许多现代浏览器最多允许6个连接。因此，在与多个打开的JavaScript调用结合使用时，连接是瓶颈，而不是样式表下载。因此，使用这个技巧所获得的收益很少。
  6. 慢服务器通常是真正的瓶颈：服务器延迟打开服务器上的连接可能是巨大的瓶颈。即使您的主机提供商或Web应用程序（如WordPress）使用了缓存的图像、页面和代理，但如果您等待数百毫秒才能在服务器上打开连接，所有这些都变得毫无意义。CDN也可能失败、延迟、被阻止等。
  7. 除了慢服务器和庞大的JavaScript API库之外，延迟下载的头号因素往往是巨大的图像文件。考虑使用新的HTML5“picture”元素，其中包含多种高度压缩的图像类型，例如“WebP”。如果您的页面具有“按需”非流式视频，则还必须将其设置为预加载或异步下载。添加“width”和“height”值以强制在图
    所有这些都使得预加载CSS在网站改进方面几乎毫无价值。我建议您查看浏览器中堆积的多个Bootstrap、JavaScript模块和JQuery文件下载，它们会占用有限的共享浏览器连接，并专注于减少脚本数量。大约30KB左右的CSS很可能不是问题所在。
它被每个浏览器支持，除非你的受众在最贫穷的非洲国家之一。 - Barbz_YHOOL
"preload"不支持任何Internet Explorer版本、Triton Edge以及许多2010年之前的旧版浏览器。你必须考虑到这些，否则会限制你的受众。 - Stokely
1
我使用完全过时的浏览器和操作系统，感觉自己像外星人一样。这些浏览器最早也是在2017年发布的，很多网站都无法使用。想象一下使用早于2010年的东西，这毫无意义，完全无法使用，你可以想象一下。只有过时的公司才会出现这种情况，而这并不是任何人的受众群体。 - Barbz_YHOOL
不久之前，我在一家大公司遇到了一个安装有IE6的投影机PC。幸运的是，我已经为我们的项目添加了IE6破碎盒模型的修复程序。如果你不做好准备，你就会失败。 - Stokely
0
-2

据说Firefox在85版本中启用了“预加载”，但似乎并没有正常工作。我发现下面的代码可以解决这个问题：

<link rel="preload stylesheet" as="style" href="style.css">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接