WordPress 速度优化
先把 LCP 拉进 2.5 秒,再谈别的
后台点一下要转三秒、手机端首屏图片半天不出来、Google 的 Core Web Vitals 报告里一整片橙红色——很多人第一反应是装个缓存插件,结果只是把 HTML 缓存了,慢的根源还在。这一页讲的是可测量的做法:三个核心指标各自的阈值与对应手段、缓存方案怎么选、前端资源和服务器各自该动哪里,以及改完之后怎么确认没有把询盘表单和购物车弄坏。
Core Web Vitals 只看三个数
每个数都有对应的病根
Google 的判定标准是 75 分位用户的实际体验,不是你在自己电脑上跑出来的实验室分数。三项指标分别对应加载、响应、稳定,优化手段互不通用的。
最大内容绘制 ≤ 2.5 秒
通常是首屏大图或 h1 所在区块。超过 4 秒判为差。常见病根:首屏图被加了 loading="lazy"、用 CSS background-image 导致浏览器发现晚、图片是 3000px 原图、TTFB 就要 1.5 秒。
- 首屏图改 img 标签并加 fetchpriority=”high”
- preload 关键图与首屏字体,其余图照常懒加载
- 先压 TTFB,再谈图片,顺序反了收益很小
交互到下次绘制 ≤ 200ms
替代了原来的 FID,衡量的是点击、输入之后界面多久有反应。超过 500ms 判为差。病根多是主线程长任务:页面构建器生成的 DOM 过深、第三方客服与统计脚本同步加载、大范围 jQuery 事件绑定。
- 第三方脚本改为交互后再加载或 facade 占位
- 拆掉首屏用不到的轮播与动画库
- 用 Performance 面板找超过 50ms 的长任务
布局偏移 ≤ 0.1
图片没写宽高、广告位和 cookie 横幅后插入、字体切换导致行高跳动,都会让已经准备点击的按钮突然挪位。超过 0.25 判为差。
- 所有 img 写 width/height 或 aspect-ratio
- 横幅与嵌入视频预留固定高度
- 字体用 font-display: swap 并匹配回退字体度量
测量上建议两套数据一起看:PageSpeed Insights 的实验室数据用来定位具体元素,Search Console 的 Core Web Vitals 报告(基于 CrUX 的 28 天滚动真实用户数据)用来判断是否真的改善。改完当天看不到变化是正常的,样本窗口还没滚动过去。
缓存插件不是越贵越好
要看你的服务器是什么
LiteSpeed Cache 和 WP Rocket 经常被放在一起比较,但它们解决的不是同一层的问题。选错的结果是装了两个插件互相清缓存,页面反而更慢。
| 对比项 | LiteSpeed Cache | WP Rocket | Nginx FastCGI Cache |
|---|---|---|---|
| 生效前提 | 服务器为 LiteSpeed 或 OpenLiteSpeed,或装有 LSCache 模块 | 任意环境,纯插件层实现 | 自有服务器或 VPS,需改 Nginx 配置 |
| 缓存粒度 | 服务器级,支持 ESI 局部缓存、按设备与语言分版本 | 页面级 HTML 落盘,规则靠插件配置 | 整页 HTML,规则写在 Nginx,灵活但需手工维护 |
| 典型优势 | 免费、TTFB 低,与 QUIC.cloud CDN 联动 | Delay JS、移除未使用 CSS、预加载 sitemap 等前端功能完整 | 性能上限最高,不占 PHP 进程 |
| 常见坑 | 换到 Apache 主机后功能直接失效 | 与主机自带对象缓存、安全插件规则冲突 | 必须手动排除 cart、checkout、my-account,否则购物车串号 |
| 适合谁 | 主机已是 LiteSpeed 的企业站与商城 | 主机环境不确定、需要一套配置走天下 | 有运维能力、日 IP 较高的站点 |
一个实际建议:如果主机支持 LiteSpeed,优先用它自带的缓存,前端优化再补一个轻量插件,避免两层页面缓存叠加;如果是 WooCommerce,购物车、结算、我的账户三个路径必须排除缓存,登录用户的缓存版本也要单独处理,否则会出现”A 客户看到 B 客户购物车”这类事故。更多插件层面的取舍可以看WordPress 缓存加速插件这篇。
前端资源要按预算砍
不是把所有东西都合并
很多站点打开有 120 个请求、3MB 资源,其中一半是页面构建器按页生成的 CSS 和没被用到的图标字体。目标不是”全部合并成一个文件”,而是让首屏只加载首屏需要的。
字体
Google Fonts 在国内和部分海外机房访问不稳定,且会阻塞渲染。做法是下载 woff2 本地托管,用子集化工具只保留拉丁与常用符号,一个字体家族控制在 2 到 3 个字重,首屏字重 preload,其余用 font-display: swap 异步加载。
CSS
Elementor、Divi 会为每个页面输出独立的 post-{id}.css,页面一多就是几十个小文件。不要盲目合并,合并后单页会加载全站样式。更稳的做法是生成关键 CSS 内联、其余延迟,或按模板按需 enqueue。
JavaScript
Delay JS 能把首屏用不到的脚本推迟到用户交互后执行,但要排除轮播、菜单、表单校验这些首屏就要用的。GTM 里挂的统计、热图、客服工具建议统一走一个容器,并用 consent 逻辑控制加载时机。
图片与视频
上传前压到实际展示尺寸的 2 倍以内,输出 WebP 或 AVIF,用 srcset 让手机取小图。产品页的 360 度展示和首页背景视频是 LCP 杀手,通常建议改成静态首帧加点击播放。
TTFB 降不下来
问题多半不在主题
页面缓存能盖住一部分问题,但登录用户、购物车、表单提交这些动态请求是绕不过 PHP 和数据库的。外贸站尤其明显:服务器在境内、客户在欧洲,光网络往返就要几百毫秒。
PHP 与 OPcache
PHP 8.1 以上比 7.4 普遍快 20% 左右,但老插件可能有弃用警告,需要先在测试站跑一遍。OPcache 内存建议 128M 起,生产环境可关闭 validate_timestamps 减少文件检查,代价是每次部署必须 reload PHP。
对象缓存
Redis 或 Memcached 能把 options、查询结果、transient 放进内存。WooCommerce 站点收益明显,但要确认缓存组隔离,多站点环境还需给每个站点分配独立前缀,否则会串数据。
数据库瘦身
重点看 wp_options 的 autoload 总量,超过 1MB 意味着每个请求都要加载这一坨。常见来源是页面构建器缓存、过期 transient、旧插件残留。修订版本和垃圾评论也要限制,但不要在业务高峰对大表做 OPTIMIZE。
网络与协议
开启 HTTP/2 或 HTTP/3、Brotli 压缩、静态资源长缓存。外贸站建议源站放在目标市场或接入 CDN 回源,把跨洲往返从 300ms 压到几十毫秒,这一步对 LCP 的贡献往往比调图片更大。
优化要按顺序做
否则改了也不知道哪步有用
建基线
记录首页、分类页、产品页、文章页四类模板的 LCP、TTFB、请求数与页面体积,截图存档。没有基线,后面的”感觉快了”没有意义。
先服务器后前端
先解决 TTFB 与缓存命中率,再动图片和 JS。反过来做,等于在一条还在堵车的路上换轮胎。
逐项上线并回归
每改一项测一次:询盘表单能否提交、购物车能否加购、支付能否跳转、多语言切换是否正常。缓存与延迟加载是最容易压坏功能的两类改动。
持续监控
接入真实用户监测,按周看 CrUX 的 75 分位变化。新装一个插件、换一张首屏图都可能让指标回退,速度优化不是一次性交付。
关于 WordPress 速度优化,问得最多的六个问题
缓存通常只对未登录的匿名访客生效,后台、购物车、结算这些动态页面走的是实时 PHP 与数据库。另外缓存命中率低(比如 cookie 设置过严、缓存被频繁清空)时,插件等于没装。需要先看响应头里的缓存命中标记,再判断问题在哪一层。
CrUX 用的是 28 天滚动窗口,改完通常要两到四周才逐步反映,期间出现波动是正常的。实验室工具(PageSpeed Insights 的首次分析)会立刻变化,但那只代表单次环境,不等于真实用户体验。
速度是页面体验的一部分,不是排名的决定性因素。我们能做的是把 LCP、INP、CLS 做到达标区间,减少因体验问题导致的流量损失,不会承诺具体排名或流量数字。
先看服务器。已经是 LiteSpeed 就用自带的,免费且是服务器级缓存;如果是 Apache 或普通 Nginx,WP Rocket 这类通用方案更省事。两个同时开没有意义,还会互相清缓存。预算有限时,把钱花在主机和 CDN 上的收益通常更直接。
只要不随意加插件、换主题、堆第三方脚本,配置可以长期有效。但插件更新常带来新的阻塞资源,建议纳入托管维护,每月复测一次;改版前后也要重跑基线,这也是网站改版升级时容易被忽略的一步。安全层面的加固可以配合WordPress 安全加固一起做。
先测一遍,再决定改哪里
不要凭感觉换主题
把网址发给我们,出一份包含 TTFB、LCP 元素定位、请求清单与插件负载的体检报告,标明哪几项值得改、预计影响哪类页面。需要投放落地页的,还可以参考谷歌广告落地页的加载要求单独处理。
电话/微信 13280692153 邮箱 web@wordpressx.com 地址 山东省淄博市张店区电子产业创新园 B 座