去年年底，一个做独立博客的朋友在微信上发来三个字：”救命啊。”
我说怎么了。
他说：”你打开我网站看看。”
我打开——页面是白的。白了两秒，导航栏出来了。又过了两秒，文章标题出来了。再过了两秒，正文第一段出现了。然后是一张图片，从上到下，一行一行地刷出来，像上世纪 90 年代的拨号上网。
我看了一下 Chrome 开发者工具里的加载时间：8.7 秒。
我说：”你这网站，用户打开之后去泡杯茶，回来刚好能看到第一段。”
他说：”别笑我了，帮我看看怎么回事。”
于是那天下午，我花了两个小时，把他这个加载 8.7 秒的网站，抢救到了 1.4 秒。
下面把整个过程还原出来。如果你也觉得自己网站慢，但不知道从哪下手，这篇能给你一个完整的排查思路。
先看是什么在拖后腿：浏览器开发者工具就够了
很多人排查网站速度，第一反应是去搜”网站测速工具”，然后打开十几个在线测速网站，每个给的结果都不一样，越看越懵。
其实不用那么复杂。Chrome 自带的开发者工具就够了。
打开你的网站，按 F12 → Network（网络）→ 刷新页面。你会看到一个列表，列出了这个页面加载的所有文件——HTML、CSS、JS、图片、字体。每个文件后面有大小和加载时间。
最下面有个总览：Load 时间。这个时间，就是用户从打开到看到完整页面所等待的时间。超过 3 秒，就有用户会关掉。超过 5 秒，大部分用户会关掉。超过 8 秒，基本上只有你自己在看了。
我那个朋友的网站，Load 时间是 8.7 秒。打开 Network 面板，一眼就看到了问题——
一张 4.2MB 的 PNG 图片，加载了 6.5 秒。
是首页 banner 图。他直接用相机原图上传的，4000×3000 像素，大小 4.2MB。但首页 banner 实际显示区域只有 800×400 像素。也就是说，用户下载了一张比实际需要大 20 倍的图片，然后浏览器再把它缩小到 800×400 显示。
这张图，占了整个页面加载时间的 75%。
图片瘦身：投入产出比最高的优化
图片是绝大多数慢网站的第一罪魁祸首。我见过太多网站，首页 banner 动辄 3-5MB，文章配图也是原图直传，一张 2MB 的截图配一段 200 字的文字——图片比文字”重”一千倍。
怎么修？三个步骤，从快到慢：
第一步：格式选对。 照片用 JPG，截图用 PNG，图标用 SVG。不要照片存成 PNG——同一张照片，PNG 体积可能是 JPG 的 5-10 倍。我那个朋友的 banner 图，从 PNG 转成 JPG，质量设 85%，体积从 4.2MB 直接掉到 380KB。肉眼完全看不出区别，但下载速度快了 10 倍。
第二步：尺寸别太大。 文章配图宽度控制在 1200px 以内就够了，不需要 4000px 的原图。截图在保存之前，先缩放到实际显示尺寸再保存。你截图的时候屏幕是 1920px 宽，截下来的图就是 1920px 宽，但文章内容区只有 800px——多出来的 1120px 全是浪费。
第三步：装个自动压缩插件。 上面的操作可以手动做，但每张图都手动压缩，太费时间。WordPress 装个 Smush 或 ShortPixel，上传图片时自动压缩。Smush 免费版够用，上传时自动压，已有图片也能批量压缩。装完之后，以后上传的每一张图都是压缩过的，你不用再操心。
有一个更彻底的办法吗？ 有。用 CDN 配合 WebP 格式。WebP 是 Google 推出的图片格式，同等画质下体积比 JPG 小 30% 左右。Cloudflare 的免费计划就支持自动转 WebP，开了就行。CDN 不只是加速图片，还能让全站静态资源就近分发——之前写过一篇免费网站部署平台对比，里面也提到了 CDN 的用法，可以配合着看。
缓存：让 80% 的访客不走”原路”
图片修完之后，他网站加载时间从 8.7 秒降到了 4.2 秒——好多了，但还是慢。
继续看 Network 面板，发现每个页面都在重新加载一些根本不需要重新加载的东西：CSS 文件、JS 文件、网站 logo。这些东西建站时设置好就再也没变过，但每次有用户访问，服务器都要重新生成一遍再发过去。
这就是缓存要解决的问题。
缓存分两层：浏览器缓存和服务器缓存。
浏览器缓存是告诉用户的浏览器：”这个文件没变过，你下次来的时候直接用本地存的，别重新下载了。”服务器缓存是告诉服务器：”这个页面没变过，有人来的时候直接发静态版本，别重新用 PHP 跑一遍数据库了。”
两层都配好，大部分访客看到的是”预生成”的静态页面，加载速度跟打开一个 txt 文件差不多。
WordPress 怎么配？ 装一个缓存插件。WP Fastest Cache 或 WP Super Cache，免费，装完点一下”开启缓存”就行。高级选项可以不管，默认配置已经能解决大部分问题。非 WordPress 的网站，如果用了 CDN，CDN 自带缓存功能，在 CDN 后台配置缓存规则就可以。
装了缓存之后，他的网站加载时间从 4.2 秒降到了 2.1 秒。
插件和主题：看不见的拖累
2.1 秒，对于一个个人博客来说已经算快了。但我看了下 Network 面板，发现还有几个文件加载时间特别长——都是来自第三方域名的请求。
点进去一看，他装了一个”天气预报”插件，一个”访问统计”插件，还有一个”在线客服”插件。三个插件，每打开一个页面，都要向插件开发商各自的服务器发一次请求。天气预报插件去拉天气数据，访问统计插件去上报数据，在线客服插件去拉聊天窗口的 JS 脚本。
这三个请求，每个耗时 300-500 毫秒。加起来多了一秒多。
我问他：”你网站真有那么多人需要在线客服吗？”
他说：”没有，就是觉得功能挺酷的。”
把这三个插件卸载之后，加载时间从 2.1 秒降到了 1.6 秒。
插件是怎么拖慢网站的？ 每个插件都是一份额外的代码。有些插件的代码写得规范，只在需要的时候加载，影响很小。但有些插件在每一个页面都加载自己的 CSS 和 JS，甚至对未登录的普通访客也加载后台管理功能。装之前你不知道它会不会拖慢网站，装完之后你也很难发现——因为拖慢不是某一个插件单独造成的，是十个插件各自拖慢 0.2 秒，堆在一起就成了 2 秒。
一个定期检查的习惯： 每隔两三个月，去后台插件列表里看一遍。问问自己：这个插件上次用到是什么时候？如果超过三个月没用过，删掉。插件不是”装得越多功能越强”，是”装得越少网站越快”。
服务器和 CDN：最后一公里
1.6 秒，已经很不错了。但还有优化空间。
他的服务器在香港，他自己在国内访问，物理距离不算远。但如果他的读者在北方，甚至海外，数据从香港机房传到用户电脑上，还是要经过好几道网络中转。
CDN 解决的就是这个问题。把网站的静态文件（图片、CSS、JS）缓存到全球各地的 CDN 节点上，用户访问时，从离他最近的节点取文件，不用每次都跑到源站服务器。
选什么 CDN？ 如果用 Cloudflare，免费计划就够。把域名的 DNS 解析托管到 Cloudflare，开启 CDN 代理（橙色云朵图标），设置里把缓存级别调到”Standard”，就完事了。国内用户访问的话，Cloudflare 在国内没有节点，速度提升有限。如果主要面向国内用户，可以考虑百度云加速或阿里云 CDN，有国内节点，但需要备案域名。如果你域名还没买或者 DNS 还没配置好，先看这篇域名选购完整指南，域名和 DNS 的坑提前避掉。
他挂了 Cloudflare 之后，国内用户访问速度从 1.6 秒变成 1.4 秒，变化不大。但海外用户访问速度从 4 秒降到了 1.2 秒——提了将近三倍。
服务器本身呢？ 他的服务器是 1 核 2G 的轻量云服务器，跑 WordPress 绰绰有余。如果你的服务器配置更低（比如 512MB 内存），或者用的是虚拟主机，可以考虑升级一下。但大多数情况下，网站慢不是服务器配置不够，是上面这些软件层面的问题。先把图片、缓存、插件、CDN 这四样优化了，再考虑升级服务器——不然升级了也是浪费。
两张图对比一下，整个过程的效果：
| 优化步骤 | 加载时间 | 减少了 |
|---|---|---|
| 开始（没有任何优化） | 8.7 秒 | — |
| 压缩图片 + 调尺寸 | 4.2 秒 | 4.5 秒 |
| 开启缓存 | 2.1 秒 | 2.1 秒 |
| 卸载多余插件 | 1.6 秒 | 0.5 秒 |
| 挂 CDN | 1.4 秒 | 0.2 秒 |
从 8.7 秒到 1.4 秒，一共花了两个小时。最大的收益来自最不起眼的操作——把一张 4.2MB 的 PNG 转成 JPG。
如果你网站也慢，不用全做。先打开 Network 面板，找出那个最大的文件，干掉它。很多时候，干掉一个文件，速度就提了一半。
原创文章，首发于 wujianzhan.com。