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

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

preload优化字体加载：FOIT实测缩短200–400毫秒

未使用`preload`时，浏览器必须等待CSS解析完成后才会请求字体文件，导致FOIT（Flash of Invisible Text）时长往往超过600毫秒。而加入``后，实测中位数可降至200–400毫秒。但有一个必要条件：必须添加`crossorigin`属性，即使字体与页面同源也不例外。如果遗漏，Chrome和Safari会在加载完成后丢弃该字体，在Network面板中会看到状态码为0或无法进入缓存。

内联背景图preload：首屏LCP降低150–300毫秒

在首屏区域使用``时，解析器无法直接识别该URL，必须等到样式计算阶段才开始加载图片。此时添加一行``，就能提前发起请求。实测表明，LCP（Largest Contentful Paint）中位数可减少150–300毫秒。注意：`as="image"`不支持`srcset`或`sizes`，仅适用于尺寸和格式确定的单张图片；若使用WebP格式，建议添加`type="image/webp"`以确保MIME类型匹配准确。

视频poster预加载有效，但完整MP4预加载受限

``对视频首帧快速显示有显著帮助，尤其在3G或弱网环境下。但不要期望`as="video"`能直接预加载整个MP4文件——它仅对同域MP4有效，且必须携带`crossorigin`属性（即使同域也不例外），否则会静默失败。跨域视频预加载还需要服务端返回`Access-Control-Allow-Origin`头，否则Network面板中会出现CORS错误，导致缓存失效。至于iOS Safari，`as="video"`几乎不起作用，不适合用于播放前预加载。

preload并非越多越好：错误配置拖慢首屏100–200毫秒

实测数据清楚显示：每多一个配置错误的`preload`（例如`as="script"`却指向CSS文件），就会额外占用20–50KB带宽，进而挤占高优先级队列，导致真正关键资源延迟100–200毫秒。常见的错误场景包括：`as="font"`缺少`crossorigin`、`as="style"`未配合`onload="this.onload=null;this.rel='stylesheet'"`、以及盲目对``使用preload（实际上`fetchpriority="high"`更合适）。判断preload是否生效，不能仅凭HTML代码中有无该行，而应通过Chrome DevTools的Network面板筛选`Initiator: preload`，并确认`Priority`为`Highest`或`High`。