HTML中Link标签Preload对关键媒体资源加载时长量化贡献

preload可缩短FOIT 200–400ms、LCP 150–300ms，但需严格匹配as属性与crossorigin；错用会拖慢首屏100–200ms，须通过Network面板验证Initiator和Priority。

preload对字体加载时长的实测影响：FOIT缩短200–400ms

没加 preload 时，浏览器必须等 CSS 解析完才发起字体请求，FOIT（Flash of Invisible Text）常达 600ms+；加了 <link rel="preload" href="font.woff2" as="font" crossorigin> 后，实测 FOIT 中位数压到 200–400ms。前提是 crossorigin 必须写，哪怕字体和页面同源——漏掉它，Chrome/Safari 加载完也丢弃，Network 面板里能看到状态码为 0 或直接不进缓存。

内联背景图 preload 能抢出首屏图 150–300ms

当 hero 区用 <style>.hero { background-image: url(banner.webp); }</style> 时，parser 根本看不到 URL，浏览器直到样式计算阶段才拉图。加 <link rel="preload" href="banner.webp" as="image"> 可提前触发请求，实测 LCP（Largest Contentful Paint）中位数降低 150–300ms。注意：as="image" 不支持 srcset 或 sizes，只适合确定尺寸/格式的单图；若用 WebP，建议加上 type="image/webp" 提升 MIME 匹配精度。

video poster 预加载有效，但整个 MP4 不行

<link rel="preload" href="poster.jpg" as="image"> 对视频首帧秒出有明确收益，尤其在 3G 或弱网下；但 as="video" 仅对同域 MP4 有效，且必须带 crossorigin（即使同源），否则静默失败。跨域视频预加载还依赖服务端返回 Access-Control-Allow-Origin，缺则 Network 面板报 CORS 错误、不进缓存。iOS Safari 上 as="video" 基本无效，别依赖它做播放准备。

preload 不是“越多越快”，错用反而拖慢首屏

实测显示：每多一个错配的 preload（比如 as="script" 却指向 CSS 文件），会额外占用约 20–50KB 带宽并挤占高优队列，导致真正关键资源延迟 100–200ms。常见错用包括：as="font" 漏 crossorigin、as="style" 没配 onload="this.onload=null;this.rel='stylesheet'"、对 <img src> 盲目加 preload（不如用 fetchpriority="high"）。验证是否生效，不能只看 HTML 有没有那行，得进 Chrome DevTools Network 面板筛 Initiator: preload 并确认 Priority 是 Highest 或 High。

立即学习“前端免费学习笔记（深入）”；