preconnect 到底该写在 head 哪个位置才生效?
我在优化页面加载速度,看到建议用 <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”,而且网络面板里这些域名的连接时间依然很长。是不是我放的位置不对,还是漏了啥参数?
漏了
crossorigin属性,这个很重要。浏览器要建立跨域连接时需要这个标记来识别。另外记住顺序:charset 要放在最前面,然后才是 preconnect 链接。这俩小改动应该能解决问题。
最后提醒下,别加太多 preconnect,只对关键资源用,不然反而拖慢加载。累死个人调这些东西。