WordPress減肥記:壓縮JavaScript檔的大小

最近幾個月虛擬主機的流量一直破表,2009年11日時使用量91%時,趕緊把放在網站裡的圖檔都改到外部網站,好不容易讓流量降到72%,沒想到最近幾個月都超出每個月30GB的流量限制。因為智邦是採用超量自動扣除可用天數的作法,因此沒有無法連線的壓力,拖到今天開始著手減肥,首先列出佔用頻寬的「大用戶」出來。

▼最近幾個月的流量統計

volume

我由網頁紀錄分析列出昨天的要求(網頁Request)報表,發覺WordPress使用的幾個JavaScript檔吃掉不少流量:/wp-includes/js/jquery/jquery.jsp佔了傳輸量的16%,/wp-includes/js/prototype.js則佔了約12%。好像從WordPress 2.8開始,WordPress就使用了這幾個常見的JavaScript Framework,如果把這些.js檔拿掉的話,又會造成系統運作異常(例如刪掉prototype.js的話,後台的Widgets設定就會完全無法操作),更糟的是像prototype.js使用的是完整的原始檔,一個檔就是125K!

▼網頁要求統計報表

request-1 request-2

減肥的第一步是把prototype.js壓縮變小,由這裡下載YUI Compressor來壓縮,由125K降成71K,把縮小後的prototype.min.js複製回WordPress的wp-includes/js資料夾,檔名仍為prototype.js:

cd build
rem copy prototype.js to yuicompressor-2.4.2/build
java -jar yuicompressor-2.4.2.jar prototype.js > prototype.min.js
rem copy prototype.min.js YOUR_WORDPRESS\wp-includes\js\prototype.js

接著再把WordPress使用的內建jquery.js檔換成Google CDN的檔案:

  • 編輯wp-includes/scripts-loader.php
  • 修改jquery.js檔案:
    //$scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2');
    $scripts->add( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
    
  • 將修改儲存起來並更新回虛擬主機

先修改這兩個,觀察明天的流量,希望流量會降低些。

##

您可能也會有興趣的類似文章

6 則留言 »WordPress減肥記:壓縮JavaScript檔的大小

  • m.m. Windows XP Firefox 3.6.6

    謝謝分享!!
    不過在弟的 WP3.0 修改用GOOGLE 的 JQUERY 後..
    發現原 WP PANEL / POST TAGS 會出現無法使用的狀況!!
    以上..

    • 簡睿 Windows other version Firefox 3.6.6

      WordPress 3好像使用jQuery 1.4.2了? 文中範例使用的是1.3.2,改成1.4.2應該是OK的。本網站就是WordPress 3,一切正常哩。

      • m.m. Windows XP Firefox 3.5.10

        ㄟ… 這版號我也有改哩.. ><
        莫非是其它的 PLUGIN 沖到了..
        回家再試試好了.. 謝謝!!

        • 簡睿 Windows other version Firefox 3.6.6

          @m.m.: 我又測試了一次,原先網站裡的jquery.js傳輸量是27K,改用Google的jquery.min.js後,傳輸量變成24K,雖然只有區區3K,不過也是積少成多。

  • 哎 和我的一样 整天想着如何把大文件转移出去。你这边的jquery.js 完全可以改成引用外部网站的jquery.js.
    prototype.js暂时还没找到哪调用的。所以今天上网搜 搜到了你的网站。哎。同是天涯沦落人啊。
    我网站里的图片啊 css,js文件 swf文件全部引用的外部网站的。

填寫回應

 

 

 

您可使用這些HTML標籤

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

隨機文章

  1. 席捲企業的新勢力!Blog Inc. (2005/07 e天下雜誌) 
  2. 用Startup Delayer加速Windows的開機速度 (2)
  3. [OOo] 表格製作的快速鍵巨集 
  4. 選後感言彙總:選舉落幕 穩定和平獲得勝選 
  5. 免費又實用的秀圖軟體:ALSee (2)
  6. Minimize FireFox & Thunderbird 
  7. 台灣的鬱金香園 ..真的很漂亮耶 
  8. 移動噗浪的回應時間位置,使能更清楚看到回應時間[修訂] (11)
  9. 突然接到一封自我推薦的信: mxie 
  10. Secrets of Firefox 1.0 (1)

歷史熱門文章

  1. 如何手動輸入Plurk的表情圖示? (353,017 點擊/2008-09-29)
  2. 簡單放大Plurk輸入區的方法[修訂] (86,921 點擊/2008-09-29)
  3. 啟用&關閉中華電信ZyXEL P874的無線網路連線功能的步驟[修訂] (83,900 點擊/2011-06-01)
  4. Plurk CSS樣式自訂修改全攻略 (83,085 點擊/2009-07-04)
  5. 網路升級光世代50M/3M與設定ZyXEL P874 (53,235 點擊/2011-05-28)
  6. 輕鬆學會彈指神功-揭露AutoHotkey絕技 (43,138 點擊/2008-04-10)
  7. iPad新手入門技巧 (40,391 點擊/2011-02-05)
  8. 分享世博台灣館主題曲『台灣的心跳聲』MV(附歌詞+下載連結+新歌詞) (38,140 點擊/2010-04-27)
  9. 把HTC Touch HD操作介面換成Spb Mobile Shell,美觀又便利! (37,950 點擊/2009-02-18)
  10. 另一套適用手機的影片轉檔工具:WinAVI 3GP/MP4/PSP/iPod Video Converter (35,913 點擊/2009-04-18)