八大類提升網頁效能的免費輔助設計與測試工具

作者 : Fred F.M. Wang (F.W.知識瑣記) 日期: 2011/11/04

第一類 網頁元件下載效率分析工具

1.1  HttpWatch 顯示網頁元件下載效率,目前有IE與Firefox的Plug-ins(Free)

1.2 Firebug 顯示每一網頁元件的大小與下載效率,目前僅有Firefox的Plug-ins(Free)

1.3 WebPageTest.org 網頁效能與最佳化分析工具,限外部網站(Free)

第二類 網頁設計最佳化分析工具
2.1 WebPageTest.org 網頁效能與最佳化分析工具,限外部網站(Free)

2.2 Google Page Speed (Free)
   a."根據Google網頁最佳化設計原則,進行網頁的分析,評分與建議
   b.外部網站可以直接使用Online Service
   c.內部網站則可下載使用Plug-in(只有Firefox與Chrome plug-ins)"

2.3 Yahoo Yslow 根據Yahoo網頁最佳化設計原則,進行網頁的分析,評分與建議,提供Firefox, Chrome,Opera, Safari等Plug-ins(Free)

第三類 圖檔壓縮與最佳化工具

3,1 Imagemagick 各類型圖檔轉換,壓縮,調整與特效工具(Open Source)

3.2 PNGCrush PNG檔最佳化工具(Open Source)

3.3 Jpegtran,gifsicle JPEG, GIF檔最佳化工具(Free)

3.4 YahooSmush.it Yahoo提供的圖檔最佳化工具(Free)

3.5 GIMP 影像處理工具(Open Source)

3.6 Paint.NET 影像與數位相片編輯工具(Open Source)

第四類 CSS Sprites產生器

CSS sprites技巧可以有效降低圖片文件的 HTTP連接請求數。將多個圖片以一定間距合併為一個圖片文件。頁面中使用這些圖片的元素將利用 background-position 這一 CSS 屬性來顯示合併圖片中的指定位置。

4.1 CSS 圖片合併產生器 : 這個工具可為您自動產生 CSS 圖片合併。 只需傳送一個內含2個以上圖片文件 (GIF, PNG or JPG) 的 ZIP 壓縮檔，就會為您自動產生合併後的圖片與 CSS 程式碼。 Open Source

4.2 Online CSS Sprites Generator 同上(Free)

4.3 SpriteGen 同上(Free)

第五類 Inline Image產生工具

使用data: URI scheme 把圖片數據嵌入頁面，雖然會增加Html檔的大小，但是若將內聯圖片合併到被緩存的樣式表檔案中則能既減少HTTP請求數又不會增加頁面大小。

5.1 DataURL.net DataURL Maker 只要把圖檔上傳，就會產生Inline image的資料檔(Free)

5.2 WebSemantics DataURL Convertor 同上(Free)

第六類 網頁縮小化工具(Minify)
從代碼中刪除不必要的字母，減少文件體積從而提高下載速度。

6.1 YUI Compression CSS, Javascript壓縮工具 Free

6.2 Alentum Absolute HTML Compressor 免費下載的HTML壓縮軟體(Free)

6.3 Dean Edwards' Packer 一個簡單的線上 Javascript 壓縮工具(Free)

6.4 Text Fixer HTML Compressor 一個簡單的線上HTML壓縮工具(Free)

6.5 HTMLCompressor.com 一個線上HTML,Javascript,CSS壓縮工具(Free)

6.6 "Javascript Compressor.com,

6.7 JSCompress.com" 一個線上Javascript壓縮工具(Free)

6.8 CSSCompressor.com 一個線上CSS壓縮工具(Free)

第七類 網頁程式模糊處理(obfuscation)工具

透過程式縮小化,變數無意義化,字串16進制化等方式進行網頁程式的糢糊化，美國的前十大網站，縮減獲得了21%的體積減小而程式碼模糊處理達到了25%。除了減量外還具有保護程式碼的功效

7.1 SearchBliss HTML Scrambler 線上HTML模糊處理工具(Free)

7.2 Jasob Obfuscation Tool 保護與最佳化Javascript,CSS,Javascript碼 Pay(有Fee trial)

7.3 javascriptobfuscator.com 線上Javascript模糊處理工具(Free)

第八類 Javascript Framework(Utilities)

透過Javascript Framework提供的Utilities提升Javascript程式效率

8.1 YUI Lazy Load工具，如YUI image loader(Free)

8.2 jQuery Lazy Load工具，如jQuery Lazy loader(Free)

8.3 Mootools Lazy Load工具，如Mootools LazyLoad(Free)

8.4 Prototype.js Lazy Load工具，如Prototype.js lazierLoad(Free)

相關文章
1. 免費的網站效能分析與測試工具與網頁效能最佳化分析工具介紹
2. 如何提升網站與網頁效能參考資訊整理