<head> 中的预加载顺序重要吗？

【问题标题】：Does preloading order in <head> matter?<head> 中的预加载顺序重要吗？
【发布时间】：2021-02-09 14:21:56
【问题描述】：

我正在使用预加载的重图像，当它未预加载时会在我的网站上导致 CLS，这是推荐的。

但是在限制慢速连接时，预加载需要太多时间，以致图像仍然迟到并导致 CLS。

这是一个大型网站，头部加载了很多资源以及 opengraph 等。所以我的问题如下：将预加载标签（图像、样式表）放在顶部是否有任何意义头，这会加速预加载吗？

【问题讨论】：

【解决方案1】：

预加载不是 CLS 修复所需的解决方案。对于 CLS，您应该考虑为它添加图像高度/宽度，或者至少是宽高比 css，以便为它保留空间。

预加载标签将按照它们在头部的顺序开始加载，它们可能会根据它们的类型（字体、脚本和 css 的初始优先级略有不同）或浏览器实际尝试使用它时被浏览器重新设置优先级，但是通常只有在您使用 http2+ 时。

预加载 http 标头似乎比预加载标签稍快。

【讨论】：