Duke
Duke
2018年9月11日

影响一个网站用户体验 最重要的因素有三:速度、速度、还TMD是速度

你做的页面再酷炫,功能再强大,打开网站所需的时间超过3秒已经让人没了好感,超过5秒有大部分人会提前关闭,超过10秒基本就没人看你的站了。

提速的目标是打页面时间控制在2秒以内,更狠一点可以控制在1秒以内,当全国人民甚至全球人民都是秒开你的网站,印象分绝对非常高。

为了达到加速、提速的目标,我们先来看看通常是什么在拖慢我们网站的速度。

影响Wordpress站点速度的主要因素

1 劣质的服务器提供商

服务器的网络带宽费用在中国成本很高,所以你在租服务器之前就应该了解:便宜的服务器绝对快不了。当你不小心租了名不见经传的服务器,不论你后期怎么优化,速度总会慢别人半截。

2 数据库请求量太多

MySQL(或其他数据库)的运用,给Wordpress注入了生命,但这也是网站速度的一个大瓶颈。当你过于追求灵活,在主题的各个部位都查询数据库,进行数据库的读、运算或者写操作,会极大的拖慢网站打开的速度。即便你使用了数据缓存或更高级的数据库服务器——一个数据库请求总数是3的页面 和一个数据库请求总数是30的页面,打开速度也是天差地别的。

3 http请求数太多

有的处女座在做网站的时候喜欢把不同类型的文件分门别类,比如:

控制点击动画的js写一个文件在主题调用,

控制图片特效的js写一个文件在主题调用,

控制菜单下拉的js写一个文件….

页面有无数小图片做网页元素。

然后加载一个页面http请求数上百甚至几百,打开速度自然很慢。

4 不经优化的大图片

一张相同尺寸、经过优化的图片肉眼很难看出和原图的差别,但是其文件大小可以缩减到到原图的三分之一甚至十分之一,下载大文件需要花费更多的时间,当一个页面有很多张大图片,打开速度自然快不起来。

5 加载了国外的外部资源

最典型的是前两年闹的沸沸扬扬的Google字体服务。

有的网站用的国外主题,主题悄悄调用Google的公共库,结果就悲剧了。诚然,Google资源在世界部分地区是很快,但是如果你的网站上还有Google字体、Google gstatic资源,国内网民基本上就和你Say goodbye了,因为加载一个Google的资源需要花费变态长的时间,很大可能还会直接超时,造成网页打开失败。

6 重定向和跳转

有的网站域名比较多,又可能最开始没考虑好后来换了新域名,打开网站需要跳转多次,跳来跳去,时间就被消耗干净了。

7 过多的插件

使用插件无可厚非,但是琳琅满目的Wordpress插件并不一定都适合你的网站,有一些加载了国外资源不说,还会大量写入数据库,造成数据库臃肿庞大,当你卸载了插件,它遗留的数据库内容依然存在,有的甚至有定时作业或者在访问网站的时候爆吃服务器资源,造成CPU满载、内存爆掉,Apache或Nginx死掉重启,数据库死掉重启,这样的网站已经不是慢的问题了,而是无法访问的问题。

所以在不了解一个插件的稳定性时候,需要谨慎使用。

8 存在过多的“修订版”文章和垃圾评论

这其实也是数据库臃肿的问题,在你写文章、编辑文章的时候,Wordpress会定时存很多历史修订版本,目的是担心你不小心改错了需要恢复旧的文章版本,但是时间久了修订版就会越来越多,同理,垃圾评论太久不清理,也在填塞我们的数据库,造成数据库效率低下。

9 程序版本过低

理论上PHP版本越高,执行效率越快,而Wordpress版本越高,问题也越少,插件也是一样,太旧的版本可能会跟系统不兼容。用旧版本的程序不仅速度慢,还可能带来更多其他问题。


加速技巧

1 选择口碑好的大厂主机

国内的大厂无非就是阿里和腾讯,现在两家竞争时不时有很大的优惠活动,建议就在这两家选。当然如果你的受众群在国外,那就选国外的主机,也建议选大厂有名的。道理一样。

2 定期清理优化数据库

有个插件叫WP clean up,专门用来清理优化数据库,建议隔几天打开清理优化下,如果有时间,可以到PHPmyAdmin里对数据表逐条排查一下,删掉没用的数据表,再修复优化一次——记得先备份。

3使用数据库缓存

正是因为数据库查询对整体速度影响巨大,所以针对数据库还需要更多优化手段,如果你的PHP版本支持Memcached,就安装Memcached,如果支持Redis就安装Redis,缓存数据库常用数据后速度会得到显著的改善。值得注意的是主机安装缓存插件后,Wordpress上需要对应的做设置,如果有多个wordpress,则需要对每个wordpress做id,否则缓存数据会串。

4 使用自己可以掌控的主题

在Wordpress的前端,数据库查询量是由你使用的主题决定的,使用一个简洁不啰嗦的主题是最有效减少数据库操作的方式。

如果你一定要用较为复杂的主题,确保自己对其中各个数据库请求都能基本理解,如果它要求你安装插件,确保你了解插件是不是真的对网站有益。

更为有效的方式是自己写主题,这样对于主题的各方面都会有了解,也避免了他人的主题留暗门或者暗中抢服务器资源这些风险。

5 合并css和js并使用图标字体

每个单独的文件就增加一次http请求,所以把同类的多个文件合并成一个是很有效的减少http请求的方式。

