资源预加载提示生成器

四种提示的区别

关键区别在于 preload 是"现在就下载"，会和其他关键资源抢带宽；prefetch 是"闲着再下载"，优先级最低。用错的话，preload 反而会拖慢首屏。

preconnect 别滥用

每个 preconnect 都要建立一个完整的连接（DNS + TCP + TLS），而这个握手本身要消耗时间与资源。经验规则是：

• 同一页面 最多 3–4 个 preconnect。多了会适得其反，浏览器需要排队建立连接。
• 对确定会用的域名用 preconnect；只是"可能会用"的用 dns-prefetch 就够了——DNS 解析成本低，浪费了也无妨。
• 同一域名不要同时写 dns-prefetch 和 preconnect。preconnect 已经包含 DNS 解析，重复声明是浪费（虽然无害）。

字体的 crossorigin 是必须的

这是最常见的 preload 失效原因：网页字体请求默认使用 CORS 匿名模式，如果 preload 时不加 crossorigin，浏览器会把它当成两个不同的请求，导致字体被下载两次——不仅没提速，还多了一次请求。

注意 crossorigin 即使是同源字体也要加，这是标准规定。同样需要注意 as 属性必须准确，写错等于 preload 无效。

什么该 preload

原则很简单：preload 只给"少了它首屏就出不来"的资源。判断方法是打开发者工具的 Network 面板，看瀑布图里哪些资源处于关键路径上。

你可能还想问

预加载提示有什么用？

提前告诉浏览器关键资源的位置与优先级，缩短关键路径的等待；用错反而会抢占带宽，拖慢真正重要的资源。

该预加载哪些资源？

只预加载首屏必需的字体、关键样式与图片；范围过宽会与正常加载竞争，效果适得其反。

和缓存策略怎么配合？

提示只是提前发起请求，缓存仍靠响应头控制；两者配合才能既早开始又避免重复下载。

相关工具

相关内容