WordPress性能优化指南

当今的网络设施更新迭代非常迅速,普遍是10M光纤以上,再也没有人愿意长时间等待网页载入了。与此相对,网页能够快速的载入绝对是有利于用户体验的。我对此也进行过很多尝试,希望能够提高博客的访问速度,对于一些常见的WordPress加速方法均有些体会,所以分享出来希望可以帮助其他人少做错误的尝试。

一、常见拖慢速度的影响速度

为什么把拖慢速度的影响因素放到加快前面,根据木桶理论,决定木桶中盛水量的决定性因素是最低的那块木板,其他的优化的再好,一个页面元素就能拖慢整体的速度了。当然对一个网站来说,存放网站的主机本身是非常重要的,一般来说除了CPU、IO、内存的性能要足够外,Ping和掉包率不能太高。当ping值大于300或者掉包率大于15时,整个网站再怎么优化都很难有出色的表现,由于主机选用后难以变更,所以这里假定你的主机整体性能还可以。

cannikin-law

1-1引用的元素

1-1-1问题自检

从这里开始,需要学会一点浏览器的分析工具(chrome-devtools)的用法,以帮助我们能够更精确的分析页面性能的状况而不是凭借感觉判断。我这使用的是Chrome浏览器,Firefox浏览器也有类似工具,使用方法大同小异,这里是以Chrome做示范。打开方式非常简单,在网页中空白处 鼠标右键–检查,或者快捷键Ctrl+Shift+I就能打开Chrome浏览器的分析工具(chrome-devtools)。

它的全貌是这样的:

wordpress-performance2

敲入网址回车进行访问,测试一下:

wordpress-performance4

1-1-2Gravatar头像

Gravatar头像由于没有国内服务器,从国外访问速度是很不理想的,并且国际线路抽风也是常态,所以这个时候就需要进行决择了,是设定不显示头像,还是使用其他人提供的反代CDN的Avatar头像,或者也可以自己反代一个。例如要替换为V2ex的Avatar头像,可以在外观–编辑–functions.php中加入下列一段代码:

function getV2exAvatar($avatar) {
        $avatar = str_replace(array("secure.gravatar.com/avatar","0.gravatar.com/avatar","1.gravatar.com/avatar","2.gravatar.com/avatar"),"cdn.v2ex.com/gravatar",$avatar);
        return $avatar;
}
add_filter('get_avatar', 'getV2exAvatar');

除了V2ex提供的Gravatar CDN服务,还有其他的也十分值得使用,要更换V2ex的反代头像为其他服务,只需要更换上列代码中的cdn.v2ex.com/gravatar为下列其中一个地址即可。

七牛云Gravatar(推荐):

dn-qiniu-avatar.qbox.me/avatar

多说Gravatar:

gravatar.duoshuo.com/avatar

中科大Gravatar:

gravatar.lug.ustc.edu.cn/avatar

MoeCDN Gravatar:

gravatar.moefont.com/avatar

极客族Gravatar:

sdn.geekzu.org/avatar

1-1-3Google字体库

除了Avatar头像,也很有可能是谷歌字体还有其他引用的公共库导致的整体速度被拖慢,这里可以替换为国内的一些CDN公共库,也可以托回到自己的主机上,直接引用自己的主机地址,这样的好处是减少了DNS查询的时间,也因此一般不建议替换网站中原本的JS为公共库的CDN。不过当你的主机在国外,国内下载速度非常慢的时候,使用一个高速的CDN公共库也就变得有必要了。

当你通过上面提到的chrome-devtools工具发现自己的页面引用有谷歌字体,那么禁用谷歌字体是个很好的选择,因为页面加载的字体一般都是英文和数字,对中文网站的影响不大。当你决定要禁用谷歌字体时,可以到WordPress的外观-编辑中选择自己当前正在使用的主题,在funtions.php模版(并不总是在funtions.php模版模版中,需要自己去查找)中找到引用的谷歌字体,并注释那一行代码。

以WordPress 2017年度主题Twenty Seventeen为例

1-2插件

插件的使用越少越少,很多功能可以轻松的使用代码实现,就没有必要使用插件了,比如XML网站地图等功能,在使用插件需要审视自己是否真的需要那些功能,如果确定需要就寻找能否可以使用代码的方式代替,在找到代码实现的方法后,若是认为代码实现的操作难度大于自己的水平,那么就果断使用插件。毕竟插件本身就属于WordPress的一大优点,也不是每个人都那么Geek,什么都能自己搞定的。比如我之前在使用代码实现相关文章的推荐时就遭遇了一些难题,之后就使用插件了。 对于一些功能还可以使用另类的方式替代,比如对于输入代码的功能。我并非码农,也并不期待能够再这方面有所建树,但在贴代码方面有着小量的需求,所以我就使用了标签的而非插件的方式来粗略的实现这一目的。比如对于一些短代码就使用code标签,效果:<code>this is code</code> 对于一些长代码使用<pre>标签,效果如下(无高亮功能):

this is code

二、加速你的网站

2-1静态缓存

都知道静态博客的速度快,那是因为静态博客只需要访问,并不需要动态生成页面。使用WordPress时可以使用一些静态缓存插件,生成静态文件供用户访问以提升访问速度,并且生成的缓存是一次性的,对于高访问量的网站还能减缓主机负载。

