一個超重的網站會對你產生如下影響：
- 1. 網站程式碼越多，使用者下載的就越多，載入速度就會越慢。在這個地球上，並不是每個人都能享受20M的寬頻，每一個開發者心裡都很清楚，使用者不願意等。
- 2. 眾所周知，移動網際網路發展迅速，對於2G網路來說，載入1.7M的頁面甚至需要一分鐘時間。
- 3. 影響搜尋引擎抓取速度將會對網站排名造成很大影響。
- 4. 對於開發者來說，程式碼量越大，就越不容易更新和維護。
我猜測今年頁面平均程式碼量會減小，希望事實如我所願。如今已經有很多人開始關注這個問題，並出現了很多優化的工具，而且這些技術都非常容易上手，不需要花太多時間，也不需要重新開發。
在本文中，我會給大家一些建議。前三個建議實際上不能給網頁減肥，但它們仍能有效的加快網頁載入速度。
1. 用GZIP格式壓縮
gzip是GNUzip的縮寫，它是一個GNU自由軟體的檔案壓縮程式。它是Jean-loupGailly和MarkAdler一起開發的。第一次公開發布版本是1992年10月31日釋出的版本0.1，1993年2月釋出了版本1.0。
我們在Linux中經常會用到字尾為.gz的檔案，它們就是GZIP格式的。現今已經成為Internet 上使用非常普遍的一種資料壓縮格式，或者說一種檔案格式。
HTTP協議上的GZIP編碼是一種用來改進WEB應用程式效能的技術。大流量的WEB站點常常使用GZIP壓縮技術來讓使用者感受更快的速度。這一般是指WWW伺服器中安裝的一個功能，當有人來訪問這個伺服器中的網站時，伺服器中的這個功能就將網頁內容壓縮後傳輸到來訪的電腦瀏覽器中顯示出來.一般對純文字內容可壓縮到原大小的40%.這樣傳輸就快了，效果就是你點選網址後會很快的顯示出來.當然這也會增加伺服器的負載. 一般伺服器中都安裝有這個功能模組的。
根據W3C組織調查，大部分的網站都沒有啟用壓縮功能。
2. 支援瀏覽器快取
如果瀏覽器支援快取，我們就不用重複下載網頁資源。最簡單的設定快取方法是在響應頭中新增相應的內容，包括：Expires header，Last-Modified等。
你可以可以通過配置伺服器來自動新增這些屬性。比如你在Apache伺服器中配置快取所有的照片一個月:
<IfModule mod_expires.c> ExpiresActive On <FilesMatch "\.(jpg|jpeg|png|gif|svg)$"> ExpiresDefault "access plus 1 month" </FilesMatch> </IfModule>3. 使用內容分發網路 (CDN)
CDN的全稱是Content Delivery Network，即內容分發網路。其目的是通過在現有的Internet中增加一層新的網路架構，將網站的內容釋出到最接近使用者的網路“邊緣”，使使用者可以就近取得所需的內容，提高使用者訪問網站的響應速度。CDN有別於映象，因為它比映象更智慧，或者可以做這樣一個比 喻：CDN=更智慧的映象+快取+流量導流。因而，CDN可以明顯提高Internet網路中資訊流動的效率。從技術上全面解決由於網路頻寬小、使用者訪問量大、網點分佈不均等問題，提高使用者訪問網站的響應速度。
為更好地理解CDN，讓我們看一下CDN的工作流程。當使用者訪問已經加入CDN服務的網站時，首先通過DNS重定向技術確定最接近使用者的最佳CDN節點，同時將使用者的請求指向該節點。當使用者的請求到達指定節點時，CDN的伺服器（節點上的快取記憶體）負責將使用者請求的內容提供給使用者。具體流程為: 使用者在自己的瀏覽器中輸入要訪問的網站的域名，瀏覽器向本地DNS請求對該域名的解析，本地DNS將請求發到網站的主DNS，主DNS根據一系列的策略確定當時最適當的CDN節點，並將解析的結果（IP地址）發給使用者，使用者向給定的CDN節點請求相——應網站的內容。
以上三個方法可以有效地加快頁面的訪問速度，現在我們將對你的程式碼進行診斷，幫助我們給頁面減肥。
4. 刪除不需要的資源
當你不再需要一個元件的時候，你應該刪掉它的CSS和JavaScript程式碼，如果這些程式碼都單獨放在一個檔案中，那刪掉它們也不是難事，但如果已經沒有用的程式碼和其它程式碼在一個檔案中，那你肯定要費不少精力去刪掉它們。這個時候你就需要使用第三方的工具來幫你一鍵解決，比如JSLint, Dust-Me Selectors, CSS Usage, unused-css.com 或是像grunt-uncss一樣的構建工具。
5. 通用和最小化CSS
理想情況下，需要一個單獨的CSS檔案，讓每個頁面都呼叫這一個佈局，當然，如果你想要支援老版本的IE，你就得多弄一個CSS檔案。當你把它們構建到伺服器上之前，你應該把程式碼間所有不必要的格式都刪掉。
有很多預處理工具都可以幫你解決這件麻煩事，比如Sass, LESS 和Stylus。
有一些方法可以幫助你直接合並多個CSS檔案，在Windows上：
copy file1.css+file2.css file.css在 Mac或Linux上：
cat file1.css file2.css > file.css你可以把得到的CSS檔案再經過線上的CSS壓縮工具刪除格式化，cssminifier.com, CSS Compressor & Minifier 和CSS Compressor都是很不錯的工具。
最後，在head標籤中載入所有的CSS，這樣瀏覽器就知道你的頁面樣式不用多次重繪了。
6. 通用和最小化的JavaScript
平均每個頁面載入了18個javascript檔案，雖然把像jQuery這樣的庫檔案單獨分開非常實用，但是你自己的JavaScript程式碼應該保持通用和最小化。同樣很多第三方的工具可以幫你解決這樣事情，比如 YUI Compressor, Closure Compiler 和我最喜歡用的 The JavaScript CompressorRater。簡化的JavaScript程式碼會加快網頁的訪問速度，減少HTTP請求次數。
最後，最好在HTML的body標籤後放置JavaScript引用程式碼，這樣能保證JavaScript程式碼不影響到其它內容的載入。
7. 使用正確的圖片路徑
載入錯誤的圖片格式會對你的網頁造成很大影響，一般來說選取圖片我們應用遵循如下原則：
- 1.照片使用JPG格式。
- 2.其它所有的圖片都使用PNG格式。
8. 調整大圖的大小
目前智慧機所拍出的照片越來越大，你不可能把原照片直接展示在頁面中。普通的編輯器都會直接上傳原圖，這樣會讓頁面的載入速度慢到另一個級別。在正常的照片處理中，一般都沒有必要給使用者高質量的圖片展示。所以你需要一個自動調整圖片大小的工具。
需要注意的是，圖片的尺寸是不能超過容量的大小的，這樣一來頁面載入了全圖，卻無法展示出來。現在照片的尺寸基本上都超過電腦螢幕的尺寸了。
圖片的大小在網頁總大小中佔很大的比重，圖片減小50%會導致整體頁面大小減少75%，所以你應該認真解決一下圖片的載入。
9. 進一步壓縮圖片
僅僅調優圖片的大小是不夠的，你應該通過第三方工具對圖片進行分析，進一步壓縮圖片。比較好用的工具有OptiPNG, PNGOUT, jpegtran 和jpegoptim。這些工具大都能安裝成獨立的工具或是整合到開發過程中，另外像Smush這樣的工具，還可以直接在雲端處理。
10. 刪除不必要的字型
Web fonts已經徹底改變了字型的設計，它減少了很多不必要的文字。然而，目前的字型仍然會給你的網頁帶來多餘的位元組。如果你使用超過兩種字型，這就已經開始對效能造成影響了。
結論
我相信大部分網站都可以通過以上的優化減小大概30%-50%的重量，但是身為一個完美主義的開發者這是遠遠不夠的，我們在接下來的系列文章中會繼續對網站瘦身進行深入研究，感興趣的可以關注一下極客頭條的微博和微信，我們會將接下來的文章在各個社交平臺上進行推送。
英文原文地址：http://www.sitepoint.com/complete-guide-reducing-page-weight/
相關閱讀
評論(2)