Web 性能基础：从首屏到缓存策略
网站性能不是“最后再优化一下”的附加项。第一次建站时，你做的很多默认选择都会直接决定它快不快。
建站时性能主要受什么影响
最常见的几类因素是：
- HTML、CSS、JavaScript 体积
- 图片和字体大小
- 请求数量
- 缓存是否生效
- 是否走 CDN
- 源站响应速度
- 是否把大量逻辑堆到了首屏
先抓最重要的几件事
1. 资源别太大
第一次建站最常见的慢，不是高级性能问题，而是：
- 图片太大
- 首屏脚本太重
- 同时加载太多第三方资源
2. 缓存要分层设计
至少区分：
- HTML
- 带哈希的静态资源
- 图片和下载文件
- API
3. 能走 CDN 的静态资源尽量走 CDN
这样会让重复访问和跨地区访问更稳。
最值得优先做的性能动作
压缩和格式优化
- 图片转成适合网页的尺寸和格式
- 文本资源启用压缩
- 删掉明显没必要的第三方脚本
资源拆分与延迟加载
- 首屏只加载首屏真正需要的内容
- 长页面图片可以按需加载
- 不要让一个简单内容页背上超重脚本包袱
正确缓存
- 带版本号的静态资源尽量长缓存
- HTML 页面缓存谨慎一点
- 频繁变化的数据不要错误长缓存
为什么性能优化和架构选择有关
因为：
- 静态站天然更容易缓存
- CDN 更擅长处理可复用内容
- 边缘层越能命中，源站压力越小
- 资源组织越清楚，越容易优化
第一次建站最常见的性能坑
1. 首页图片直接上传原图
这是最典型也最容易解决的问题。
2. 首页引入太多第三方组件
地图、统计、评论、 字体、动画脚本加起来，很容易把一个简单页面拖慢。
3. 缓存没有策略
要么全部不缓存，要么全部长缓存，最后都容易出问题。
4. 只盯 Lighthouse 分数，不理解真实瓶颈
分数是参考，不是目标本身。你更该先确认：
- 首屏是不是明显慢
- 图片是不是过大
- 请求是不是太多
- 缓存是不是根本没生效
一个实用的优化顺序
- 先减资源体积
- 再减不必要请求
- 再做好缓存和 CDN
- 最后再看更细的渲染和脚本优化