首页 > 电脑专区 > CMS教程 > WordPress >

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

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

工具/原料N3Y办公区 - 实用经验教程分享!

  • 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月

方法/步骤N3Y办公区 - 实用经验教程分享!

第一部分:谷歌的问题N3Y办公区 - 实用经验教程分享!

现象对于WORDPRESS初学者来说,不论是Wordpres网站前台还是管理后台,操作反应都是特别特别慢,一个操作反应要等上20秒。N3Y办公区 - 实用经验教程分享!

提升<a href=https://www.bgqu.net/tag/4454/ target=_blank class=infotextkey>WORDPRESS</a> 打开速度全面解决方案 Avada主题N3Y办公区 - 实用经验教程分享!

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

提升<a href=https://www.bgqu.net/tag/4454/ target=_blank class=infotextkey>WORDPRESS</a> 打开速度全面解决方案 Avada主题N3Y办公区 - 实用经验教程分享!

原理:googleapis.com被屏蔽,但谷歌这些库的确是好东西,国内360给予镜像,地址是useso.com,内容与谷歌的一样,国内速度快。N3Y办公区 - 实用经验教程分享!

提升<a href=https://www.bgqu.net/tag/4454/ target=_blank class=infotextkey>WORDPRESS</a> 打开速度全面解决方案 Avada主题N3Y办公区 - 实用经验教程分享!

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

方法/步骤2N3Y办公区 - 实用经验教程分享!

第二部分:首页加载总容量N3Y办公区 - 实用经验教程分享!

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

提升<a href=https://www.bgqu.net/tag/4454/ target=_blank class=infotextkey>WORDPRESS</a> 打开速度全面解决方案 Avada主题N3Y办公区 - 实用经验教程分享!

提升<a href=https://www.bgqu.net/tag/4454/ target=_blank class=infotextkey>WORDPRESS</a> 打开速度全面解决方案 Avada主题N3Y办公区 - 实用经验教程分享!

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

提升<a href=https://www.bgqu.net/tag/4454/ target=_blank class=infotextkey>WORDPRESS</a> 打开速度全面解决方案 Avada主题N3Y办公区 - 实用经验教程分享!

提升<a href=https://www.bgqu.net/tag/4454/ target=_blank class=infotextkey>WORDPRESS</a> 打开速度全面解决方案 Avada主题N3Y办公区 - 实用经验教程分享!

分析:首页加载的主要内容是:index.html文件,CSS文件,JS文件,背景图片,用户上传的图片,视频等。对于WORDPRESS商业主题来说,降低首页加载容量的有效手段是图片优化。N3Y办公区 - 实用经验教程分享!

提升<a href=https://www.bgqu.net/tag/4454/ target=_blank class=infotextkey>WORDPRESS</a> 打开速度全面解决方案 Avada主题N3Y办公区 - 实用经验教程分享!

提升<a href=https://www.bgqu.net/tag/4454/ target=_blank class=infotextkey>WORDPRESS</a> 打开速度全面解决方案 Avada主题N3Y办公区 - 实用经验教程分享!

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

方法/步骤3N3Y办公区 - 实用经验教程分享!

第三部分:启用缓存与加速N3Y办公区 - 实用经验教程分享!

经过以上的优化调整,发现加载速度好多了,不过距离我的要求还有些距离。于是我想到的是增加WORDPRESS缓存和css与js合并,降低数据库连接数量,降低js和css响应次数。N3Y办公区 - 实用经验教程分享!

原理:WORDPRESS虽然可以启用rewrite,但并不是生成真正的缓存文件,每次打开页面需要打开数据库。N3Y办公区 - 实用经验教程分享!

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

提升<a href=https://www.bgqu.net/tag/4454/ target=_blank class=infotextkey>WORDPRESS</a> 打开速度全面解决方案 Avada主题N3Y办公区 - 实用经验教程分享!

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

方法/步骤4N3Y办公区 - 实用经验教程分享!

第四部分:关闭Avada动画、特效N3Y办公区 - 实用经验教程分享!

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

