上个月帮一个做家居外贸的朋友优化网站速度。他的站用了 Elementor 搭的，插件装了 32 个，首页加载要 8.7 秒。GTmetrix 评级：F。
下面是我从头到尾的实操记录，每一步都有前后对比数据。如果你用 WordPress 建站，照着做就行。
第一步：测基准数据（知道有多烂才能知道怎么改）
用两个工具测速度，各有用处：
| 工具 | 用途 | 关注指标 |
|---|---|---|
| GTmetrix | 速度评分+瀑布图 | Performance Score, LCP, TBT |
| PageSpeed Insights | Google 官方评分 | 核心网页指标（LCP/FID/CLS） |
优化前数据（本次案例）：
| 指标 | 数值 | 评级 |
|---|---|---|
| GTmetrix Performance | 22% | F |
| LCP（最大内容绘制） | 8.7秒 | 差 |
| TBT（总阻塞时间） | 1.8秒 | 差 |
| 页面大小 | 6.4MB | 过大 |
问题很明确：太大、太慢。
第二步：缓存优化（性价比最高的一步）
安装缓存插件
我选了 WP Rocket（$59/年/1站）。免费替代可以用 W3 Total Cache 或 LiteSpeed Cache（如果你用 LiteSpeed 服务器）。
配置要点：
– 开启页面缓存（Page Cache）
– 开启浏览器缓存（Browser Cache）
– 开启 Gzip 压缩
– 不要一开始就开 CSS/JS 合并（容易导致页面错乱）
优化后
| 指标 | 优化前 | 优化后 | 提升 |
|---|---|---|---|
| LCP | 8.7秒 | 2.1秒 | 75%↓ |
| 页面大小 | 6.4MB | 6.4MB | 不变 |
| GTmetrix | 22% (F) | 45% (E) | +23% |
缓存是速度优化的第一步，效果立竿见影。LCP 从 8.7s 降到 2.1s，但页面大小没变，说明还有空间。
第三步：图片优化（最容易被忽略的大头）
打开 GTmetrix 的 Waterfall 查看，发现首页有 3 张 PNG 图每张超过 500KB。产品页的图片更是夸张——20 张产品图总共 28MB。
做了什么
- 格式转换： PNG → WebP（体积减少 60-80%）
- 压缩： 安装 ShortPixel 或 Smush 插件，自动压缩所有图片
- 延迟加载： 开启 Lazy Load，不首屏显示的图片延迟加载
- 调整尺寸： 产品详情图统一 800px 宽，缩略图 300px 宽
优化后
| 指标 | 优化前 | 优化后 | 提升 |
|---|---|---|---|
| 页面大小 | 6.4MB | 1.9MB | 70%↓ |
| GTmetrix | 45% (E) | 72% (C) | +27% |
图片优化后，页面从 6.4MB 降到 1.9MB，缩减 70%。GTmetrix 评分从 E 跳到 C。
第四步：CSS/JS 精简
Elementor 这类页面构建器会加载大量 CSS 和 JS 文件。页面上有 47 个 CSS 请求和 38 个 JS 请求。
做了什么
- 删除未使用的 CSS： WP Rocket 开启 “Remove Unused CSS”，它自动分析每页用了哪些样式，只加载需要的
- 合并文件： 开启 CSS Minify 和 JS Minify + Combine
- 延迟加载 JS： 把非关键的 JS（Google Analytics、Facebook Pixel 等）设置为延迟加载
- 禁用不必要的 Elementor 功能： Elementor → 设置 → 实验，关闭不用的功能（如自定义字体、优化标记等）
关键操作
CSS/JS 合并最容易出问题的是 JS Combine。开启后一定要逐页检查，确认没有 JS 报错。我这次就因为 Elementor 的一个动画库跟 WP Rocket 的 JS 合并冲突，折腾了半小时才排除。
优化后
| 指标 | 优化前 | 优化后 | 提升 |
|---|---|---|---|
| 请求数 | 129 | 41 | 68%↓ |
| LCP | 2.1秒 | 1.3秒 | 38%↓ |
| GTmetrix | 72% (C) | 85% (B) | +13% |
第五步：CDN 加速
图片和静态文件放在 CDN 上，全球用户访问速度都会提升。
方案选择
| CDN | 价格 | 适合谁 |
|---|---|---|
| Cloudflare（免费版） | 免费 | 所有人，推荐首选 |
| BunnyCDN | $0.01/GB起 | 流量较大的站 |
| KeyCDN | $0.04/GB | 外贸站需要全球加速 |
我用 Cloudflare 免费版。注册后改 DNS 到 Cloudflare，开启以下功能：
– Auto Minify： 自动压缩 HTML/CSS/JS
– Brotli 压缩： 比 Gzip 压缩率更高
– Rocket Loader： 优化 JS 加载顺序（这个功能可能跟某些插件冲突，测一下再决定开不开）
优化后
| 指标 | 优化前 | 优化后 | 提升 |
|---|---|---|---|
| TBT | 650ms | 180ms | 72%↓ |
| GTmetrix | 85% (B) | 91% (A) | +6% |
第六步：服务器优化（实在不行才动这一步）
前面几步做完，大多数站已经能达到 A 级。如果还不行，问题大概率在服务器。
检查清单
| 检查项 | 标准 | 不够怎么办 |
|---|---|---|
| PHP 版本 | ≥ 8.0 | 主机面板切换 |
| 服务器响应时间 | < 200ms | 换更好的主机方案 |
| 数据库查询 | < 50 条/页 | 用 Query Monitor 插件排查慢查询 |
| 主机类型 | 非共享主机 | 升级到 VPS 或云主机 |
这个案例用的是 SiteGround GrowBig 方案，PHP 8.1，服务器响应时间在 120ms 左右，服务器层面没大问题。
最终成绩单
| 指标 | 优化前 | 优化后 | 改善 |
|---|---|---|---|
| GTmetrix Score | 22% (F) | 91% (A) | +69% |
| PageSpeed 移动端 | 18 | 82 | +64% |
| LCP | 8.7秒 | 1.1秒 | 87%↓ |
| TBT | 1.8秒 | 180ms | 90%↓ |
| 页面大小 | 6.4MB | 1.2MB | 81%↓ |
从 F 到 A，总耗时约 4 小时。最大头的优化是缓存+图片，这两步贡献了约 70% 的改善。
建议的优化顺序（省钱版）
预算有限？按这个优先级来：
- 免费 CDN（Cloudflare）——0 元，效果明显
- 图片压缩（Smush 免费版）——0 元
- 缓存（W3 Total Cache 免费版）——0 元
- WP Rocket——$59，值得花
- 升级主机——最后再考虑
需要帮忙？私信我。
把你的网站 GTmetrix 报告链接发给我，免费帮你看优化方向。