提升WordPress 打开速度全面解决方案

所属分类: CMS教程 / WordPress 阅读数: 947
收藏 0 赞 0 分享
从ThemeForest购买的是正版商业主题AVADA(有售后技术支持),使用国内阿里云主机(配置不算低),网站大部分都是AVADA官方导入数据,只是做了一些汉化,并未添加太多数据。但是网站打开速度,特别是首次打开速度很不尽如人意。经过数日研究,一轮又一轮的探索,多方面查证,终有所获。与大家分享,希望能帮到为此困扰的朋友们。

工具/原料

  • WordPress 4.1
  • WP主题AVADA 3.7.1
  • WP插件Useso take over Google 1.5
  • WP插件W3 Total Cache 0.9.4.1
  • WP插件Revolution Slider4.6.5
  • 火狐插件app.telemetry Page Speed Monitor 14.0.7
  • MacOS X10.10 Safari8.0.2
  • 火狐插件YSlow3.1.8
  • 在线Google PageSpeed和Yahoo YSlow综合工具:http://gtmetrix.com
  • 测试网站 http://jianzhan1.cn
  • Wordpress商业主题购买网站 www.themeforest.net
  • 时间2014年12月

方法/步骤

第一部分:谷歌的问题

现象对于Wordpress初学者来说,不论是Wordpres网站前台还是管理后台,操作反应都是特别特别慢,一个操作反应要等上20秒。

提升WordPress 打开速度全面解决方案 Avada主题

原因:这是由于Wordpress系统默认使用谷歌字体,在国内谷歌域名被屏蔽,所以导致操作反应慢。对于很多商业主题默认使用了谷歌字体、谷歌ajax库、谷歌地图等谷歌服务,所以导致网站前台访问速度慢。

提升WordPress 打开速度全面解决方案 Avada主题

原理:googleapis.com被屏蔽,但谷歌这些库的确是好东西,国内360给予镜像,地址是useso.com,内容与谷歌的一样,国内速度快。

提升WordPress 打开速度全面解决方案 Avada主题

解决方法:对于后台:找到Wordpress这个文件 \wp-includes\script-loader.php,找到:fonts.googleapis.com,全部替换成:fonts.useso.com。或者干脆把“googleapis”替换成“useso”。对于前台:近期测试了很多替换插件,网上推荐的大部分已经不管用了,后来发现这个最有用,而且更新比较勤:“Useso take over Google”,近几个月测试只是这个最好用。

方法/步骤2

第二部分:首页加载总容量

现象:经过以上的操作后,后台操作速度正常了,但AVADA首页打开要等很久才能显示,对比以前做过的网站、目前流行网站发现,慢与客户端网速无关,与网站服务器和带宽无关,与服务器环境配置无关。通过Safari浏览器内置工具观察网站首页加载的总容量,当时jianzhan1.cn首页总容量需要4-5MB,经过一番优化后降低到2.26MB。

提升WordPress 打开速度全面解决方案 Avada主题

提升WordPress 打开速度全面解决方案 Avada主题

对比:以前用织梦DEDECMS手工做模板的网站www.bloglord.net,全部加载竟然只需要701KB。再看看新浪网站首页全部加载需要4.29MB,苹果中国网站首页全部加载3.18MB,锤子手机网站首页全部加载3.61MB,百度首页全部加载397KB。

提升WordPress 打开速度全面解决方案 Avada主题

提升WordPress 打开速度全面解决方案 Avada主题

分析:首页加载的主要内容是:index.html文件,CSS文件,JS文件,背景图片,用户上传的图片,视频等。对于Wordpress商业主题来说,降低首页加载容量的有效手段是图片优化。

提升WordPress 打开速度全面解决方案 Avada主题

提升WordPress 打开速度全面解决方案 Avada主题

解决方法:另外发现Avada主题官方导入的图片都很小,比如2000px宽度的全屏大背景图只有30KB,但是用户上传的图片如果优化不够(或者为了清晰度高保真),一张不大的图可能几百KB。AVADA有一个很长的首页,内容丰富,如果用户的图片没有经过优化,整个首页的下载量会很大;网速不好的访问者加载速度会慢。用户上传图片前一定要经过优化,在PHOTOSHOP里优化,建议一张图片20-30KB。

