提升網站的Javascript速度

原始發布日期：2012年5月10日

這幾日在Google Adsense帳號上看到「請縮小您網站上的 JavaScript 資源大小」的建議，建議中這麼說：

我們分析您網站上廣告刊登量最高的幾個網頁後，發現「網頁速度」這項問題對部分使用者造成嚴重不便。您網站上瀏覽量高的網頁參照了過大的 JavaScript 檔案；將這些檔案中的註解去掉並移除空白有助於解決問題，這個方法稱為最小化。

＞＞　Google提供的詳細說明


看到這個建議之後，二話不說，馬上採取行動去進行Javascript的瘦身行動與加速任務。



Javascript檔的瘦身

Google Adsense的建議裡提供了三種方法：Closure Compiler、JSMin 和 YUI Compressor。

研讀之後先試了Closure Compiler，結果遵照Google的說明，沒做出來。

於是再試了JSMin，這次學聰明，直接Google一下，結果找到保哥保大人的這篇文章：

＞＞　上線前用 JSMin 壓縮你的 JavaScript 檔案


簡單易懂

於是依著保哥的指示馬上就把自己寫的Javascript給弄小了許多，也正式上線，運作正常。

在閱讀過的資料中大概知道，JavaScript檔案壓縮的基本原理其實還頗為簡單，Google如此說明：

「縮小」程式碼表示去除不必要的位元組，例如多餘的空白、分行符號和行首縮排。

所以有些事可以自己手動來做。例如註解文字，刪除這些文字應該很簡單。

但除此之外的，手動去做怕會刪到一些不該刪的東西，所以還是由諸如JSmin的軟體工具來代勞比較保險。

而對於不是自己撰寫的，而是取用外面開放源碼的現成Javascript，例如我所用的Thickbox，則不需自行壓Javascript檔，而是記得改用壓縮版的就好〔當然，如果沒有的提供話就可自己依上面的步驟自己壓縮〕。

如thickbox這個光箱功能，一般版的檔案為thickbox.js ，大小為11.6K，而壓縮版的thickbox-compressed.js則為5.85K，只有原有的一半大小。而其JQuery函式庫一般版為235K，壓縮版只有96.5K。

更快的Javascript引用來源

另一個可以加速Javascript執行的方法則是利用外部頻寬速度更好的代管來源，最有名的就是Google CDN。 〔除非你自認自己的網站比谷哥快〕

Google的Libraries API 針對一些最為流行的開放源碼JavaScript函式庫提供一個內容散播網路，裡面也包含了我上面那個Thickbox功能所需要的JQuery。引用方法很簡單，把原本Javascript引用來源的網址換成Google的就可以了。

像我原本是把JQuery Library放在自己的網站下，所以引用的程式碼是這樣寫的：



現在則改成：




而如果你的網站主要讀者來自中國，怕谷哥的被牆，那麼或許可考慮微軟的CDN。

Drupal網站的優化

許多架站系統也都會針對CSS、Javascript提供優化功能，也請記得去做相關設定。

這裡以Drupal為例。

提高Drupal網站速度的方法與措施相當多，但是最基本、入門，與簡單的，就是到管理後台做效能的設定。

到了「效能」設定裡，除了記得啟用快取功能之外，也需記得到效能調整頁面的最下方「頻寬最佳化」區，勾選「壓縮快取頁面」、「整合並壓縮CSS檔案」，以及「整合並壓縮JavaScript檔案」等三個選項。

而如果有用到View，View裡的快取也記得啟用。

不過在做這些設定時要注意，Drupal裡的這些設定，特別是整合並壓縮JavaScript，其次是CSS的整合與壓縮，偶爾會有與某些模組相衝的情況，特別是同樣使用到JavaScript的模組－－像是Google Map就可能很容易遇到這種情況。



最後要說的是，許多方面我只是個「大肉腳」，這裡只想把開站以來所用過的一些知識及資料整理出來與入門者分享。本篇內容也歡迎高手幫忙補充或指正。