合理配置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`。
