preconnect 到底该写在 head 哪个位置才生效?

西门建英 阅读 4

我在优化页面加载速度,看到建议用 <link rel="preconnect"> 提前建立第三方域名连接。但我加了之后用 DevTools 看,好像没起作用?

我把它放在了 <head> 最顶部,像这样:

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" rel="external nofollow" >
  <link rel="preconnect" href="https://cdn.example.com" rel="external nofollow" >
  <meta charset="UTF-8">
  <title>My Site</title>
  <!-- 其他资源 -->
</head>

但 Lighthouse 还是提示“未使用 preconnect”,而且网络面板里这些域名的连接时间依然很长。是不是我放的位置不对,还是漏了啥参数?

我来解答 赞 2 收藏
二维码
手机扫码查看
1 条解答
Code°富水
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<title>My Site</title>
<!-- 其他资源 -->
</head>


漏了 crossorigin 属性,这个很重要。浏览器要建立跨域连接时需要这个标记来识别。

另外记住顺序:charset 要放在最前面,然后才是 preconnect 链接。这俩小改动应该能解决问题。

最后提醒下,别加太多 preconnect,只对关键资源用,不然反而拖慢加载。累死个人调这些东西。
点赞
2026-03-31 10:10