GHL's Notes/

谈谈我是如何优化WordPress的

前言

很多人都说,WordPress速度慢,WordPress效率低下。

一开始我也是这么认为的。

后来,经过一番折腾,我发现,WordPress优化以后,效率和速度都可以达到Typecho一样,而且WordPress插件丰富多样,操作简单,实在是让人没有想用Typecho的欲望。

优化方法

我的优化方法很简单,只有以下简单几步。

第一步:选择速度快的虚拟主机/VPS

想要WordPress速度快,首先得要保证网站服务器对目标用户连接速度快,只有源站速度快,才能达到最快的访问速度。

第二步:选择一个精简的主题

WordPress特点,就是主题特别繁多。

我并不推荐使用那些花里胡哨的主题,或者是看起来特别好看的,原因就是,这些主题实现,都要引用大量的开源框架或者JS项目,这就会造成代码冗杂,繁多,静态文件体积极度庞大,拖慢了加载速度。

因而,一个精简的WordPress主题,对一个WordPress站点访问速度影响巨大

我推荐一个主题:GeneratePress

第三步:静态化页面

为什么要静态化页面,这就不得不说起WordPress本身架构设计。

以下均为本人观点,可能有错误,请指出

之所以WordPress插件生态完善,是因为WordPress本身钩子(Hooks)十分丰富,丰富到几乎大部分WordPress可见部分。

但这也有一个问题,这会导致代码的冗杂。

为什么Typecho代码如此轻量,运行速度快,很大一个原因就是,Typecho钩子完全没有WordPress多,而且缺少钩子文档,导致大部分开发者想开发Typecho插件都十分艰难。

而且WordPress代码细致严谨,这无意之间就会比Typecho多出很多判断代码,以及各部分细节处理代码,这些代码虽然一开始不算很多,但随着安全性的提高,这些代码会越来越多,真正拖慢了WordPress运行速度。

而且PHP是非编译语言,非编译语言都有个弱点就是速度慢。

因此,静态化WordPress,就是减少这些判断代码的重复,减少WordPress系统的运行次数,减少PHP使用,达到高性能,速度提升的目的。

如何静态化

吹了这么多,也该给个解决方案了。

我推荐使用以下两个方式全局缓存(静态化)页面。

使用Nginx Fastcgi Cache

Nginx Fastcgi Cache是Nginx里面最实用的,也是最好用功能之一。(好像病句了呢,没关系。。。

依赖Nginx灵活的操作方法。可以给Wordpress优化到极致。

当然,也可以优化Typecho,详细看我写的文章,如何用Nginx Fastcgi Cache优化Typecho

Wordpress需要额外安装NginxHelper插件,具体可以参考挖站否-开启Nginx fastcgi_cache缓存加速方法-Nginx配置实例

(其实Nginx也可以缓存在内存里,把缓存路径填/dev/shm即可

使用Varnish

Varnish,一个高性能缓存软件,缓存在内存里,有点类似于Redis (吧?
Varnish唯一缺点,就是不支持https,而且Typecho没有这个插件支持(我可能会写一个?
但WordPress有。

第四步:减少静态文件

就算你把WordPress优化到极致,但是!!!

你还有好多静态文件加载,不要轻视静态文件,往往他们才是真正拖慢你网站加载速度的。

因为加载一个静态文件,就要建立一个TCP Connection而且https还要完成握手,这些就够拖慢你好多时间的了。

早在零几年,雅虎就提出了一个原则,网站静态文件越少越好

虽然,现在有了很多解决方案,例如preload(等会讲 ,QUIC(不使用TCP等等。

但我要讲的是一个最笨的方法,合并静态文件CSS和JS。这样子,兼容性最好。上述解决办法不适用于IE8(虽然现在也没有人用IE8

WordPress最出名的合并静态文件插件,就是

Autoptimize

非常好用,一次性就把所有CSS和JS压成两个。

不仅仅是CSS和JS,还有图片

图片没得压成一张,但可以压缩,减小体积。

现在最潮流方式,就是把jpg压缩成webp格式。

插件一堆,不说了,自己去插件那里搜索webp就出来了。

第五步:静态文件扔CDN上

这是对于源站速度不行的同学,没有拯救方法了,静态文件扔CDN做静态,一定会解决网站过慢问题。
WordPress下好用的一键更改静态地址为CDN地址插件:

CDN Enabler

第六步:给静态文件做preload

这一步很重要,不要忽视了!!!

Preload是比较新潮玩意,老浏览器不支持,具体作用就是提前预加载静态资源,加快访问速度
使用方法很简单,只要在里添加一行或者几行代码即可

<link rel="preload" href="你的静态资源链接" as="静态类型"

静态类型参考如下链接,fetch类型标准

一般常用以下两种

CSS: style
JS: script

静态资源做preload后,加载速度拥有很大提升。

如果是不同域名,可以先做dns-prefetch,使用如下

<link rel="dns-prefetch" href="域名">

第七步:删除一些WordPress中没有必要的东西

  1. 删除Emoji(插件:Disable Emojis (GDPR friendly)
  2. 禁用xmlrpc以及wp-json之类的

第八步:压缩HTML页面

压缩目的就是为了去除空格和注释,降低HTML体积,提升加载速度

WordPress推荐插件:
Minify HTML
或者万能的
Autoptimize

最后一步:删除或者替换掉Google Fonts

很多人总是好奇,该做的我都做了,为什么网站加载速度还是这么慢。
结果按F12一看,Google Fonts半天都没加载出来。。。

当然也不是所有地区加载Google Fonts都这么慢,少数地区中国而已。

唯一做法,就是移除或者替换成CDN地址

WordPress移除Google Fonts插件:
Disable Google Fonts

或者前面的

Autoptimize

总结

要是WordPress,我真的推荐Autoptimize插件,因为他既能压缩静态文件,也能删掉一些没必要的或者Google Fonts

几乎是把所有优化能用上(除preload)的全都有了。

另外,我并不推荐使用W3 Total Cache这种东西,因为调用钩子太多,导致效率不高。

最好使用非WordPress插件(例如Nginx,LiteSpeed)来静态化页面,只要能少运行WordPress最好就少运行。

留下一条评论 取消回复

仅有 1 条评论

  1. Chu:

    所以还是用了 Typecho

    January 18th, 2021 at 12:46 am 回复