网站加载慢,怎么一步一步找到真正的瓶颈

网站慢这个问题很多人上来就开始优化图片、上CDN,结果搞了半天速度没提升多少。原因是没找到真正的瓶颈——不同的慢,解法完全不一样。

先用工具量化问题

在动手之前,先跑一遍性能测试,把数据摆出来。

推荐工具:

  • Chrome DevTools(Network标签):最直接,看每个资源加载耗时、瀑布图、TTFB
  • PageSpeed Insights:谷歌出的,分析前端性能问题,给出具体建议
  • GTmetrix:能从多个地区测试,适合分析国际访问速度
  • WebPageTest:专业级别,能看到完整的加载瀑布图

重点关注几个指标:TTFB(首字节时间)、FCP(首次内容渲染)、LCP(最大内容渲染)。

TTFB超过500ms:问题在服务器端

TTFB是浏览器发出请求到收到第一个字节的时间。如果这个值很高,说明问题出在服务器,不是前端。

常见原因:

  • 数据库查询慢:最常见。WordPress网站可以安装Query Monitor插件,直接看每次页面加载执行了哪些SQL、分别耗时多少
  • 没有页面缓存:每次请求都动态生成页面,装个WP Super Cache或W3 Total Cache能显著改善
  • PHP版本低:PHP 8.x比7.x快很多,很多老虚拟主机还在跑PHP 7.2甚至更低
  • 服务器离用户太远:比如服务器在美国但用户在国内,光物理距离就决定了延迟下限

TTFB正常,但页面还是慢:问题在前端

这时候看Network瀑布图,找出耗时长的资源。

图片太大

用TinyPNG压缩,或者转成WebP格式。一张没压缩的2MB图片和压缩后的200KB,用户感受差别明显。另外图片要加loading="lazy",首屏以外的图片懒加载。

JS/CSS体积过大或阻塞渲染

看DevTools的Coverage标签,能看出每个JS/CSS文件实际使用了多少代码,红色部分是没用到的。重度用WordPress的注意插件加载的JS,很多插件每个页面都加载自己的脚本,堆多了就慢。

没有启用压缩和缓存

服务器配置gzip/brotli压缩,静态资源加Cache-Control头,这两个是基础操作,没开的话每次传输量和请求数都会白白浪费。

优先级建议

根据实际经验,改善效果从大到小排:

  1. 加页面缓存(改善TTFB)
  2. 图片压缩+懒加载
  3. 启用CDN(特别是用户分布范围广的情况)
  4. 减少插件/脚本数量
  5. 升级PHP版本
  6. 数据库查询优化(需要找具体慢查询)

按这个顺序来,大多数情况下前三步就能看到明显效果。