加载优化的核心：缩短关键渲染路径#

用户看到内容前，必须下载并执行关键资源（HTML/CSS/阻塞 JS）。优化思路：更少、更小、更早、更聪明地加载。

1. 减少与压缩#

• 删无用代码：tree-shaking、按需引入（见工程化篇）。
• 压缩：JS/CSS 用 gzip/brotli；文本类资源压缩率极高。
• modern 构建：给现代浏览器发 ES2017+（更小），老浏览器走兜底（@vitejs/plugin-legacy）。

2. 预加载关键资源#

1
<link rel="preload" href="critical.css" as="style" />
2
<link rel="prefetch" href="next-page.js" as="script" />

• preload：当前页马上要用的资源，提前拿（如首屏大图、关键字体）。
• prefetch：下一页可能要用的，空闲时预取。
• 用错（preload 了用不到的）反而拖慢，按需使用。

3. 图片优化（最大头的常客）#

• 现代格式：webp/avif 比 jpg/png 小 30–50%。
• 响应式：<img srcset> 按屏给不同分辨率，移动端不下载桌面大图。
• 懒加载：<img loading="lazy"> 滚到视口才加载，省首屏带宽。
• 给尺寸：width/height 预留空间防止 CLS 抖动（见指标篇）。

4. 字体与第三方脚本#

• 字体：font-display: swap 先显示回退字体再替换，避免”看不见文字”；子集化只打包用到的字。
• 第三方脚本（统计/广告）：用 async/defer 不阻塞解析；能延迟/按需就别首屏加载，它们常是性能刺客。

小结#

• 关键路径：更少（删代码）、更小（压缩）、更早（preload）、更聪明（lazy）。
• 图片是头号优化对象：现代格式 + 响应式 + 懒加载 + 预留尺寸。
• 第三方脚本和字体要专门治理，别让它们堵首屏。

练习#

1. 给首屏一张大图换 webp 格式并加 loading="lazy"，对比传输体积。
2. 用 <link rel="preload"> 提前加载关键 CSS，观察 FCP 是否改善。
3. 审计你页面的第三方脚本，把非首屏的改成延迟加载。