提升WordPress 打開速度全面解決方案(Avada)
從ThemeForest購買的是正版商業(yè)主題AVADA(有售后技術(shù)支持),使用國內(nèi)阿里云主機(jī)(配置不算低),網(wǎng)站大部分都是AVADA官方導(dǎo)入數(shù)據(jù),只是做了一些漢化,并未添加太多數(shù)據(jù)。但是網(wǎng)站打開速度,特別是首次打開速度很不盡如人意。經(jīng)過數(shù)日研究,一輪又一輪的探索,多方面查證,終有所獲。與大家分享,希望能幫到為此困擾的朋友們。
工具/原料
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 測試網(wǎng)站 Wordpress商業(yè)主題購買網(wǎng)站 www.themeforest.net 時(shí)間2014年12月
方法/步驟
第一部分:谷歌的問題
現(xiàn)象對(duì)于Wordpress初學(xué)者來說,不論是Wordpres網(wǎng)站前臺(tái)還是管理后臺(tái),操作反應(yīng)都是特別特別慢,一個(gè)操作反應(yīng)要等上20秒。
原因:這是由于Wordpress系統(tǒng)默認(rèn)使用谷歌字體,在國內(nèi)谷歌域名被屏蔽,所以導(dǎo)致操作反應(yīng)慢。對(duì)于很多商業(yè)主題默認(rèn)使用了谷歌字體、谷歌ajax庫、谷歌地圖等谷歌服務(wù),所以導(dǎo)致網(wǎng)站前臺(tái)訪問速度慢。西安做網(wǎng)站推薦閱讀>>> 一步一步教你如何實(shí)現(xiàn)wordpress博客的“預(yù)加載”功能,
原理:googleapis.com被屏蔽,但谷歌這些庫的確是好東西,國內(nèi)360給予鏡像,地址是useso.com,內(nèi)容與谷歌的一樣,國內(nèi)速度快。
解決方法:對(duì)于后臺(tái):找到Wordpress這個(gè)文件 \wp-includes\script-loader.php,找到:fonts.googleapis.com,全部替換成:fonts.useso.com。或者干脆把“googleapis”替換成“useso”。對(duì)于前臺(tái):近期測試了很多替換插件,網(wǎng)上推薦的大部分已經(jīng)不管用了,后來發(fā)現(xiàn)這個(gè)最有用,而且更新比較勤:“Useso take over Google”,近幾個(gè)月測試只是這個(gè)最好用。
方法/步驟2
第二部分:首頁加載總?cè)萘?/strong>
現(xiàn)象:經(jīng)過以上的操作后,后臺(tái)操作速度正常了,但AVADA首頁打開要等很久才能顯示,對(duì)比以前做過的網(wǎng)站、目前流行網(wǎng)站發(fā)現(xiàn),慢與客戶端網(wǎng)速無關(guān),與網(wǎng)站服務(wù)器和帶寬無關(guān),與服務(wù)器環(huán)境配置無關(guān)。通過Safari瀏覽器內(nèi)置工具觀察網(wǎng)站首頁加載的總?cè)萘?,?dāng)時(shí)jianzhan1.cn首頁總?cè)萘啃枰?-5MB,經(jīng)過一番優(yōu)化后降低到2.26MB。
對(duì)比:以前用織夢DEDECMS手工做模板的網(wǎng)站www.bloglord.net,全部加載竟然只需要701KB。再看看新浪網(wǎng)站首頁全部加載需要4.29MB,蘋果中國網(wǎng)站首頁全部加載3.18MB,錘子手機(jī)網(wǎng)站首頁全部加載3.61MB,百度首頁全部加載397KB。西安網(wǎng)站建設(shè)推薦閱讀>>> 使用wordpress建站的一些經(jīng)驗(yàn),
分析:首頁加載的主要內(nèi)容是:index.html文件,CSS文件,JS文件,背景圖片,用戶上傳的圖片,視頻等。對(duì)于Wordpress商業(yè)主題來說,降低首頁加載容量的有效手段是圖片優(yōu)化。
解決方法:另外發(fā)現(xiàn)Avada主題官方導(dǎo)入的圖片都很小,比如2000px寬度的全屏大背景圖只有30KB,但是用戶上傳的圖片如果優(yōu)化不夠(或者為了清晰度高保真),一張不大的圖可能幾百KB。AVADA有一個(gè)很長的首頁,內(nèi)容豐富,如果用戶的圖片沒有經(jīng)過優(yōu)化,整個(gè)首頁的下載量會(huì)很大;網(wǎng)速不好的訪問者加載速度會(huì)慢。用戶上傳圖片前一定要經(jīng)過優(yōu)化,在PHOTOSHOP里優(yōu)化,建議一張圖片20-30KB。
方法/步驟3
第三部分:啟用緩存與加速
經(jīng)過以上的優(yōu)化調(diào)整,發(fā)現(xiàn)加載速度好多了,不過距離我的要求還有些距離。于是我想到的是增加Wordpress緩存和css與js合并,降低數(shù)據(jù)庫連接數(shù)量,降低js和css響應(yīng)次數(shù)。
原理:Wordpress雖然可以啟用rewrite,但并不是生成真正的緩存文件,每次打開頁面需要打開數(shù)據(jù)庫。
解決思路與方法:Wordpress的緩存插件有很多,以前achair.cn這個(gè)網(wǎng)站用的知名插件WP Super Cache,感覺效果還可以,不過這個(gè)插件在Avada主題上我沒搞定,估計(jì).htaccess有問題,個(gè)別瀏覽器會(huì)打不開首頁。到Avada官方技術(shù)支持論壇查詢后發(fā)現(xiàn),Avada官方演示DEMO網(wǎng)站用的是W3 Total Cache插件,并給出W3TC的配置文件,我們只需要安裝好插件并導(dǎo)入配置文件即可。
另外,網(wǎng)上有很多關(guān)于這兩個(gè)插件的對(duì)比分析,都說W3TC要好一些。關(guān)于JS與CSS多文件合并,以前achair.cn用的也是Wordpress的商業(yè)主題,用過此類合并插件,不過那些插件在Avada上又變的不好使了,還好W3TC有合并JS與CSS的功能。西安做網(wǎng)站推薦閱讀>>> 新手站長如何使用wordpress快速搭建網(wǎng)站,
方法/步驟4
第四部分:關(guān)閉Avada動(dòng)畫、特效
經(jīng)過以上三步操作,感覺已經(jīng)把能優(yōu)化的都優(yōu)化了。不過實(shí)際上用起來還是感覺不夠快,找外地朋友測試,首次打開有時(shí)需要10秒左右,有時(shí)需要22秒。
原因:經(jīng)過多方查找,用火狐Speed Page插件,發(fā)現(xiàn)“下載時(shí)間”并不長,問題出在“處理時(shí)間”,有時(shí)要處理20幾秒。這個(gè)“處理”主要是瀏覽器處理JS和CSS3特效需要的時(shí)間。
分析:Avada主題的長首頁使用了大量特效,有插件動(dòng)畫,有JS動(dòng)畫,有CSS3特效等等。這時(shí)候,要做決策,在特效與加載時(shí)間上作取舍,用戶體驗(yàn)的天平該往哪里傾斜?
解決方法:分享一下我的選擇:
1 首屏特效一定要保留,使用了Revolution Slider4.6.5,因?yàn)楣δ軓?qiáng)大,直接通過后臺(tái)可以創(chuàng)建Banner動(dòng)畫,而且比較成熟,在性能優(yōu)化和特效優(yōu)化方面比較到位。
2 二屏保留了一小部分特效。
3 下面幾屏的特效一律關(guān)閉,用Fusion Page Builder,手工一個(gè)個(gè)的將動(dòng)畫關(guān)掉,那些動(dòng)畫雖好看,不過太費(fèi)瀏覽器資源了,影響用戶體驗(yàn),在我的Retina MacBook 2013年終8G內(nèi)存筆記本上都有一些卡頓,更何況別的電腦了。
4 進(jìn)入Avada主題選項(xiàng),特別是Advanced里面,把用不著的都關(guān)掉,如下列表:
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(打勾)
經(jīng)過以上四個(gè)步驟的優(yōu)化,網(wǎng)站的首次打開速度基本上可以接受了。但是,Wordpress+商業(yè)主題不能與自己做的模板和CMS組合相提并論,強(qiáng)大的功能和效果與速度之間的平衡需要自己來把握。西安做網(wǎng)站推薦閱讀>>> Google AdSense發(fā)布wordpress站長插件,
方法/步驟5
第五部分,話外篇《給力的提速–PHP OPCode 緩存 APC》
發(fā)現(xiàn):W3 Total Cache的設(shè)置中,有個(gè)Cache選項(xiàng),默認(rèn)是Disk,適用于一般的虛擬機(jī)。下面還有更好的“Opcode:Alternative PHP Cache(APC)”這個(gè)選項(xiàng)默認(rèn)是灰的,需要VPS虛擬服務(wù)器才可以使用。
解決方法:具體打開方法大家自己搜索,PHP開啟OPCode APC后,W3TC配置中“Opcode:Alternative PHP Cache(APC)”這個(gè)選項(xiàng)為可選,選擇之后需要配置一下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
效果:
這個(gè)部分對(duì)訪問者訪問網(wǎng)站速度提升非常明顯,找外地的朋友幫我測試,首頁首次打開速度3-4秒,而且內(nèi)頁點(diǎn)擊后反應(yīng)2秒左右,這才是正常的網(wǎng)站啊。
相關(guān)文章:
-
插件介紹 wordpress程序網(wǎng)站在發(fā)布文章時(shí)可以給每一片文章添加與之相關(guān)的TAG標(biāo)簽,對(duì)于TAG標(biāo)簽可以生成很多頁面,增加搜索引擎對(duì)內(nèi)容的抓取量。 WP Auto Keywords插件就是一款能自動(dòng)給文章添加...
-
西安網(wǎng)站建設(shè)_西安做網(wǎng)站_西安網(wǎng)站制作——西安網(wǎng)絡(luò)公司...
-
從企業(yè)建站角度講,最便捷、最適合企業(yè)的建站系統(tǒng)莫過于自助建站系統(tǒng),市場上可供選擇的自助建站平臺(tái)也是一搜一大把。這些自助建站平臺(tái)采用傻瓜式建站風(fēng)格,容易上手,操作簡單方便...
-
關(guān)閉wordpress評(píng)論 進(jìn)入網(wǎng)頁Wordpress儀表盤,依此點(diǎn)擊設(shè)置 討論 取消勾選允許他人在新文章上發(fā)表評(píng)論 修改數(shù)據(jù)庫wordpress:將wp_posts表comment_status、ping_status值改為closed UPDATE `wp_posts` SET `comment_s...
-
現(xiàn)在想做一個(gè)網(wǎng)站成本很低了,買個(gè)域名,買個(gè)幾十塊空間,弄個(gè)網(wǎng)站建設(shè)程序就可以開始你的玩耍了,如果你還想找成本更低的,可以看下面的分享。 如何創(chuàng)建網(wǎng)站一直都是很多朋友想要知...
-
商城網(wǎng)站建設(shè)如何將吸引力提升 在信息如此豐富多樣的今天,商城網(wǎng)站建設(shè)如何才能夠在眾多的同類當(dāng)中脫穎而出,獲得大眾的吸引和青睞呢?這其實(shí)是相關(guān)網(wǎng)站建設(shè)人員一直在思考的一個(gè)問...
-
現(xiàn)在越來越多的企業(yè)重視網(wǎng)站的運(yùn)營推廣,那怎樣推廣效果更好呢?西安蟠龍網(wǎng)絡(luò)小編認(rèn)為沒用永恒不變得,而且要根據(jù)企業(yè)的具體情況選擇合適的推廣方式才是最好的,如果你又運(yùn)營推廣的...
-
隨著互聯(lián)網(wǎng)的發(fā)展,人們每時(shí)每刻已經(jīng)離不開網(wǎng)絡(luò),而網(wǎng)站是網(wǎng)絡(luò)的基本組成部分,可以這么說,網(wǎng)絡(luò)是由各種各樣的網(wǎng)站組成的,當(dāng)下,網(wǎng)站是每個(gè)企業(yè)的標(biāo)配,很多個(gè)人都有自己的網(wǎng)站,...
-
網(wǎng)站現(xiàn)在是一個(gè)企業(yè)的標(biāo)配,很多沒有網(wǎng)站的企業(yè)不清楚網(wǎng)站對(duì)企業(yè)有什么作用,那么今天西安蟠龍小編總結(jié)一下網(wǎng)站對(duì)企業(yè)都有哪些好處,希望看完之后您對(duì)網(wǎng)站有更深一層的認(rèn)識(shí)。 一、低...
-
現(xiàn)在網(wǎng)站對(duì)一個(gè)企業(yè)越來越重要了,網(wǎng)站不僅是一個(gè)公司必備的名片,而且有利于提升企業(yè)的品牌形象,低成本擴(kuò)大公司銷售的一個(gè)重要渠道,可以將公司的業(yè)務(wù)和產(chǎn)品推向全國,那么公司想...