你的网站为什么总感觉“慢半拍”？

点开页面，明明 Lighthouse 打分 95，可自己手一滑——文字半天不出现，背景视频卡在加载圈里转，连导航栏都迟半秒才响应。
不是服务器慢，也不是代码臃肿，而是浏览器在等：等 DNS 回复、等 TCP 握手、等 TLS 握完再开口要资源。

preconnect 到底解决了什么核心问题？

浏览器访问一个新域名，得先走三步：查 DNS、建 TCP 连接、完成 TLS 协商。这三步加起来，轻松吃掉 200–600ms——尤其第一次访问时。

preconnect 就是提前让浏览器“站到门口敲门”。你告诉它：“待会儿我要用 fonts.googleapis.com，你现在就去敲门、递名片、验身份，我马上来。”
等真正请求字体文件时，连接已经热好了，直接传数据。

真实体验：一个设计类官网用了 Google Fonts，没加 preconnect 时，每次刷新都先空白半秒再“啪”一下弹出文字；加上后，“文字闪现”（FOIT）几乎消失，滚动和点击的跟手感明显变顺。

怎么正确使用 preconnect 指令？

在 HTML 的 <head> 里加一行 link 标签就行：

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>

三个要点盯紧：

  1. rel="preconnect" 是固定写法，不能写错；
  2. href 必须带协议（https://），只写域名会失效；
  3. crossorigin 属性别省——字体、JS、API 请求基本都要它，否则预连接可能白忙一场。

可以加多个，但别堆。挑最核心的 3–5 个就行。比如 fonts.googleapis.com、cdn.jsdelivr.net、api.yoursite.com。再多，浏览器反而要分心管一堆空闲连接。

应该在什么时候使用 preconnect？

别见第三方就 preconnect。它只该用在“页面一打开就得动”的资源上：

  • 网页字体服务商：Google Fonts、Adobe Fonts。文字渲染卡住，整个首屏就废了；
  • 前端框架 CDN：比如从 cdn.jsdelivr.net 加载 Vue 或 React，它们决定了页面能不能“活过来”；
  • 首屏数据 API 域名：比如 api.shop.com 返回商品列表，没它，首页就是空白页；
  • 首屏视频/图片 CDN：像 player.vimeo.com 或某个图片子域名，用户眼睛第一眼看到的内容。

举个例子：你首页嵌了一段 Vimeo 背景视频，同时加载了百度统计。优先 preconnect Vimeo——视频卡住，用户立刻关掉；统计晚几百毫秒，根本没人察觉。

preconnect 和 dns-prefetch 有什么区别？

dns-prefetch 只做第一步：查 DNS。相当于你记下对方电话号码，但没拨号。

preconnect 是全套动作：查号 + 拨通 + 自报家门 + 确认身份（DNS + TCP + TLS）。它更重，也更有效。

所以别纠结——现代浏览器（Chrome/Firefox/Safari 最新版）全支持 preconnect，关键域名直接上它；拿不准的、低优先级的，再考虑 dns-prefetch。

如何找到需要预连接的关键域名？

靠猜不如看真数据。用你天天都在用的 Chrome 开发者工具：

  1. 打开网站首页，按 F12 → 切到「Network」面板；
  2. 勾上「Disable cache」，然后 Ctrl+R（Windows）或 Cmd+R（Mac）硬刷；
  3. 在瀑布流里，找那些横条很长、开头卡在「Stalled」「DNS Lookup」「Initial connection」的请求；
  4. 点开它们，看「Domain」列——这些就是你要下手的第三方域名。

实际排查：一个本地生活平台首页图片全走 img.local-life.com，首次访问时每张图都卡在“Initial connection”近 400ms；给这个域名加了 preconnect 后，图片请求一上来就直奔「Request sent」，启动快了一大截。

使用 preconnect 有哪些常见的坑？

  • 连早了，连完了人还没来：浏览器默认 10 秒不用就断开预连接。如果 preconnect 写在 <head>，但对应资源要滚动到底部才加载，那连接大概率已断——专为“前几屏必用”的资源留。
  • 连太多，浏览器累瘫：每个 preconnect 都占一个 socket。一口气加十个，可能比不加还慢。信我，3 个够狠，5 个封顶。
  • 忘了 crossorigin：字体、fetch 请求这类跨域资源，没它，浏览器会新建一个连接去取文件，预连接等于白干。
  • href 写错协议：http://fonts.googleapis.com？现在全站 HTTPS，这么写直接被浏览器忽略。

今天下班前就能执行的一个具体步骤

打开你正在维护的网站后台，找到首页的模板文件（WordPress 是 header.php，Vue 是 public/index.html，Next.js 是 app/layout.tsx 里的 <head> 区域），然后：

  1. 在 <title> 标签后面、第一个 <link rel="stylesheet"> 或 <script> 前，插入 1–3 行 preconnect；
  2. 目标域名就从刚才 Network 面板里挑：那个卡在「Initial connection」最久的字体、CDN 或 API 域名；
  3. 保存文件，重新部署（或者本地起服务验证）；
  4. 再进开发者工具刷一次，盯着瀑布流里那几个长横条——如果「Initial connection」阶段消失了，或者缩成一根细线，就成了。

这事不用改后端，不用买服务，也不用等排期。今晚改完，明早用户就感觉“咦，好像快了点”。