Resource Hints 怎么用？preload、preconnect、dns-prefetch 性能优化指南

网页性能优化里，Resource Hints 可以告诉浏览器哪些资源或域名值得提前准备。用得好能减少等待，用错也可能浪费带宽。

你可以用 Resource Hints 生成器 生成基础标签。

常见类型

• dns-prefetch：提前解析域名。
• preconnect：提前建立连接。
• preload：提前加载关键资源。
• prefetch：为空闲后的未来导航准备资源。

它们作用不同，不应该混着乱用。

preload 适合关键资源

适合提前加载：

• 首屏关键字体。
• 首屏大图。
• 关键 CSS。

但 preload 太多会抢占带宽，影响真正重要的资源。每个 preload 都应该有明确理由。

preconnect 适合第三方域名

如果页面一定会请求某个第三方域名，比如字体、CDN、API，可以考虑 preconnect。

但第三方太多时，不要全部 preconnect。浏览器连接数有限，过度优化会适得其反。

常见误用

最常见的误用是把所有图片、脚本、字体都 preload。这样看起来很积极，实际可能让浏览器先下载不重要的资源，反而拖慢首屏。preload 只应该给真正阻塞首屏体验的资源，例如首屏字体、关键 CSS 或明确会展示的大图。

另一个问题是资源类型写错。preload 字体需要正确的 as="font"、type 和 crossorigin，否则浏览器可能重复下载。图片、脚本、样式也应该写对 as，这样浏览器才能正确设置优先级。

先测再加

建议先用性能面板或 WebPageTest 找到等待最久的关键资源，再决定加哪一种 hint。加完后重新测一次，看 LCP、资源瀑布图和连接建立时间是否真的改善。如果指标没有变化，宁愿删掉，保持页面头部干净。

总结

Resource Hints 是性能优化提示，不是越多越好。只给关键资源和确定会用的域名加。

需要生成标签时，可以用 Resource Hints 生成器，再用测速工具观察是否真的改善。