如何给WordPress博客提速?

前言

当我们把WordPress博客搭起来之后,在写作文章或者设计页面时,为了图方便,我们可能会选择直接上传图片、视频等文件到我们的博客里,这样做一开始确实没什么问题,也很方便,但是等到博客的内容越来越多,页面的加载就会表现出比较明显的卡慢了,特别是一些便宜的VPS,这些VPS的配置不够高,很容易就会出现这样的情况。

这种情况下我们需要直接换个更好的服务器吗?可这样不仅得加钱,还得消耗精力与时间,还要承担博客迁移过程中文件可能损坏的风险。但其实我们冷静下来查一查,就会发现,新站慢的原因大多数不在主机配置上,而是在两件常常被忽略的小事上:网站页面没有缓存,图片也没有压缩。今天我们就来折腾一下这两件事,让我们的WordPress博客加载更快。

页面为什么加载慢

在动手之前,我们得先弄清楚慢在哪,后面才有正确的思路。一个 WordPress 页面打开,时间主要花在三个地方:

  1. 服务器每次都要现算。WordPress 是动态程序,访客每打开一个页面,服务器都要跑一遍 PHP、查一遍数据库,再把页面拼出来。同一个页面明明长得一样,却每次都得从头拼一遍。
  2. 东西太大。图片是页面里最大的"包裹",一个页面带着几 MB 的图都很常见,图片往往占了页面体积的大头。
  3. 路太远。服务器的地理位置离访客越远,数据跑的时间越长,这是物理规律。

对应的解法则是:缓存解决第一个,压缩图片解决第二个,CDN 则可以缓解第三个。

先装缓存插件,让服务器少算重复题

缓存说穿了就是把算好的结果存起来,下一个访客来了直接拿现成的,不用再从头算。对个人博客来说,这是性价比最高的一步:页面更新不频繁,缓存命中率天然就高。

插件可以选择 WP Super Cache,它是由 WordPress 母公司 Automattic发布的。安装启用后,在"设置 → WP Super Cache"里配置:

  1. 在“通用”里勾选“启用缓存功能(推荐)”,默认开启了"简单(Simple)"的缓存模式,对新手最稳,不需要手动修改什么配置
  2. 如果想要自定义各种缓存配置,可以到"高级“页签中,自行配置。
  3. 点击“更新”后,往下拉,点"测试缓存"(Test Cache),如果显示两个相同的时间戳就说明缓存生效了。
WP Super Cache插件设置界面
WP Super Cache插件缓存测试

配置好后,还可以再做个直观验证:退出登录,开一个无痕窗口打开一篇文章,右键查看网页源代码,拉到最底下能看到一行 Dynamic page generated in 0.xxx seconds. 这样的注释——这就是 WP Super Cache 生成的,那个“0.xxx”就是页面这次拼装花的秒数,开启前开启后对比一下差别很明显。

补充:如果你的主机面板显示用的是 LiteSpeed 服务器,那直接装 LiteSpeed Cache 更好,页面缓存之外还带对象缓存和图片优化,功能更全。但主机不支持 LiteSpeed 的话就别硬装,装了也不生效,老实用 WP Super Cache 就好。

压缩图片

缓存解决的是"算得慢",而压缩图片解决的就是"传得慢"。一张手机随手拍的照片动辄就是三五 MB,压缩完往往就只有几百 KB了,差距就是这么大。

推荐 EWWW Image Optimizer:它最大的好处是压缩在服务器本地完成,不依赖外部服务,对国内站很友好——有些同类插件免费版的压缩要走海外服务器,国内用起来反而更慢。

1.安装配置" EWWW Image Optimizer "

插件启用后,进"设置 → EWWW Image Optimizer",按面板提示来安装本地压缩组件,使用免费方案可以按照下图来勾选。

EWWW Image Optimizer插件安装

建议勾选“Remove Metadata”“WebP Conversion”,“Lazy Load”可先不勾选,许多现代主题已内置此功能,同时开启可能引起冲突,博客的图片最大尺寸1280已经足够,如果你的网站刚需高清晰度的图片可以设置的更大一点,其他的不用配置。

