当页面加载缓慢时，用户流失率会显著上升。MDN 的 Web 性能指南指出，网站加载时间、交互响应速度以及滚动流畅度等，都是性能的关键维度。预加载（preload）与预连接（preconnect）是两种常用的资源提示（Resource Hints），它们能提前告知浏览器关键资源或源站，从而减少等待时间。本文先给出判断路径：如果你希望加速关键资源（如字体、首屏图片、脚本）的加载，或希望减少与第三方源的连接延迟，那么预加载和预连接值得优先考虑。接下来，我们展开细节，说明它们的工作原理、适用场景、配置方法以及常见误区。
预加载与预连接的区别
预加载（<link rel="preload">）告诉浏览器：当前页面即将需要某个资源，请立即开始下载，并给予较高优先级。它适用于当前页面关键路径上的资源，例如首屏大图、字体文件、关键 CSS/JS。预连接（<link rel="preconnect">）则告诉浏览器：页面会与某个源（如 CDN、API 服务）通信，请提前建立连接（包括 DNS 查询、TCP 握手和 TLS 协商），从而节省后续请求的握手时间。预连接通常用于第三方域，例如字体服务、分析服务、API 端点。
如何判断是否该用预加载
首先，检查页面加载过程中哪些资源是“关键”的：例如首屏渲染必需的 CSS、字体、图片。如果这些资源在 HTML 解析后期才被发现（如通过 JavaScript 动态加载），或者浏览器默认优先级较低（如字体、background-image），那么使用预加载可以显著提升加载速度。其次，查看网络面板中的“优先级”列，如果关键资源被标记为“Lowest”或“Low”，而它又阻塞了首屏渲染，那么预加载是合适的。但注意，预加载不是万能的：过度使用会浪费带宽，甚至挤占其他资源的带宽。因此，只预加载当前页面立即需要的资源，不要预加载所有资源。
预连接的适用场景
预连接适用于知道一定会发起请求的第三方源，尤其是那些需要安全连接的源。例如，使用 Google Fonts 时，浏览器需要先连接 fonts.googleapis.com 和 fonts.gstatic.com；使用 CDN 时，连接 CDN 域名；使用 API 时，连接 API 域名。预连接可以提前完成 DNS 查询、TCP 握手和 TLS 协商，在发起请求时直接发送数据，减少往返时间。但同样，预连接会占用浏览器连接池，如果预连接了多个源，而实际只用了少数，可能会浪费连接资源。因此，只预连接那些确实会立即使用的源。
配置步骤与代码示例
在 HTML 的 <head> 中添加以下标签即可：
<!-- 预加载关键资源 -->
<link rel="preload" as="style" href="critical.css">
<link rel="preload" as="font" type="font/woff2" href="font.woff2" crossorigin>
<!-- 预连接第三方源 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>对于预加载，必须指定 as 属性，它告诉浏览器资源的类型（如 style、font、script、image）。如果类型错误，浏览器可能忽略预加载。对于字体，还需要添加 crossorigin 属性，因为字体请求默认是跨源模式。预连接时，对于需要发送凭据的请求（如跨源字体），也需要添加 crossorigin。
常见误区与失败条件
误区一：预加载所有资源。这会导致浏览器同时下载大量资源，反而降低关键资源的加载速度。正确做法是只预加载首屏关键资源。误区二：预加载了但未使用。如果预加载了资源，但页面最终没有使用它，浏览器会下载浪费的字节，并可能延迟其他资源。误区三：预连接了所有第三方域。如果预连接了多个源，但实际请求很少，会占用连接池，影响其他请求。误区四：忽略 as 和 crossorigin。错误设置会导致预加载失效。失败条件还包括：浏览器不支持这些提示（现代浏览器基本都支持，但旧浏览器会忽略）；服务器不支持 HTTP/2 或 HTTP/3，预加载可能无法发挥最大效果；预加载的资源被缓存后，再次加载可能不会触发。
如何验证效果
使用 Chrome DevTools 的 Network 面板，观察资源的“优先级”和“开始时间”。预加载的资源应该更早开始下载，预连接的源应该显示“已连接”状态。还可以使用 Lighthouse 进行性能审计，它会检查预加载和预连接的使用情况，并给出建议。此外，可以对比启用前后的加载时间、LCP（Largest Contentful Paint）等指标。注意，预加载和预连接只是性能优化的一部分，需要结合其他技术如压缩、缓存、CDN 等。
与内容压缩等其他优化的配合
预加载和预连接能减少网络等待时间，而内容压缩（如 Brotli、Gzip）能减少传输数据量。两者可以叠加使用。例如，预加载一个压缩后的 CSS 文件，浏览器会先下载压缩数据，再解压。如果服务器配置了 Brotli 压缩，可以进一步减小传输体积。相关配置可参考本站关于 Brotli 压缩的文章，了解如何启用压缩以配合预加载。
参考资料
延伸阅读