使用静态缓存推荐一个插件WP-Super-Cache,WP-Super-Cache是使用人数最多的一个静态缓存插件,功能非常强大,可自定义选项多同时还保持着良好的兼容性。安装好插件后需要设定启用缓存,缓存模式我推荐选择『mod_rewrite 缓存模式』,速度最快,对于插件推荐的选项全部勾拳,把缓存超时时间设置为0,禁用缓存自动回收。

2-2Pagedpeed

Google也深知网站速度的重要性,推出了很多站长工具来帮助提升网站速度,Pagespeed就是Google推出的一个前端自动优化模块,支持Apache和Nginx。拥有非常多的优化功能,大名鼎鼎的域名商、空间商GoDaddy就在自己的主机上部署了Pagespeed以提升主机使用者网站的访问速度。

安装方法非常简单,这里以Ubuntu下的Apache2为例:

Wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_i386.deb
sudo dpkg -I *.deb
Sudo apt-get -f install
Sudo service apache2 restart

OK,就这样轻松安装并启用了Pagespeed模块,在这个安装过程中会自动配置ModPagespeedRewriteLevel CoreFilters模式,进行一些最通用、风险最小(即保持原使用体验)的优化。默认参数包括(查看参数详情,请点这里):

add_head
combine_css
convert_jpeg_to_progressive
convert_meta_tags
extend_cache
flatten_css_imports
inline_css
inline_import_to_link
inline_javascript
rewrite_css
rewrite_images
rewrite_javascript
rewrite_style_attributes_with_url

以上就已经包含了压缩图片、重写CSS、JS等一系列常用优化项目,不过还可以编辑/etc/apache2/mods-available/pagespeed.conf,如下列参数一样自行调整,可以直接贴出下列配置,也可以看着官网说明自行调整,如果你不知道这些参数意味着什么,那么建议你保持默认。

ModPagespeedFetchFromModSpdy on
ModPagespeedRewriteLevel PassThrough
ModPagespeedEnableFilters add_instrumentation
ModPagespeedEnableFilters prioritize_critical_css
ModPagespeedEnableFilters extend_cache
ModPagespeedEnableFilters combine_css
ModPagespeedEnableFilters combine_javascript
ModPagespeedEnableFilters lazyload_images
ModPagespeedEnableFilters collapse_whitespace
ModPagespeedEnableFilters insert_dns_prefetch

2-3CDN

如果你的站在国内并且已经备案了,那么国内各大CDN均是很好的选择,如果未备案只能选择海外的CDN加速服务Cloudflare等,那么就有可能加速后不如加速前,这个可以自行测试选择。选择CDN能够隐藏自己的主机IP,一定程度上使得网站更加安全,不容易遭受攻击。

如果确实不想备案,又想要使用国内的CDN,可以尝试如七牛、又拍等静态文件CDN服务,和静态缓存插件WP-Super-Cache配合,速度提升非常明显。

小结

网站加速是个永恒的课题,优化方法无非是空间换时间。对于海外主机来说,主机本身的网络线路能够很大程度上影响网站的访问速度,所以选择主机时要谨慎选择。其实对于网站速度来说,个人博客的速度能过得去就行了,不应该太高的要求。因为要想达到很快的速度,需要投入大量时间和金钱,这对于一般人来说,值不值是需要考虑的。

毕竟也不能偏离写博客的初衷,记录与分享,内容最重要!

 

“WordPress性能优化指南”的7个回复

    1. 在晚高峰时期,主机的网络传输速度也很重要,如果网站图片那就卡的不要不要的。所以我计划用旧手机搭建CDN,缓存网站的静态文件,由于是国内网络,虽然是2m上行宽带,但任何时候速度都是还不错的。

      1. 以前看过旧手机搭建主机更好,老毛子开发那玩意我不太会折腾,家里50M的宽带,我传文件到搬瓦工可以达到900k/s,搭建个主机 vps都省了,数据存自己手里更安全,什么空间流量带宽都是浮云了

        1. 搬瓦工这么强悍,现在还能上传900kb吗?ksweb这个app已经汉化过了,使用起来还是比较容易的。手机搭建WordPress实际上对手机性能还是有些要求的,家里的那个老手机性能差劲,内存只有256mb,搭建了WordPress即使使用了PHP缓存速度也不行,还不如目前的美国VPS。于是只搭建了个反代,缓存静态文件。

    2. 新版的WordPress已经取消了引用Google字体,减少了对外部的依赖。Gravatar偶尔抽风确实蛋疼,但一般情况下速度还可以,不算很糟糕。我取消了头像显示,并使用上了旧手机搭建的CDN,你可以再体验一下,本站的访问速度是不是有了很大的提升。

  1. 其实WordPress一个非常有效的方法就是使用数据库缓存,无论是Redis或者是Memcached都可以很大程度上提高速度。我基本上只要开启Redis和PHP7就非常快了~

    1. 嗯嗯嗯,缓存确实很有用。WP-Super-Cache的mod_rewrite缓存模式能直接生成HTML文件,直接绕过了PHP解析和数据库查询,理论上比单独的数据库和PHP缓存效率更高。但是对于未备案的国外主机来说,主要瓶颈是网络传输速度,减小网站文件大小和加快静态资源加载对网站的整体速度提升效果非常明显。

发表评论

电子邮件地址不会被公开。 必填项已用*标注