前端与浏览器 / 进阶

资源加载优先级：preload、preconnect 与懒加载怎么选

区分 preload、prefetch、preconnect、modulepreload 和 fetchpriority 的用途，并避免带宽竞争。

8 分钟Preload · Preconnect · Lazy Loading · Priority Hints

让首屏资源可被扫描器发现

预加载扫描器能在主解析器被脚本阻塞时继续发现 HTML 中的图片、样式和脚本。用 JavaScript 很晚才拼出首屏图片 URL，会错过这个优势。首屏以下图片使用 loading=lazy，首屏 LCP 图片不要懒加载。fetchpriority 是优先级提示，不会替代正确的资源发现顺序。

EXAMPLE / 01Preload

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin>
<img src="/hero.avif" width="1280" height="720" fetchpriority="high" alt="产品工作台界面">

把实现拆成可验证的小块

首屏关键资源应直接出现在 HTML

最后回到真实页面检查

每个提示都要用网络面板验证是否产生收益