WordPress网站速度优化指南:缓存、图片压缩和WebP、CDN按什么顺序做

蜗牛大人WordPress建站教程

WordPress网站慢,大多不是WordPress本身的问题,而是下面几处没做好:主机配置、没开缓存、图片太大、没用CDN、装了太多插件和第三方脚本。

三家常用主机各有一篇详细的加速教程,本文是它们的总纲:先把通用的优化顺序讲清楚,重点补上图片压缩和WebP,主机专属的设置按文末的链接去看。

第一步:先测速,别凭感觉优化

优化之前先测。用Google的PageSpeed Insights测首页和一个产品页,手机和电脑两个分数都看。注意不要用ping IP的方式判断快慢,原因见《怎么测试网站性能?别ping IP,用PageSpeed Insights》。

结果里最重要的是Google的三个核心网页指标,判断「好」的标准是:

指标衡量什么「好」的标准
LCP(最大内容绘制)页面主要内容多久显示出来2.5秒以内
INP(下次绘制的交互)点击后多久有反应200毫秒以内
CLS(累积布局偏移)加载过程中页面会不会跳动0.1以内

Google按访客的第75百分位来统计,手机和电脑分开看。

对多数WordPress企业站,LCP是最常不达标的,而拖累LCP的第一嫌疑几乎总是首屏那张大图。看报告里「诊断」部分列出的问题,从影响最大的一条开始处理,每改一项复测一次,这样才知道哪个设置真的有用。

优化的顺序

按「收益大、风险小」排:

  1. 主机和PHP版本:基础不行,后面都白搭;
  2. 缓存:对速度提升最明显,设置最简单;
  3. 图片:页面体积的大头;
  4. CDN:对海外访客分布广的网站有用;
  5. 精简插件、主题和第三方脚本;
  6. 数据库和后台:影响后台速度,对前台影响小。

一、主机、机房和PHP版本

  • 机房位置要靠近目标客户。做欧美生意,就别选在亚洲的机房,选购时一次选对,后面改要迁移;
  • PHP版本用主机支持的较新稳定版。新版本通常更快,但太老的插件可能不兼容,升级前先备份;
  • 套餐资源:流量大的网站,共享主机的CPU和内存可能不够,可以升级到托管云主机。几种主机的区别见《共享主机、托管云主机、VPS有什么区别?》。

各家切换PHP版本的位置见《Siteground怎么切换PHP版本》《Hostinger怎么切换PHP版本》。

二、缓存:每个网站都应该开

WordPress每次打开页面都要查数据库、运行PHP、拼出HTML,缓存就是把拼好的结果存起来,下次直接给访客,省掉这些工作。

分两种:

  • 页面缓存:存整页的HTML,效果最明显;
  • 对象缓存(Redis、Memcached):存数据库查询结果,对后台、动态页面、WooCommerce有帮助。

用主机自带的缓存方案,并且只装一个缓存插件,多个缓存插件同时开会互相冲突:

主机自带方案详细教程
HostingerLiteSpeed Cache(主机已经提供)《Hostinger的LiteSpeed Cache怎么启用和设置?》
SiteGroundSpeed Optimizer(SG Optimizer)《Siteground自带的网站加速神器:Speed Optimizer插件设置教程》
CloudwaysBreeze,另可配Redis《Cloudways网站怎么加速?》《Cloudways上能用WP Rocket吗?》

设置好缓存之后,改了内容前台不更新是最常见的疑问,原因和清缓存的顺序见《Hostinger网站提速:LiteSpeed Cache、CDN和Cache Manager怎么一起设置》,这个顺序在其他主机上也适用:先清缓存插件,再清服务器缓存,最后清CDN。

三、图片:多数网站最大的提速空间

外贸产品站的图片很多,一张手机拍的原图几MB,一个页面放十张,页面就上几十MB。图片优化往往是性价比最高的一步。

1. 先决定尺寸:别上传比显示大得多的图

