使用國內阿里雲主機 (配置不算低),網站大部分都是 AVADA 官方導入數據,只是做了一些漢化,並未添加太多數據。但是網站打開速度,特別是首次打開速度很不盡如人意。經過數日研究,一輪又一輪的探索,多方面查證,終有所獲。與大家分享,希望能幫到為此困擾的朋友們。
第一部分:谷歌的問題
現象:
對於 Wordpress 初學者來説,不論是 Wordpres 網站前台還是管理後台,操作反應都是特別特別慢,一個操作反應要等上 20 秒。
原因:
這是由於 Wordpress 系統默認使用谷歌字體,在國內谷歌域名被屏蔽,所以導致操作反應慢。對於很多商業主題默認使用了谷歌字體、谷歌 ajax 庫、谷歌地圖等谷歌服務,所以導致網站前台訪問速度慢。
原理:
googleapis.com 被屏蔽,但谷歌這些庫的確是好東西,國內 360 給予鏡像,地址是 useso.com,內容與谷歌的一樣,國內速度快。
解決方法:
對於後台:找到 Wordpress 這個文件 \wp-includes\script-loader.php,找到:googlefonts.admincdn.com,全部替換成:fonts.useso.com 。或者乾脆把 「googleapis」 替換成 「useso」 。
對於前台:近期測試了很多替換插件,網上推薦的大部分已經不管用了,後來發現這個最有用,而且更新比較勤:「Useso take over Google」,近幾個月測試只是這個最好用。
第二部分:首頁加載總容量
現象:
經過以上的操作後,後台操作速度正常了,但 AVADA 首頁打開要等很久才能顯示,對比以前做過的網站、目前流行網站發現,慢與客户端網速無關,與網站服務器和帶寬無關,與服務器環境配置無關。通過 Safari 瀏覽器內置工具觀察網站首頁加載的總容量,當時首頁總容量需要 4-5MB,經過一番優化後降低到 2.26MB 。
對比:
以前用織夢 DEDECMS 手工做模板的網站,全部加載竟然只需要 701KB 。再看看新浪網站首頁全部加載需要 4.29MB,蘋果中國網站首頁全部加載 3.18MB,錘子手機網站首頁全部加載 3.61MB,百度首頁全部加載 397KB 。
分析:
首頁加載的主要內容是:index.html 文件,CSS 文件,JS 文件,背景圖片,用户上傳的圖片,視頻等。對於 Wordpress 商業主題來説,降低首頁加載容量的有效手段是圖片優化。
解決方法:
另外發現 Avada 主題官方導入的圖片都很小,比如 2000px 寬度的全屏大背景圖只有 30KB,但是用户上傳的圖片如果優化不夠 (或者為了清晰度高保真),一張不大的圖可能幾百 KB 。 AVADA 有一個很長的首頁,內容豐富,如果用户的圖片沒有經過優化,整個首頁的下載量會很大;網速不好的訪問者加載速度會慢。用户上傳圖片前一定要經過優化,在 PHOTOSHOP 裏優化,建議一張圖片 20-30KB 。
第三部分:啓用緩存與加速
經過以上的優化調整,發現加載速度好多了,不過距離我的要求還有些距離。於是我想到的是增加 Wordpress 緩存和 css 與 js 合併,降低數據庫連接數量,降低 js 和 css 響應次數。
原理:
Wordpress 雖然可以啓用 rewrite,但並不是生成真正的緩存文件,每次打開頁面需要打開數據庫。
解決思路與方法:
Wordpress 的緩存插件有很多,以前 achair.cn 這個網站用的知名插件 WP Super Cache,感覺效果還可以,不過這個插件在 Avada 主題上我沒搞定,估計.htaccess 有問題,個別瀏覽器會打不開首頁。到 Avada 官方技術支持論壇查詢後發現,Avada 官方演示 DEMO 網站用的是 W3 Total Cache 插件,並給出 W3TC 的配置文件,我們只需要安裝好插件並導入配置文件即可。
另外,網上有很多關於這兩個插件的對比分析,都説 W3TC 要好一些。
關於 JS 與 CSS 多文件合併,以前用的也是 Wordpress 的商業主題,用過此類合併插件,不過那些插件在 Avada 上又變的不好使了,還好 W3TC 有合併 JS 與 CSS 的功能。
第四部分:關閉 Avada 動畫、特效
經過以上三步操作,感覺已經把能優化的都優化了。不過實際上用起來還是感覺不夠快,找外地朋友測試,首次打開有時需要 10 秒左右,有時需要 22 秒。
原因:
經過多方查找,用火狐 Speed Page 插件,發現 「下載時間」 並不長,問題出在 「處理時間」,有時要處理 20 幾秒。這個 「處理」 主要是瀏覽器處理 JS 和 CSS3 特效需要的時間。
分析:
Avada 主題的長首頁使用了大量特效,有插件動畫,有 JS 動畫,有 CSS3 特效等等。這時候,要做決策,在特效與加載時間上作取捨,用户體驗的天平該往哪裏傾斜?
解決方法:
分享一下我的選擇:
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 組合相提並論,強大的功能和效果與速度之間的平衡需要自己來把握。
第五部分,話外篇 《給力的提速–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 plaincopy
apc.enabled = 1
apc.cache_by_default = on
apc.shm_segments = 1
apc.shm_size = 128
apc.ttl = 7200
apc.user_ttl = 7200
apc.num_files_hint = 2048
apc.write_lock = On
apc.gc_ttl = 3600
apc.ttl= 7200
apc.enable_cli=1
apc.enabled = 1
3. 重啓 apache
效果:
這個部分對訪問者訪問網站速度提升非常
明顯,找外地的朋友幫我測試,首頁首次打開速度 3-4 秒,而且內頁點擊後反應 2 秒左右,這才是正常的網站啊。
測試環境與工具:
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
火狐插件 Revolution Slider
MacOS X10.10 Safari8.0.2
火狐插件 app.telemetry Page Speed Monitor 14.0.7
火狐插件 YSlow3.1.8
在線 Google PageSpeed 和 Yahoo YSlow 綜合工具:http://gtmetrix.com