如果你觉得麻烦,可以尝试下minify插件,它不仅能合并css js文件,还能把代码最小化,删除注释、换行、空格,最大化缩减文件数量和大小。

很早以前前端喜欢把css难以实现的网页元素做成小图片,再通过css定位放在网页里,时至今日,这种方式是非常不推荐的,即便你把所有小图片合并,网页渲染css总比图片要快,如果遇到图标,建议使用矢量图标字体,而非图片,原因在于,首先矢量图标不论如何放大都不会模糊,而且大量图标可以合成一个字体文件,某种意义上对页面打开速度也是有益的。

另外,CSS文件尽量放在页面头部,Js文件尽量放在尾部,这样的排列方式符合网页渲染的流程,在一定程度可以提升页面渲染速度。

6 上传图片前先对图片进行优化

几个小原则:

6.1 图片尺寸精确到主题所需的最大尺寸,比如我的主题题图最大是1170乘500像素,那就在ps里精确裁好这个尺寸。避免wp再裁图。

6.2 优化图片再上传。有很多工具,最简单的是ps里导出到网页命令”Save for web(Legacy).”,可以实时查看导出后的质量和大小。其他工具可自行百度。

6.3 偏扁平化平面风格的、色彩少的图片用png-24格式;照片类色彩多的用jpg格式;

6.4 能不用GIF动图的,就不要使用GIF,体积大,占带宽;

6.5 矢量风格、需要放大不模糊的简单图片,使用svg格式;

6.6 需要带动画的,用Canvas;

6.7 避免使用bmp、tif、raw等其他不利于网络传播的格式。

7 检查主题和插件的外部链接

安装主题和插件后,在浏览器对网站加载的资源进行测试,遇到外部资源要先进行排查,是主题还是插件带来的。如果有加载Google的公共库,加载gravatar,或者国外CDN的文件,全部替换成本地文件或者国内公共库。

8 尽量不重定向

在建站前期要做好决定,决定好使用的域名再对外宣传,多次重定向不仅会降低搜索引擎好感,还极大拖慢网站速度。

9 只保留必要的插件

插件并不是多多益善,对每个插件需要进行精心筛选,如果可以一段代码解决的,就直接写进主题,删掉插件,如果实在需要,需要对插件进行测试,尽量少装插件,如果你发现禁用一个插件后网站速度得到了提升,尝试排查这个插件是否加载了大文件或者有外部链接。

10 文章发布后清理修订版

有的人建议完全关闭修订版功能,我并不认同,后悔药还是有用的。

唯当你发布了一篇文章之后觉得没有什么可以后悔的时候,过几天记得清理下之前的修订版就好,我通常是在发下一篇文章的时候清理上一篇的修订版。WP clean up插件可以担任这个工作。

11 使用CDN分发静态文件

大部分主机的硬盘性能都不会太好,加上带宽限制,图片、css、js这些静态文件加载会比较慢,所以催生了CDN提供商,我现在的做法是通过一个插件(CDN enabler)把所有静态资源都交给七牛CDN,读者访问网站时,这些资源不再从服务器读取,七牛负责在全国分发这些资源,会自动判断访问者的网络位置给他最快的一份,这会极大的提高静态文件的读取速度。真正从网站服务器获取的就只剩下查询数据库出来的结果,也就是所谓的动态资源。如此一来网站速度又得到了提升。

12 全站页面静态化并开Gzip

Wordperss有很多静态化缓存插件,比如Hyper CacheSuper CacheTotal Cache… 这些插件的原理都大同小异:把一个页面存成一个静态的html或者gzip文件,当访问者访问网站的时候,提供的其实是静态文件,而不去查询任何数据,也不用php去整合头部、内容、页脚,这样能极大的提升网站打开速度。

Gzip是必须要开启的,它就像我们平常用的Rar或者7z,在访问者请求数据的时候,它会在服务端把数据打包压成“压缩包”格式再传输出来,数据量小,自然快。

13 开启http2或SPDY

http2协议已经出了很长时间了,与我们之前使用的http不同的是,它采用二进制传输数据,并且支持数据推送,在客户端浏览器还没有请求的时候就把需要的内容推送到浏览器,Google推出的SPDY协议与Http2类似,实测二者对速度的提升都差不多。

虽然经过试验开启http2或spdy之后似乎对整体速度影响并不是太大,但是作为强迫症来说,提升0.1秒也是极大的满足。

14 升级组件到最新版

据说PHP7系列比php5系列执行速度提升了5倍多,就冲这一点,也应该升级你的php到最新版本,但是有些主题没有做好准备,升级php可能造成主题不可用。如果是Wordpress官方主题,再将主题也升级好了,同理,插件也需要升级到最新版。如果有插件三四年不更新,那你可以放弃这个插件了。

我的习惯是只要有新版本,必须升级,包括Wordpress主程序在内。唯一例外的是MySQL,5.6以上的版本对服务器内存消耗比较厉害,目前我仍然在用5.5.


总结

整体来讲,影响Wodpress速度的无非两个方面:静态文件数据库操作。静态文件我们可以通过整合碎片,交给CND以及最小化代码来提速;而动态查询我们则可以通过建立缓存以及数据库减肥、优化来加速。

WordPress站点的整体运行速度遵循“木桶效应”,换句话说,影响网站整体速度的通常是这些因素中的最短板,通过排查找出是静态文件在拖速度,还是数据查询在拖速度,然后针对性优化,会事半功倍。

@科技

本作品采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)进行许可.


猜你喜欢