网页上一张图最多显示到多宽,就上传多宽。一般的原则:

  • 产品图、文章配图:宽度1200到1600像素够用,单张尽量控制在200KB以内;
  • 首页全屏大图(Banner):宽度不超过1920到2000像素,注意手机上不需要这么大;
  • Logo、图标:用SVG或PNG,别用一张巨大的图缩小显示。

WordPress自己对太大的图也有保护:从5.3开始,上传的图片如果任一边超过2560像素,会被自动缩小到这个尺寸并作为最大尺寸使用。这条规则只是兜底,2560像素对多数网页依然太大,上传之前自己先缩。

2. 选对格式

格式适合备注
WebP照片、产品图、带透明的图同样画质下体积比JPG、PNG小很多,主流浏览器都支持,WordPress从5.8开始可以直接上传
AVIF照片体积更小,WordPress 6.5之后可以上传,但不是所有场景都稳妥,工具和插件的支持不如WebP,新手可以先不用
JPG照片的兜底格式兼容性最好
PNG需要透明背景、截图、带文字的图体积大,能用WebP就别用PNG
SVGLogo、图标、简单图形矢量,放大不模糊,体积极小

对大多数外贸网站,统一用WebP就行,不需要折腾AVIF。

3. 上传前压缩

最稳的办法是在上传之前处理好,有几种工具可选:

  • 在线工具,比如Squoosh(Google出品,可以对比压缩前后的画质),适合偶尔处理几张;
  • 电脑上的批量压缩工具,适合有一批产品图要处理;
  • 设计软件导出时直接选WebP,质量一般选75到85之间,肉眼基本看不出区别,可以先小范围试。

压缩的目标是在看不出画质下降的前提下,让体积最小,而不是越小越好。产品细节图要放大看的,质量可以高一点。

4. 已经上传的图片,怎么批量处理?

网站已经有几百张大图时,不可能一张张处理,这时候用插件:

  • 主机自带的缓存插件:LiteSpeed Cache有图片优化功能,可以把已有图片批量转换成WebP,SiteGround的Speed Optimizer也有图片压缩和WebP转换选项。这是首选,因为不需要再装新插件,缓存插件的介绍见上文;
  • 专门的图片优化插件:比如ShortPixel、Imagify、EWWW Image Optimizer、Smush这类。多数是免费额度加付费套餐,免费额度和价格经常变,选之前看官网。它们的优点是可以压缩已有的整个媒体库,并能保留原图以便还原。

使用时要注意:

  1. 同类功能只开一个。缓存插件已经开了WebP转换,就别再装图片插件做同样的事;
  2. 批量处理前先备份,备份方法见《WordPress网站怎么备份?》;
  3. 批量转换会占用服务器资源,在访问少的时候做,一次不要处理太多;
  4. 转换完之后到前台检查几个页面,确认图片都正常显示,没有变模糊,没有不显示。

5. 懒加载:开,但首屏大图除外

懒加载是让屏幕外的图片等用户滚动到的时候再加载。WordPress从5.5开始默认给图片加上懒加载,并且会跳过页面第一张图,因为那张图通常就是决定LCP的图。

要注意:

  • 首屏的大图不要懒加载,否则LCP会变差;
  • 有的主题或页面构建器自己的设置会把首屏图也懒加载了,如果PageSpeed提示「LCP图片被延迟加载」,就是这个原因;
  • 如果缓存插件也开了一遍懒加载,可能和WordPress本身重复,保留一处即可。

WordPress从6.3开始,也会给页面中的第一张大图自动加上fetchpriority="high",让浏览器优先加载它。但如果首屏图是在主题模板里,而不是在文章内容里,这个自动判断可能抓不到,需要主题或页面构建器自己的设置来处理。

6. 别忘了图片的宽高和Alt

  • 图片要有明确的宽高,否则加载过程中页面会跳动,影响CLS;
  • Alt文本不影响速度,但影响SEO和无障碍,写法见《图片Alt怎么写?》。

四、CDN:把静态文件放到离访客近的节点

如果你的客户分布在世界各地,而主机只在一个机房,远处的访客加载就会慢。CDN把图片、CSS、JS缓存在全球各地的节点,访客从最近的节点拿。