提升<a href=https://www.bgqu.net/tag/4454/ target=_blank class=infotextkey>WORDPRESS</a> 打开速度全面解决方案 Avada主题N3Y办公区 - 实用经验教程分享!

提升<a href=https://www.bgqu.net/tag/4454/ target=_blank class=infotextkey>WORDPRESS</a> 打开速度全面解决方案 Avada主题N3Y办公区 - 实用经验教程分享!

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

提升<a href=https://www.bgqu.net/tag/4454/ target=_blank class=infotextkey>WORDPRESS</a> 打开速度全面解决方案 Avada主题N3Y办公区 - 实用经验教程分享!

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

提升<a href=https://www.bgqu.net/tag/4454/ target=_blank class=infotextkey>WORDPRESS</a> 打开速度全面解决方案 Avada主题N3Y办公区 - 实用经验教程分享!

解决方法:分享一下我的选择:N3Y办公区 - 实用经验教程分享!

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

2 二屏保留了一小部分特效。N3Y办公区 - 实用经验教程分享!

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

4 进入Avada主题选项,特别是Advanced里面,把用不着的都关掉,如下列表:N3Y办公区 - 实用经验教程分享!

Disable Fusion BuilderN3Y办公区 - 实用经验教程分享!

Disable Mega Menu(打勾)N3Y办公区 - 实用经验教程分享!

Disable Avada Styles For Revolution Slider(打勾)N3Y办公区 - 实用经验教程分享!

Disable Avada Dropdown Styles(打勾)N3Y办公区 - 实用经验教程分享!

UberMenu Plugin SupportN3Y办公区 - 实用经验教程分享!

Disable CSS Animations(打勾)N3Y办公区 - 实用经验教程分享!

Disable CSS Animations on Mobiles Only(打勾)N3Y办公区 - 实用经验教程分享!

Disable Youtube API Scripts(打勾)N3Y办公区 - 实用经验教程分享!

Disable Vimeo API Scripts(打勾)N3Y办公区 - 实用经验教程分享!

Disable Google Map Scripts(打勾)N3Y办公区 - 实用经验教程分享!

Disable ToTop ScriptN3Y办公区 - 实用经验教程分享!

Enable ToTop Script on mobileN3Y办公区 - 实用经验教程分享!

Disable Fusion Slider(打勾)N3Y办公区 - 实用经验教程分享!

Disable Elastic Slider(打勾)N3Y办公区 - 实用经验教程分享!

Disable FontAwesomeN3Y办公区 - 实用经验教程分享!

Disable Open Graph Meta Tags(打勾)N3Y办公区 - 实用经验教程分享!

Disable Rich Snippets Sitewide(打勾)N3Y办公区 - 实用经验教程分享!

Disable Avada’s Woocommerce Product Gallery Slider(打勾)N3Y办公区 - 实用经验教程分享!

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

方法/步骤5N3Y办公区 - 实用经验教程分享!

第五部分,话外篇《给力的提速–PHP OPCode 缓存 APC》N3Y办公区 - 实用经验教程分享!

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

解决方法:具体打开方法大家自己搜索,PHP开启OPCode APC后,W3TC配置中“Opcode:Alternative PHP Cache(APC)”这个选项为可选,选择之后需要配置一下PHP.ini里面的[APC],在这里我备注一下:N3Y办公区 - 实用经验教程分享!

1.修改php.ini(最好通过phpinfo查看php.ini文件位置)打开 extension=php_apc.dllN3Y办公区 - 实用经验教程分享!

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 = 1N3Y办公区 - 实用经验教程分享!

3.重启apacheN3Y办公区 - 实用经验教程分享!

提升<a href=https://www.bgqu.net/tag/4454/ target=_blank class=infotextkey>WORDPRESS</a> 打开速度全面解决方案 Avada主题N3Y办公区 - 实用经验教程分享!

效果:N3Y办公区 - 实用经验教程分享!

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

以上方法由办公区教程网编辑摘抄整理自互联网可供大家参考!N3Y办公区 - 实用经验教程分享!


标签: WORDPRESS打开速度全面解决方案

办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码