前臺頁面優化全攻略（四）

　經過前幾篇文章，你應該已經掌握了不少優化網站的方法。如今你的網站加載速度已經很快了，可是你必須持續的監控你的網站，瞭解它的大小變化，要否則一段時間過去以後，它可能又成爲了一個胖子。

　　現在每一個頁面平均已經達到1.7M，每一年增加大概32%。你能夠經過如下幾個工具來查看你的網站是否是又在暴飲暴食，並且它們都是免費的。

　　1. Pingdom

　　Pingdom是我喜歡的一個在線測試工具。它會揭露出因此你想知道的細節，你能夠一清二楚的看到網站的現狀：重量、加載速度、代碼分析、性能評分、開發者建議，它還提供了一個歷史的時間軸幫你查看網站瘦身的成果。若是你只想用一個工具完成全部的檢測，Pingdom再合適不過了。

　　2. Firefox Web Developer Add-on

　　Web Developer 插件 是火狐的Web開發調試插件 以工具欄的形式對網頁的(X)HTML、腳本、多媒體、CSS、緩存、圖象等多方面的實用工具。使咱們能輕易的得到網頁的更多信息，使咱們進一步的瞭解當前所瀏覽的網頁。

　　在Web Developer插件工具欄中，主要由如下幾個部分組成：Disable、Cookies、CSS、Forms、Images、Information、Miscellaneous、Outline、Resize、Tools、View Source和Options。

　　3. GTmetrix

　　GTmetrix 使用Google的PageSpeed Insights  和 雅虎的 YSlow 來對你的網站進行評級，而且會提供可行性建議來幫助你改善你的網站性能。

　　通過分析以後，你就會獲得一份詳細的測試報告，網站同時還提供了PDF格式的報告下載，很是貼心。若是你運行的是WordPress，那麼還有針對WordPress的優化建議。只要你在該網站註冊一個帳號，就能夠享受免費的定時監測服務。

　　4. Google PageSpeed Insights

　　谷歌也出了一款性能優化工具：PageSpeed Insights。其目的是幫助站長優化頁面，從而可以帶來最佳的渲染性能，尤爲實針對移動頁面。

　　根據谷歌Analytics的數據顯示，現現在移動頁面平均加載時間都須要超過7秒以上，雖然在移動平臺上已經獲得很大改善，但還需改進。

　　PageSpeed Insights的使用方法很簡單，進入官網，而後輸入你的網站URL，就會開始分析。它會幫你啓用壓縮（前臺頁面優化全攻略1.1），使用瀏覽器緩存，清除首屏內容中阻止呈現的 JavaScript 和 CSS，縮短服務器響應時間， 優化圖片， 壓縮 JavaScript，壓縮 HTML等。你會驚奇的發現，它會幫咱們解決不少本系列以前提到到過的優化方案。

　　5. YSlow

　　YSlow是Yahoo發佈的一款基於FireFox的插件。安裝YSlow必須首先先安裝 Firebug，而後下載YSlow，再對其安裝。

　　YSlow能夠對網站的頁面進行分析，並告訴你爲了提升網站性能，如何基於某些規則而進行優化。YSlow能夠分析任何網站，併爲每個規則產生一個總體報告，若是頁面能夠進行優化，則YSlow會列出具體的修改意見。

　　YSlow有23條規則：

　　（1. 減小HTTP請求次數

　　（2. 使用CDN

　　（3. 避免空的src和href

　　（4. 爲文件頭指定Expires

　　（5. 使用gzip壓縮內容

　　（6. 把CSS放到頂部

　　（7. 把JS放到底部

　　（8. 避免使用CSS表達式

　　（9. 將CSS和JS放到外部文件中

　　（10. 權衡DNS查找次數

　　（11. 精簡CSS和JS

　　（12. 避免跳轉，同域避免反斜槓 「/」 的跳轉，跨域使用Alias或者mod_rewirte創建CNAME

　　（13. 刪除重複的JS和CSS

　　（14. 配置ETags

　　（15. 可緩存的AJAX

　　（16. 使用GET來完成AJAX請求

　　（17. 減小DOM元素數量

　　（18. 避免404

　　（19. 減小Cookie的大小

　　（20. 使用無cookie的域

　　（21. 不要使用濾鏡

　　（22. 不要在HTML中縮放圖片

　　（23. 縮小favicon.ico並緩存

　　6. Browser Developer Consoles

　　若是你不想使用其它平臺提供的功能，想要本身一步步地分析，Firebug、Chrome Inspector和其它瀏覽器的開發者工具均可以幫助你優化， 這些工具都在一步步地強大起來。

　　7. PageScoring Website Speed Test

　　若是你想要一個快速而又簡單的工具，Website Speed Test就是很好的選擇，它有一個很好的名字，X如其名。它會展現出全部頁面的加載速度和頁面大小，下載時間爲每一個單獨的文件,能夠幫你方便的隔離問題。

　　8. Uptrends Speed Test

　　和其它的優化工具同樣，它提供全頁面測試工具，幫你測試加載時間，以及完整的HTML頁面(圖片 , frames, CSS style sheets, Flash objects, RSS feeds  和 Javascript 文件)的速度。

　　9. Page Speed Tool

　　Page Speed Tool是一個外觀精美，強調文件大小，資源和下載速度的工具。雖然加載時間的測試只計算爲HTML源代碼不是全部文件，可是經過友好的界面，你依然能夠獲得一些完整的數據。

　　10. Web Page Analyzer

　　Web Page Analyzer 幫助用戶計算網頁大小、組成和下載的時間，並可給予測試的結果給出優化的建議。設置能夠模擬不一樣的網速下的網站打開時間，目標是讓你的頁面回到14.4K。

　　總結

　　到這裏這個頁面優化的系列就所有結束了，最後又列舉出這麼多工具，有選擇恐懼症的人真是對不住了，若是不知道哪一個好用，推薦你用第四個吧，也就是Google的PageSpeed Insights，由於它提供的功能基本涵蓋了這幾章我列舉出的優化方案。最後但願這四篇文章會對你有所幫助，程序員都是好人，Best wishes~