五、精简插件、主题和第三方脚本

  • 插件:每个插件都可能增加数据库查询和前端脚本。停用并删除不用的,同类功能只留一个,清单见《外贸网站必装的WordPress插件清单》;
  • 主题和页面构建器:轻量的主题(Astra、Kadence、Blocksy等)比功能繁多的多用途主题快,见《WordPress主题怎么选?》;
  • 第三方脚本:聊天窗口、各种统计代码、广告像素、社交媒体插件,每一个都会额外请求外部资源,往往是INP和LCP变差的原因。用不到的删掉,必须用的尽量延迟加载;
  • 字体:少用几种字重,能用系统字体就用系统字体,或者把用到的字体放到自己网站上。如果你在国内测试时觉得页面一直在等Google字体,那是国内访问Google的字体服务本身不稳定,海外客户通常不受影响,但换成本地字体对谁都更快。

六、数据库和后台(影响后台速度为主)

  • 定期清理文章修订版本、垃圾评论、过期的临时数据。Hostinger的做法见《Hostinger里如何做WordPress网站的性能优化?》第八步;
  • WordPress自己的计划任务(WP-Cron)在访问量小的站可能不准,在Cloudways可以用Cron Optimizer改成服务器定时任务,见《Cloudways后台卡、定时任务不准?》;
  • 后台慢和前台慢是两回事,前台有缓存,后台没有缓存,所以对象缓存、PHP版本、主机资源对后台影响更大。

常见误区

  1. 同时装几个缓存或优化插件:功能重叠,容易出现样式错乱、报错;
  2. 压缩过度:画质明显下降的产品图,对外贸客户反而是减分;
  3. 只看分数,不看实际:PageSpeed的分数每次测都会有波动,关注LCP、INP、CLS是否达标,以及真实访客的数据(报告顶部的「实际使用数据」);
  4. 只测首页:产品页、文章页往往更重,都要测;
  5. 改了设置没清缓存就复测,结果当然没变化;
  6. 一次改太多:出问题时找不出是哪项导致的,每次改一项,测一下。

常见问题

WebP会不会有浏览器打不开?

主流浏览器都已经支持WebP。如果担心极老的浏览器,可以用缓存插件的WebP功能,它会自动提供回退格式。

必须装图片压缩插件吗?

不必须。上传前自己压缩好,加上主机缓存插件自带的WebP转换,对多数网站已经够用。图片很多、需要批量处理已有媒体库的时候,再考虑专门的插件。

压缩后图片变模糊了怎么办?

把质量调高,或者用「保留原图」的方式处理,大图保留更高的质量。大多数图片插件都能从备份还原原图。

PageSpeed分数很低,一定要到90分以上吗?

不必追满分。目标是三个核心指标进入「好」的范围,网页在真实访客那里打开不慢。为了几分去关掉聊天窗口、统计代码这类业务需要的功能,不划算。

优化之后要定期复查吗?

要。新装插件、新上传的大图都可能让速度退步,每隔几个月测一次首页和主要页面。

总结

WordPress速度优化的顺序:

  1. 测速,看LCP、INP、CLS,逐项处理;
  2. 主机和PHP版本:机房靠近客户,PHP用较新稳定版;
  3. 缓存:用主机自带的方案,只装一个;
  4. 图片:上传前缩到宽度1600像素以内并压缩,统一用WebP,已有图片用缓存插件或专门的插件批量转换,首屏大图不要懒加载;
  5. CDN:客户分布广就开;
  6. 精简插件和第三方脚本。

各家主机的详细设置,见《Hostinger提速》《SiteGround的Speed Optimizer》《Cloudways加速》。装完WordPress之后还有哪些要做的,见《WordPress建站流程和教程汇总》。

文章版权归作者所有,转载请注明出处:https://woniune.com/posts/wordpress-speed-optimization/
上一篇WordPress网站安全设置:Wordfence、修改登录地址、两步验证怎么配

相关推荐