方法/步骤3

第三部分:启用缓存与加速

经过以上的优化调整,发现加载速度好多了,不过距离我的要求还有些距离。于是我想到的是增加Wordpress缓存和css与js合并,降低数据库连接数量,降低js和css响应次数。

原理:Wordpress虽然可以启用rewrite,但并不是生成真正的缓存文件,每次打开页面需要打开数据库。

解决思路与方法:Wordpress的缓存插件有很多,以前achair.cn这个网站用的知名插件WP Super Cache,感觉效果还可以,不过这个插件在Avada主题上我没搞定,估计.htaccess有问题,个别浏览器会打不开首页。到Avada官方技术支持论坛查询后发现,Avada官方演示DEMO网站用的是W3 Total Cache插件,并给出W3TC的配置文件,我们只需要安装好插件并导入配置文件即可。

提升WordPress 打开速度全面解决方案 Avada主题

另外,网上有很多关于这两个插件的对比分析,都说W3TC要好一些。关于JS与CSS多文件合并,以前achair.cn用的也是Wordpress的商业主题,用过此类合并插件,不过那些插件在Avada上又变的不好使了,还好W3TC有合并JS与CSS的功能。

方法/步骤4

第四部分:关闭Avada动画、特效

经过以上三步操作,感觉已经把能优化的都优化了。不过实际上用起来还是感觉不够快,找外地朋友测试,首次打开有时需要10秒左右,有时需要22秒。

提升WordPress 打开速度全面解决方案 Avada主题

提升WordPress 打开速度全面解决方案 Avada主题

原因:经过多方查找,用火狐Speed Page插件,发现“下载时间”并不长,问题出在“处理时间”,有时要处理20几秒。这个“处理”主要是浏览器处理JS和CSS3特效需要的时间。

提升WordPress 打开速度全面解决方案 Avada主题

分析:Avada主题的长首页使用了大量特效,有插件动画,有JS动画,有CSS3特效等等。这时候,要做决策,在特效与加载时间上作取舍,用户体验的天平该往哪里倾斜?

提升WordPress 打开速度全面解决方案 Avada主题

解决方法:分享一下我的选择:

1 首屏特效一定要保留,使用了Revolution Slider4.6.5,因为功能强大,直接通过后台可以创建Banner动画,而且比较成熟,在性能优化和特效优化方面比较到位。

2 二屏保留了一小部分特效。

3 下面几屏的特效一律关闭,用Fusion Page Builder,手工一个个的将动画关掉,那些动画虽好看,不过太费浏览器资源了,影响用户体验,在我的Retina MacBook 2013年终8G内存笔记本上都有一些卡顿,更何况别的电脑了。

4 进入Avada主题选项,特别是Advanced里面,把用不着的都关掉,如下列表:

Disable Fusion Builder

Disable Mega Menu(打勾)

Disable Avada Styles For Revolution Slider(打勾)

Disable Avada Dropdown Styles(打勾)

UberMenu Plugin Support

Disable CSS Animations(打勾)

Disable CSS Animations on Mobiles Only(打勾)

Disable Youtube API Scripts(打勾)

Disable Vimeo API Scripts(打勾)

Disable Google Map Scripts(打勾)

Disable ToTop Script

Enable ToTop Script on mobile

Disable Fusion Slider(打勾)

Disable Elastic Slider(打勾)

Disable FontAwesome

Disable Open Graph Meta Tags(打勾)

Disable Rich Snippets Sitewide(打勾)

Disable Avada’s Woocommerce Product Gallery Slider(打勾)

经过以上四个步骤的优化,网站的首次打开速度基本上可以接受了。但是,Wordpress+商业主题不能与自己做的模板和CMS组合相提并论,强大的功能和效果与速度之间的平衡需要自己来把握。

方法/步骤5

第五部分,话外篇《给力的提速–PHP OPCode 缓存 APC》

