Google +1按鈕速度的最佳化

最近工作達人又龜速了,前幾天中華電信的網路頻寬才剛從十二M/四M提升到二十M/五M,現在怎麼還是龜呢?只好再從WordPress的最佳化下手,當然第一招先從網站大小著手,因為網頁內容中常包含有大量的圖片、Flash 或是 Javascript 內容,因此需要下載大量的檔案導致慢速,建議保持一個頁面的大小在 100KB以下,可以的話最好在 50KB以內,這這…有點天方夜譚了,所以我們跑了一下GTmetrix看看:

環境是這樣:

Test Server Region: Vancouver, Canada
Using: Firefox (Desktop) 14.0.1, Page Speed 1.12.16, YSlow 3.1.6

2013-05-10_133754

Page Speed做得還不錯,有A等級,但是YSlow卻是D等級,這早已是不爭的事實了,而且很多是來自他站的連結或圖片,根本幾乎無從改變,除非就是不連,但是不連可能就得跟賺錢的廣告命脈做切割了,還真左右為難啊,不過我們還是看看到底為什麼會是D了。

2013-05-10_135258

Add Expires headers被列為頭號敵人,點進去報告說『There are 87 static components without a far-future expiration date.』,87筆要一一解決是個大工程啊,想想也不是一朝一夕就可以解決完的,先看看第一項吧,我的網站這個http://apis.google.com/js/plusone.js使用竟然是降速的第一要因,所以劉子就查了一下plusone.js的問題,查到了這篇Optimizing the Google +1 button for speed,ㄚ琪照著他的第一個方法測試,雖然他的問題還是掛在YSlow的問題上,但是就速度來說因為已經可以從cache讀取相形之下速度真的快了,前後的照片我們比較一下吧:

2013-05-09_111453

這是2013年5月9日, 上午 11:14:57未經改善的plusone.js,這裡問題就是使用http://apis.google.com/js/plusone.js,我們就開始偵查了為什麼工作達人上有使用這樣的檔案,追蹤到了Sociable這個外掛的sociable.php裡的sociable_init_async函式有這樣一行:

echo “</script><script type=’text/javascript’ src=’http://apis.google.com/js/plusone.js’></script>”;

我們多加了一個s:

echo “</script><script type=’text/javascript’ src=’https://apis.google.com/js/plusone.js’></script>”;

之後進行測試:

2013-05-09_152610

2013年5月9日, 下午 03:26:20 看看他的Size已經可以from cache了。

再反覆看個幾次:

2013-05-09_154021

2013-05-09_154314

速度上有差異,但是這一次沒有from cache了。

2013-05-09_154916 2013-05-09_154314

這一次的速度差距更大,從6.56s降到704ms

總之,這個Save a step, Use Https這個法子是可行。

而Don’t load the script on Mobile devices、Load the plusone.js script asynchronously、Host the plusone.js file yourself等方法,我想問題是出在Sociable這個外掛,所以也不能要求所有的Wordpress的使用者都改成這樣的方式吧,先省略了,等外掛作者想到再說。

感謝你看到這裡,很快就可以離開了,但最好的獎勵行動就是按一下幫我分享或留言,感恩喔~

點我分享到Facebook

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *