preload、preconnect 和 dns-prefetch 生成器

preload、preconnect 和 dns-prefetch 生成器: 用途

Resource hints 是 <head> 中的标签，告诉浏览器页面将需要什么，让它提前建立连接和下载。适度使用能缩短主要内容出现的时间；用得过多反而有害。

粘贴地址或页面的 HTML，工具会做出选择：为最多三个重要域名设置 preconnect（字体时带 crossorigin），其余域名和统计脚本用 dns-prefetch，只对一两个字体和带 fetchpriority=high 的主图使用 preload，并为可能的下一页设置 prefetch。每个标签都附有原因。

使用方法

1. 粘贴地址或 HTML。
2. 检查域名、主图和下一页。
3. 把标签复制到 <head> 中。

使用场景

• 使用 Google Fonts 的网站。
• 顶部有大图的页面。
• 改善 Core Web Vitals 的 LCP。

常见问题

preconnect 和 dns-prefetch 有什么区别？

preconnect 会在浏览器需要之前就与另一个域名建立完整连接（DNS、TCP 和 TLS）。dns-prefetch 只解析 DNS，开销更小，适合不太重要的域名。只对少数域名（两三个）用 preconnect，其余用 dns-prefetch。

什么时候用 preload？

只用于浏览器发现得较晚的关键资源，例如标题字体（藏在 CSS 里）或由 CSS 作为背景的主图。preload 过多会与真正重要的资源争抢带宽，让网站变慢。

为什么字体需要 crossorigin？

字体总是以 CORS 模式获取。如果 preload 或 preconnect 上没有 crossorigin 属性，浏览器就无法复用已下载的内容，最终会把字体请求两次。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具