发现:W3 Total Cache的设置中,有个Cache选项,默认是Disk,适用于一般的虚拟机。下面还有更好的“Opcode:Alternative PHP Cache(APC)”这个选项默认是灰的,需要VPS虚拟服务器才可以使用。

解决方法:具体打开方法大家自己搜索,PHP开启OPCode APC后,W3TC配置中“Opcode:Alternative PHP Cache(APC)”这个选项为可选,选择之后需要配置一下PHP.ini里面的[APC],在这里我备注一下:

1.修改php.ini(最好通过phpinfo查看php.ini文件位置)打开 extension=php_apc.dll

2.添加:[php] view plaincopyapc.enabled = 1apc.cache_by_default = onapc.shm_segments = 1apc.shm_size = 128apc.ttl = 7200apc.user_ttl = 7200apc.num_files_hint = 2048apc.write_lock = Onapc.gc_ttl = 3600apc.ttl= 7200apc.enable_cli=1apc.enabled = 1

3.重启apache

提升WordPress 打开速度全面解决方案 Avada主题

效果:

这个部分对访问者访问网站速度提升非常明显,找外地的朋友帮我测试,首页首次打开速度3-4秒,而且内页点击后反应2秒左右,这才是正常的网站啊。

更多精彩内容其他人还在看

wordpress wp_list_categories(分类的链接列表)的使用方法

用分类做为导航拦及wp_list_categories的用法,下面是具体的示例,感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

wordpress通过当前文章的ID获取文章标题内容简介的信息

wordpress通过当前文章的ID获取文章的信息用的极多,在wordpress二次开发中经常会使用到,本文将详细介绍,需要了解的朋友可以参考下
收藏 0 赞 0 分享

wordpress获取当前文章的评论数实现代码

wordpress获取当前文章的评论数,是每一个使用wordpress的朋友所疑惑不解的地方,本文将给出解决方法,可供参考
收藏 0 赞 0 分享

wordpress添加更新数据库等操作提示报错

很长时间没有动过wordpress里的布局了,当我进行添加和更新操作时,连连报错,于是搜集整理一些,拿出来和大家分享
收藏 0 赞 0 分享

WordPress高级自定义布局的内容编辑器(TinyMCE)模板

WordPress的编辑器TinyMCE是一个非常强大的工具,对于网页设计师来说,使用WordPress的编辑器TinyMCE是没什么困难的,但是对于那些不怎么了解HTML的人来说却用起来不是那么的得心应手
收藏 0 赞 0 分享

WordPress手动修改文章排列顺序摆脱按发布时间升降序排列

我们常见的WordPress站点文章排序,通常情况下是按发布时间的升序或降序方式排列,想手动修改文章的排列方式,可以随意更改文章的排列位置这种排序方式几乎可以满足我们的特殊需求了
收藏 0 赞 0 分享

wordpress如何设置文章置顶以及区分置顶文章与普通文章

很多博客都有自己的置顶文章,除了位置差异外,跟其他文章是没有任何区别的,那我们怎样才能将它们区别开来呢,本文将介绍几种方法,需要的朋友可以参考下
收藏 0 赞 0 分享

WordPress插件和主题编写时cookie应如何设置

编写WordPressc插件和主题的时候,经常需要用到cookie,但是如果你在WordPress主题文件中直接使用php的setcookie()来发送cookie,那是完全不行的,我怀疑WordPress初始化的时候已经发送了其他输出,才导致setcookie失效
收藏 0 赞 0 分享

Dreamweaver代码的格式化功能掌控html代码的格式

今天偶然发现了Dreamweaver的一个非常有用的功能,就是代码的格式化功能,我们写的html或者css代码都计较混乱,难以阅读,等到所使用的标签越来越多,嵌套越来越深,这时我们已经很难去掌控html代码的格式问题了
收藏 0 赞 0 分享

如何给wordpress创建动态的置顶文章长时间引起注意

置顶文章的作用是希望长时间引起读者注意,可以表明站点的简介、版权声明、友情链接的交换原则等;本文将介绍如何给wordpress创建动态的置顶文章,需要了解的朋友可以参考下
收藏 0 赞 0 分享
查看更多