接到一个老站，首屏 4.2s。优化后 0.8s。手段：
1. **图片**：JPG→WebP，懒加载，占位图 LQIP，省 60%
2. **JS**：删 80% 未用代码，tree shaking + code split，省 70%
3. **CSS**：critical CSS 内联，其余 async 加载
4. **字体**：font-display: swap + preload
5. **缓存**：静态资源 30 天 Cache-Control，HTML no-cache
6. **Gzip**：mod_deflate，文本类压缩 70%
7. **CDN**：图片走 CDN，主站走源站
8. **预连接**：preconnect 第三方域名
核心就一句话：**先测后优**。Lighthouse 跑一遍看哪个指标最差就先改哪个，别瞎优化。
関連おすすめ
雪山之巅的日出延时摄影
一分钟看懂算法可视化
开源硬件小车的第一次试跑
小白求助：阿里云轻量服务器 2 核 2G 跑得动这个社区么？
前端小白问：Vue 和 React 选哪个入门更好？
独立站工具箱：我用的 20 个免费/低价工具
Web 性能优化实战：把首屏从 4.2s 降到 0.8s 的 8 个手段
科技达人 スター Lv.5
2026-09-07 · 閲覧 1713
接到一个老站，首屏 4.2s。优化后 0.8s。手段：
1. **图片**：JPG→WebP，懒加载，占位图 LQIP，省 60%
2. **JS**：删 80% 未用代码，tree shaking + code split，省 70%
3. **CSS**：critical CSS 内联，其余 async 加载
4. **字体**：font-display: swap + preload
5. **缓存**：静态资源 30 天 Cache-Control，HTML no-cache
6. **Gzip**：mod_deflate，文本类压缩 70%
7. **CDN**：图片走 CDN，主站走源站
8. **预连接**：preconnect 第三方域名
核心就一句话：**先测后优**。Lighthouse 跑一遍看哪个指标最差就先改哪个，别瞎优化。
1. **图片**：JPG→WebP，懒加载，占位图 LQIP，省 60%
2. **JS**：删 80% 未用代码，tree shaking + code split，省 70%
3. **CSS**：critical CSS 内联，其余 async 加载
4. **字体**：font-display: swap + preload
5. **缓存**：静态资源 30 天 Cache-Control，HTML no-cache
6. **Gzip**：mod_deflate，文本类压缩 70%
7. **CDN**：图片走 CDN，主站走源站
8. **预连接**：preconnect 第三方域名
核心就一句话：**先测后优**。Lighthouse 跑一遍看哪个指标最差就先改哪个，别瞎优化。
コメント (4)
ログイン to comment
蔡明41
2026-08-28
补充一点个人经验...
程序员老王
2026-09-07
Critical CSS 这招绝了，我之前不知道，试了下首屏直接降 1.2s。
UFO研究者
2026-09-07
preconnect 也好用，我加了一个 Google Fonts 的 preconnect，字体加载快了 200ms。
梁宇62
28 日前
请问有没有推荐的书籍？
科技达人
Lv.5 スター · 1,280 pts
31
投稿
7
フォロワー
コメント (4)