13 · 静态资源与前端加载优化
从构建产物、压缩、Early Hints、图片与浏览器瀑布图优化前端，不把所有性能问题误归因于缓存。
编辑与核验：橙宝书编辑团队 ·
完成结果
JS/CSS/字体使用内容哈希和正确缓存头，可压缩文本按客户端能力传输，LCP 图片尺寸与格式合理，只有真正关键的资源进入 preload/Early Hints；浏览器瀑布图能说明收益来自哪里。
优化顺序比开关数量重要
| 层 | 先解决 | Cloudflare 能补充什么 |
|---|---|---|
| 构建 | 删除无用依赖、代码拆分、内容哈希 | CDN 长缓存不能缩小本来就过大的包 |
| HTML 发现 | 关键 CSS、字体与 LCP 图片优先级 | Early Hints 用 103 提前发送 preload/preconnect |
| 传输 | 文本压缩、协议复用 | Gzip/Brotli/Zstandard 与 HTTP/2/3 |
| 图片 | 正确尺寸、srcset/sizes、现代格式 | Polish 或 Images transformations |
| 运行时 | 降低主线程阻塞与第三方脚本 | 网络优化不能修复昂贵的 JavaScript 执行 |
先建立可发布的静态资源结构
/assets/app.9f1a.js 内容变化时换 URL，长缓存
/assets/site.6b2c.css 内容变化时换 URL，长缓存
/images/hero-1280.avif 按真实显示尺寸生成
/ HTML 可变，Browser TTL 保守指纹资源适合 public, max-age=31536000, immutable；HTML 仍应使用较短 Browser TTL，并在发布时精准刷新。不要通过 CDN 把一个未拆分的多 MB JavaScript 包“优化”为永久缓存后就停止治理。
验证内容压缩
Cloudflare 当前可向访客提供 Gzip、Brotli 或 Zstandard。实际结果由客户端的 Accept-Encoding、Zone 套餐默认和 Compression Rules 一起决定，不要仅看控制台开关猜测算法。
curl -sS -D - -o /dev/null \
-H 'Accept-Encoding: zstd, br, gzip' \
https://www.example.com/assets/app.9f1a.js检查 Content-Encoding、Content-Type、Vary 与传输字节。再分别请求不带压缩和带压缩版本对比大小；很小的响应、非受支持内容类型或非特定状态码不一定会被压缩。
no-transform 是完整性开关，不是免费优化
源站返回 Cache-Control: no-transform 会阻止 Cloudflare 改写压缩，并可保留源站 Content-Length，但也会阻止需要改变响应字节的优化。只在签名、Range、严格字节一致或长度语义确有要求时使用。
谨慎使用 Early Hints
Early Hints 在源站准备主响应期间，先发送包含 Link 的 103，让支持 HTTP/2 或 HTTP/3 的浏览器提前 preload/preconnect。它当前在所有套餐可用，但必须由页面响应提供值得提前加载的 Link。
Link: </assets/site.6b2c.css>; rel=preload; as=style
Link: </images/hero-1280.avif>; rel=preload; as=image从瀑布图选两三个关键资源
只选择阻塞首屏的 CSS、稳定字体或真实 LCP 图片。不要 preload 页面中的每张图和每个 chunk，否则抢占带宽并降低收益。
在源站输出正确 Link
确保 URL、as、跨域属性和最终响应一致。先在普通 200 响应头中验证，再在 Speed → Settings → Content Optimization 开启 Early Hints。
检查 103 与最终页面
在支持的浏览器或 WebPageTest 查看 Early Hints 和资源开始时间。Cloudflare 只在符合条件的 HTML URI 与 200/301/302 响应上生成；主响应到得很快时，可能没有必要发 103。
审计认证页面
Early Hints 的缓存键忽略查询字符串，并可能在最终 403 前发出缓存的 Link。不要让 Link 暴露私有文件名、一次性下载或用户资源；认证页面不确定时关闭该优化。
图片优化三选一
| 路线 | 适合 | 套餐/成本边界 |
|---|---|---|
构建时生成 AVIF/WebP + srcset | 静态站、图片集合可预知 | 最可控，无运行时变体费用 |
| Polish | 不改 URL，自动优化源站图片 | 当前 Pro / Business / Enterprise |
| Cloudflare Images transformations | 按 URL 动态裁剪、尺寸与 format=auto | Free 当前每月 5,000 unique transformations，超出后新变体返回 9422；付费版按量 |
不要让 CMS 有损压缩、Polish Lossy 和 Images transformations 重复处理同一图片。LCP 图片不要懒加载；非首屏图片可 lazy-load，并始终提供宽高或稳定 aspect-ratio，避免 CLS。
前后对比清单
- 固定同一 URL、Region、设备与网络条件，至少运行三次冷/热样本。
- 保存 HTML、JS、CSS、字体和 LCP 图片的传输大小、开始时间、协议、缓存状态。
- 检查 LCP、INP、CLS，而不是只看 Lighthouse 总分。
- 逐项开启 Compression Rule、Early Hints 或图片变体；每次只改变一个假设。
- 若收益不明显或错误率上升，回滚该项，不要同时关闭 HTTP/3、缓存和 TLS。
如果主要慢在无法缓存的请求，继续学习 动态内容与 Argo Smart Routing。
官方来源
这篇内容帮你完成目标了吗？
内测反馈只在当前浏览器生成，不会自动上传。