适用场景

站点速度影响两件事：跳出率与收录。优化顺序是「先测量、再压缩、后缓存」：不测量就优化，往往在改没用的地方。

配置步骤（缓存与图片治理）

# 1) 缓存策略（nginx 示例）
location ~* \.(css|js|svg|png|jpg|jpeg|webp|avif|woff2)$ {
    expires 30d;
    add_header Cache-Control 'public, immutable';
}
location = /index.php {
    add_header Cache-Control 'no-cache';
}

# 2) 版本号：资源引用带 hash 或 v=时间戳
# <link rel="stylesheet" href="/assets/css/style.css?v=1790401849">

# 3) 图片治理
#  - 按展示尺寸生成多档（列表 480/详情 1200）
#  - 转 WebP，保留原图备份
#  - 懒加载：loading="lazy"，首屏图不懒加载
#  - 体积目标：列表图 < 100KB，首屏主图 < 300KB

# 4) 检查图片体积分布
find /www/sites/tfor.cn/index/uploads -type f | head -5
ls -lS /www/sites/tfor.cn/index/uploads | head -10

关键参数与建议

  • 测量：用浏览器性能面板与线上监测看首屏、LCP、总请求数、资源体积
  • 资源压缩：CSS/JS 压缩合并（不要过度合并），开启 gzip/brotli
  • 缓存策略：静态资源长缓存 + 版本号（?v=），HTML 不缓存或短缓存
  • 图片：按展示尺寸裁切、WebP/AVIF、懒加载、首屏图优先加载
  • 接口：首页并发接口数量控制、慢接口加缓存、避免 N+1 查询
  • 服务器：PHP opcache 开启、数据库索引优化、页面级缓存
  • 字体与第三方脚本：第三方统计与字体是常见拖慢项，按需加载
  • 回归：每次上线后复测首屏，建立性能基线

容易踩的坑

  • 缓存设了 1 年但资源没有版本号，改版后用户看到旧样式
  • HTML 也长缓存，内容更新用户看不到
  • 图片不压缩，列表页加载几十 MB
  • 懒加载把首屏大图也懒加载，首屏反而更慢
  • 上传大图直接放原图，没做缩略图
  • 缓存头只在部分路径生效，实际未命中

验证与巡检

curl -sSI https://example.com/assets/css/style.css | grep -i -E 'cache-control|expires'
curl -sSI https://example.com/ | grep -i cache-control
ls -lS /www/sites/tfor.cn/index/uploads | head -5

# 目标：静态资源 max-age >= 30d；HTML 不缓存；最大图片 < 500KB
  • 巡检：缓存头符合策略、无超大图片、首屏图不懒加载、上线后复测通过

小结

性能优化验收：首屏在目标网络下达到设定指标，静态资源命中缓存，图片体积下降且清晰度可接受，且每次上线有性能回归记录。

> 说明：文中命令为通用写法，不同型号/版本可能略有差异，落地前请对照设备实际版本的官方文档；带外管理与安全设备变更建议先在测试设备验证。