提速不需要玄学，90% 的慢站都死在同一批问题上：图片过大、字体阻塞、JS 太多、缓存没开。这份清单按“投入产出比”排序，做完前 5 步，大多数站 LCP 能进 2.5 秒。
每一步都附带验证方法，改完立刻能看到数字变化。
核心结论
- ✓最高 ROI：图片转 WebP/AVIF + 定宽高，单步常砍半 LCP
- ✓最被忽视：字体 display:swap + 预加载，消灭白屏闪烁
- ✓最持久：边缘缓存 + 静态资源长缓存，TTFB 直降
- ✓验证：改一步测一次，用同一网络和设备对比
1–3 步：图片三板斧
- ·格式：照片用 AVIF/WebP，图标用 SVG，告别 PNG 大图
- ·尺寸：按展示宽度输出多档 + srcset，不拿 2400px 图当缩略图
- ·懒加载：首屏外图片 loading=lazy，首屏图 preload
4–5 步：字体不挡路
- ·font-display:swap，先系统字体占位再换
- ·只加载用到的字重，中文站做子集化
- ·预加载主字体文件，避免关键链等待
@font-face {
font-family: "Brand";
src: url("/fonts/brand.woff2") format("woff2");
font-display: swap;
}6–8 步：JS/CSS 瘦身
- ·拆包：路由级 code split，首屏只留关键 JS
- ·去重：检查重复的日期库/图表库/埋点 SDK
- ·第三方延迟：统计、客服、广告全部 defer/async
9–10 步：缓存与边缘
- ·静态资源 hash 命名 + 一年长缓存
- ·HTML 走边缘缓存，登录态页面 bypass
- ·开 Tiered Cache，源站压力和 TTFB 一起降
WebTagr 实测参考
同一套打法下，WebTagr 首页 LCP 0.9 秒：首屏无大图、字体 swap、静态资源全命中边缘缓存。把你的网址粘进分析器，对照逐项修即可。
上线前检查清单
- 01首屏图片是否 WebP/AVIF + 定宽高
- 02字体是否有 swap + 预加载
- 03首屏 JS 是否 < 150KB
- 04静态资源是否长缓存 + hash
- 05边缘缓存 HIT 率是否 > 90%
常见问题
LCP/INP/CLS 先修哪个？
先 LCP（用户第一眼），再 CLS（防跳动），最后 INP（交互优化）。
分数和体感不一致？
实验室分数看的是模拟环境，以真机 + 同一 WiFi 的多次实测为准。
CDN 一定要上吗？
用户跨地区就一定要。单地区小站先做好压缩和缓存，CDN 是下一步。