适用场景

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

配置步骤（首屏与交互指标优化）

# 1) 命令行快速体检
curl -sS -o /dev/null -w 'dns=%{time_namelookup} conn=%{time_connect} ttfb=%{time_starttransfer} total=%{time_total} size=%{size_download}\n' https://example.com/

# 2) 资源体积 Top10（按大小排序）
# 浏览器开发者工具 Network -> 按 Size 排序

# 3) 常见优化动作
#  - CSS/JS 压缩并加版本号
#  - 首屏关键 CSS 内联，其余异步加载
#  - 图片按尺寸输出 WebP，首屏图 preload
#  - 减少第三方脚本（统计、客服、字体）

# 4) 服务端
#  - PHP opcache 开启并检查命中率
#  - 首页慢查询加索引或做页面缓存

关键参数与建议

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

容易踩的坑

  • 首页塞了 10 个第三方脚本，慢在主因不在服务器
  • 图片原图直出（几 MB 一张），首屏等图
  • CSS/JS 没压缩也没版本号，缓存失效
  • 字体文件从外部 CDN 拉，国内访问超时
  • 只在办公室测速，实际用户是 4G 移动网络
  • 优化完没记录，下次上线又回去了

验证与巡检

# 关键指标实测
curl -sS -o /dev/null -w 'ttfb=%{time_starttransfer} total=%{time_total}\n' https://example.com/
# 静态资源缓存头
curl -sSI https://example.com/assets/css/style.css | grep -i -E 'cache-control|expires|etag'
# 压缩
curl -sSI -H 'Accept-Encoding: gzip, br' https://example.com/ | grep -i content-encoding
  • 巡检：TTFB < 500ms、静态资源长缓存 + 版本号、gzip/br 生效、无超大图片

小结

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

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