一个典型的传统企业官网，首页大小 6-8MB，其中图片占 80%。打开要五秒，手机上更慢。老板以为是服务器不行，其实换十次服务器也没用。
速度优化的核心是"减重"，不是"加配置"。下面五个动作，做完通常能压到 1.5MB 以内。
动作一：图片换格式 + 按尺寸输出
一张 3000px 宽的相机原图，压缩成 JPEG 也有 2MB；转成 WebP 并按显示尺寸输出，只要 120KB。
| 处理 | 体积 |
|---|---|
| 原图 3000px JPEG | 2.1 MB |
| 压缩后 1600px JPEG | 380 KB |
| 1600px WebP | 190 KB |
| 800px WebP（移动端） | 78 KB |
四个版本差 27 倍。多数站的图片从来没做过这一步。
动作二：字体子集化
中文字体动辄 5-10MB。如果整站引入一款网络字体，首屏会被它拖死。
三个方案，按优先级：
- 正文用系统字体，零成本。
- 标题用网络字体，但做子集化（只保留页面用到的字），通常能压到 100KB 以内。
- 用
font-display: swap，让文字先显示，字体后加载。
动作三：砍第三方脚本
统计、客服、地图、视频、广告，每一个都是额外的请求和 JS 执行。打开首页数一下，超过五个就要做减法。
- 客服系统改成点击后再加载。
- 地图改成静态图 + 点击跳转。
- 视频改成点击播放，不要自动加载。
- 统计代码用异步，放 body 末尾。
动作四：首屏优先级
浏览器不知道哪些资源重要，你要告诉它。
首屏图不要懒加载，其余图片全部懒加载。这一条做对，LCP 通常能降 1 秒以上。
动作五：缓存与 CDN
静态资源设长缓存，HTML 设短缓存。带指纹的文件名（style.a1b2c3.css）可以缓存一年。
CDN 负责把资源推到离用户近的节点。配置要点见CDN 加速配置。
优化前后的对比
下面是一个真实项目的数字（同服务器，只做前端优化）：
| 指标 | 优化前 | 优化后 |
|---|---|---|
| 首页大小 | 7.4 MB | 1.2 MB |
| 首屏时间（4G） | 5.8 s | 1.9 s |
| 移动端评分 | 32 | 86 |
| 跳出率 | 71% | 49% |
服务器没换，配置没加，只做了上面五件事。
三个常见误区
- 以为压缩图片会变模糊。WebP 在同样观感下体积小一半，不是靠降质换来的。
- 以为加带宽能解决。带宽解决的是并发，不是单页体积。
- 以为优化一次就够。每次上新图、新插件，体积都会反弹。建议每季度复查一次。
优化前后的验收方法
用手机 4G 网络（不是公司 WiFi）打开首页，记录首屏出现时间；再用 PageSpeed Insights 跑一次移动端，记录三个核心指标。两组数据前后各测一次，才算验证。
只看桌面端分数是自欺欺人——你的客户大多在手机上。
先减图片，再谈服务器
首屏图压到 200KB 以内，优先 WebP；字体做子集，非必要不加载第三套字重；脚本延迟加载。做完这三步，再考虑升级服务器。
用手机 4G 测，不要用公司 WiFi。桌面端分数好看不代表客户打开快，你的客户大多在手机上。
字体只加载用到的字重，首屏图不要超过 200KB。把这两项做好，速度通常能提升一半。
常见问题
优化到什么程度算合格
移动端首屏 2.5 秒内，首页体积 1.5MB 内，请求数 60 个内。达到这三个，体验已经不错。
要不要上 AMP
不需要。AMP 在国内生态里价值有限，正常优化就够。
图片压缩用什么工具
Squoosh（在线）、ImageOptim（本地）、或者 CMS 插件自动处理。批量的话用 Sharp 写个脚本。
速度只是体验的一部分，排版同样影响阅读。见网页字体排版指南。
