link rel="preload"对FCP的贡献是消除关键路径上的网络等待，而非加速渲染；仅当资源被首屏样式直接引用、浏览器默认发现晚、路径静态且as属性正确时，才能实测缩短FCP 100–400ms。
link rel="preload" 对 FCP 的贡献不是“加速渲染”，而是“消除关键路径上的网络等待”——它本身不改变 HTML 解析或 CSSOM 构建耗时，但能把原本串行的关键资源请求提前到解析早期发起，从而压缩从页面开始加载到首个内容可绘制的总时间窗口。
哪些媒体资源 preload 后能真实缩短 FCP
只有同时满足以下条件的资源，preload 才有可测量的 FCP 收益（实测通常压缩 100–400ms）：
- 该资源被内联
<style>或首屏<link rel="stylesheet">直接引用（如字体、关键图标 SVG、LCP 图片的 src） - 浏览器默认发现机制太晚：比如字体定义在外部 CSS 中，而 CSS 又是异步加载的 → 不 preload 就得等 CSS 下载 + 解析完才发起字体请求
- 资源路径静态、无运行时拼接（
href必须是确定字符串，不能含theme.woff2这类变量）
典型有效用例：<link rel="preload" href="/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>。反例：<link rel="preload" href="/img/hero-<code>hash.jpg" as="image"> —— 构建时 hash 不确定，preload 失效且可能触发重复请求。
as 属性写错直接让 preload 失效
as 决定浏览器是否启用对应资源类型的优化策略（如优先级、缓存、CORS 处理）。写错就等于告诉浏览器“这不是你要的东西”，结果是请求被忽略或降级为普通 fetch：
立即学习“前端免费学习笔记（深入）”；
-
as="script"用于 JS，但写了as="fetch"→ 浏览器不设Accept: */*，可能被 CDN 拒绝或返回 406 -
as="font"必须配crossorigin，否则字体加载失败（即使 URL 正确），FCP 不受影响但文字渲染空白 -
as="image"用于图片，但写了as="style"→ 浏览器按 CSS 流程处理，不触发图片解码，onload也不触发
查证方式：Network 面板中看该请求的 Initiator 列是否为 preload；若显示 parser 或空，说明未生效。
preload 字体对 FCP 的实际影响边界
字体 preload 能缩短 FCP，但仅限于“首屏文本依赖该字体且无 fallback”的场景：
- 如果用了
font-display: swap，FCP 不等字体加载，只等 layout → preload 对 FCP 几乎无贡献 - 如果用了
font-display: optional或block，且首屏<h1>使用该字体，preload 可避免 TTFB + 字体下载的串行延迟 - 多个字体同时 preload 会抢占带宽：Chrome 默认对同域 font 请求限流 2 个并发，多 preload 反而拖慢其他关键资源
建议只 preload 主文本字体（如 Inter Latin），跳过 icon font、display font 等非首屏必需字体。
preload 图片时必须配合尺寸与 decoding
预加载 LCP 图片（如 hero banner）能显著压缩 FCP，但漏掉这两个属性会让效果打折甚至引发 CLS 连带恶化：
- 必须声明
width和height（或 CSS aspect-ratio）：否则 HTML 解析器无法预留空间，图片加载完成前占位为 0×0，FCP 虽然触发，但用户看到的是“文字先出、图片后跳”，感知延迟更强 - 加
decoding="async"：避免图片解码阻塞主线程，尤其对大图（>1MB）可减少 50–100ms 渲染延迟 - 避免对
<picture>内部所有<source>都 preload：只需 preload 最可能匹配的那一个（如media="(min-width: 768px)"对应的 webp）
示例：<link rel="preload" href="/img/hero.webp" as="image" width="1200" height="600" decoding="async">。
真正起作用的不是 preload 标签本身，而是它把资源请求时机从“CSS 解析后”提前到“HTML 解析刚开始”。容易被忽略的是：preload 只解决“请求发起晚”，不解决“服务器响应慢”或“字体文件过大”，后者仍需 TTFB 优化和字重裁剪。