EWWW Image Optimizer插件安装2
  • “Remove Metadata”可以移除图片文件内嵌的拍摄时间、设备型号、GPS定位等信息,在不影响画质的前提下减小文件大小
  • “WebP Conversion”可以将图片转换为WebP格式,通常要比 JPEG/PNG 小 25%-34%,能显著减小页面体积,插件会自动为支持的浏览器提供 WebP 版本。
  • 勾选“WebP Conversion”时出现的“Easy IO”是 EWWW 官方推出的一项付费 CDN 加速服务。如果未来网站流量大增,或海外访客变多,可以考虑购买 Easy IO 来进一步提升速度。如果不需要直接点击“继续”即可

2.配置“WebP Conversion”的参数

点击“insert Rewrite Rules”,等待右侧的红色“PNG”图片变成绿色的“WEBP”

配置“WebP Conversion”的参数

勾选“JS WebP Rewriting”,“JS WebP and Picture Web Exclusions”输入框是用来设置 WebP 转换的“黑名单”,输入框里配置的图片、CSS 区域或页面,不会转换成 WebP 格式,这个输入框可以直接留空,如果某个特定的图片或页面出现显示问题(比如 Logo 变形、某个背景图消失)时,才需要把对应的文件名或类名填进来。

配置“WebP Conversion”的参数2

3.压缩媒体库所有图片

到"媒体库",点击“Bulk Optimize”,点击“Start optimizing”,开始压缩媒体库所有图片。

EWWW Image Optimizer压缩媒体库图片
EWWW Image Optimizer压缩媒体库图片2

之后新上传的图片会自动压缩,不用再管。

4.清理缓存

进入 WP Super Cache 插件设置,点击“删除缓存”(Delete Cached Files),确保访客加载的是带有 JS 替换代码的新页面。

WP Super Cache删除缓存

图片在上传前,自己先压缩一手也是好习惯,截图能存 JPG 就别存 PNG,特别大的图可以先过一遍 TinyPNG 这类在线工具。

音视频别急着传进媒体库

图片之外,音视频才是真正的重量级选手。一段几分钟的 1080p 视频轻松上百 MB,比全站图片加起来还大。这种体量要是直接上传 WordPress 媒体库,必然面对下面三个问题:

  1. 传不上去。不少主机默认的上传限制只有 2~8MB,视频根本过不了第一关。
  2. 带宽吃不消。视频就算传上去了,每次播放都直接吃服务器带宽,同一个访客边看视频,你站上的其他页面就跟着变卡。
  3. 备份变灾难。媒体库越滚越大,到几百 MB 的量级,备份一次都费劲。

所以我们的博客对音视频的处理就一句话:播放用外链,文件别自己扛。

  • 视频:传到 B 站或腾讯视频,文章里直接粘贴视频链接,WordPress 会自动转成嵌入式播放器。画质稳、不占自己带宽,评论区还可能给你带点流量回来。
  • 音频:播客、口播 demo 这类小体量音频,可以放到对象存储里拿外链,文章里用 WordPress 自带的音频区块填外链就能播。比如我现在用的就是 VMRack 的对象存储,每月送 5GB 存储和 10GB 下行流量,放几期 MP3 绰绰有余。

嵌入视频的 iframe 也会拖慢首屏加载,所以一篇文章里别嵌太多,两三个以内比较稳。

CDN加速

CDN(内容分发网络)可以把图片、CSS、JS 这类静态资源复制到各地的缓存节点上,访客就近取,不再每次都回源站。对个人博客来说,前两招做完如果还想再快一截,CDN 就是顺理成章的下一步——不用换主机、不用改代码,改个解析就能挂上。

我现在用的就是 VMRack 的 CDN,每月送 30GB 流量,缓存策略能在后台自己配,个人博客的静态资源完全够用。具体可以参考等点博客的文章《VMRack免费CDN分享》。

总结

新站提速不用一上来就砸钱换主机,先把免费的能吃的吃干榨净:

  1. 安装 WP Super Cache 插件开启页面缓存(LiteSpeed 主机直接用 LiteSpeed Cache),让服务器少算重复题。
  2. 用 EWWW Image Optimizer 开启 WebP,把历史图片全部压一遍。
  3. 音视频能外挂就别自己扛:视频嵌入 B 站链接,小体量音频就走对象存储外链。
  4. 如果还想再快一截,可以挂个 CDN 让静态资源就近取,不频繁回源站。

感谢看到这里的你,祝你的博客也越跑越快。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