补两点实战中最容易踩的:as="style" 的 preload 只把资源下载下来、并不应用它,后面必须再跟一个真正的 <link rel="stylesheet" href="..."> 才会生效;字体则是 preload 命中率最高的场景,但 crossorigin 少写一个字母,浏览器就会因为缓存键不一致重新下载一遍,反而得不偿失。

另外,preload 的数量要克制,一般控制在 3~5 个以内,优先给 LCP 图片、首屏字体、关键 CSS。preload 只是抬高优先级,一旦把首屏用不到的资源也塞进去,带宽和连接数就被挤占,真正关键的资源反而排队更久,LCP 不升反降。图片如果用了响应式,记得配 imagesrcset / imagesizes 而不是只写 href,否则浏览器拉的可能是错的那张。

还有两个落地细节:构建产物带 hash 时不要手写 preload,交给 vite、webpack 那类插件或服务端模板注入;想再早一点被发现,可以走 HTTP 的 Link 响应头或 103 Early Hints,比 HTML 里的 link 标签还快。上线后的验证方式是看 DevTools Performance 面板的 Priority 列,以及 Lighthouse 里有没有「preload 了但未被使用」的警告。

最后提醒一句:别对首屏之外的懒加载图片做 preload,那是 prefetch 或懒加载该干的活,混用只会让缓存白占内存。