网站变慢，第一反应常常是"该换服务器了"。但多数情况下，问题出在前端：一张没压缩的封面图、一个不必要的外部脚本、一段阻塞渲染的 JS。按顺序排查，往往不用改架构就能有肉眼可见的提升。
一、先量化：三个常用指标
- 资源体积：首屏需要下载多少字节（关注 gzip / brotli 压缩后的传输量）
- 请求数：首次访问发起了多少个请求，其中有多少指向外部域名
- 首屏可用时间：用户看到主要内容的耗时，而不是页面完全加载完成的时间
浏览器开发者工具的"网络"面板就能看全这三项。先量再改，否则容易把时间花在不是瓶颈的地方。
二、按顺序排查：从收益最高的开始
- 图片：是否有未压缩的大图、能否用 WebP/AVIF、能否按显示尺寸出图、能否加懒加载
- 外部请求：字体、统计、客服、地图等第三方脚本，是否都必要，是否都阻塞首屏
- 阻塞脚本：`script` 是否加了 defer / async；关键 CSS 能否内联
- 字体：自定义字体文件体积、是否使用系统字体、是否设置 font-display
- 缓存与压缩：静态资源是否带长期缓存头、服务端是否开启压缩
图片与外部请求，通常占七成以上
很多网站做完这两项，加载时间就能砍掉一半。不需要重构，也不需要升级服务器。
三、常见问题与处理成本
| 问题 | 典型症状 | 处理成本 |
|---|---|---|
| 首页大图未压缩 | 首屏 2MB 以上 | 低，改图即可 |
| 外链字体 / 图标库 | 每次访问都有跨域请求 | 低，改本地或改系统字体 |
| 统计与客服脚本过多 | 请求数 50+ | 中，需取舍 |
| 未配置缓存 | 重复访问仍全量下载 | 低，改服务器头 |
| 首屏数据靠接口串行加载 | 白屏时间长 | 高，需改前端逻辑 |
四、一个现实样例：零依赖静态站
都图官网本身就是一个极端的对照：LOGO 与全部图标使用内联 SVG，视觉元素用 CSS 渐变与网格绘制，字体使用系统字体，全站零图片、零外部依赖。结果是单页访问只有四个请求、gzip 后十余 KB，首屏几乎瞬间呈现。
当然，不是所有网站都能做到这一步——需要商品图、需要视频的站点有它的必要条件。但这个样例说明一件事：很多站点之所以慢，是因为默认接受了许多"其实可以不要"的东西。
五、验收与持续监测
- 优化前后各测一次，记录传输体积、请求数与首屏时间
- 把指标写进验收标准，例如"首屏主要内容 2 秒内可见"
- 上线后定期复测，避免新加的功能把优化成果吃掉
性能不是一次性任务。每次新增功能时问一句"它带来多少请求、多少体积"，就能长期守住这条线。
#网站性能#前端优化#HTTP 缓存#软件事业部
