精簡代碼，爲網站減負的十大建議

此文章爲轉載

2013年，網頁文件大小增長了32%，居然達到了1.7Mb，包含96個獨立HTTP請求。這只是一個平均數值，其中近一半的網站已經超過了這個數值。網站的過分臃腫正趨於流行，其中很大的責任在於Web開發者。

過於笨重的網站將嚴重影響網站的最終體驗，主要表如今如下四個方面：

 

• 更大的下載量，致使更慢的用戶體驗。並非每一個人都擁有20M的網絡鏈接，尤爲是對於那些不發達地區。無論你的網站多麼優秀，用戶永遠不但願等待。
• 移動Web訪問正迅速發展，移動網民幾乎佔到全部網民的1/4。在典型的3G網絡鏈接下，一個1.7Mb的網站加載須要近一分鐘。若是你的網站沒法高效工做於這些移動設備，那採用響應式Web設計技術又有什麼用呢？
• 網站加載速度已被谷歌加入排名算法中。加載緩慢會下降網站排名，同時也會影響搜索引擎優化。
• 網站包含的代碼越多，更新和維護它所花費的時間就會越長。

 

Craig Buckler預言，2014年網頁文件大小將會降低。那如何精簡代碼，爲網站減負呢？Craig Buckler給出了十條建議。這些建議中涉及到的技術均是你們熟知的。

1.啓用GZIP壓縮

根據 W3Techs.com上的數據顯示，近一半的網站都未進行過壓縮。在Web主機上，經過簡單的服務器設置便可開啓GZIP壓縮。

2.支持瀏覽器緩存

若是瀏覽器能容易地緩存一個文件，那它就無需反覆下載該文件了。實現該功能的一個解決方案，就是在HTTP頭中設置合適的 Expires Header、上一次修改時間或採用的 ETags。

你可經過配置服務器來自動完成以上工做。下面是Apache中的.htaccess文件，其中的代碼實現了「將全部圖片緩存一個月」的功能。

 

3.使用CDN

瀏覽器限制了每一個域中可同時處理的併發HTTP請求數量：4至8個。若是你的網頁須要從域中加載96個資源，那瀏覽器最多可設置12組併發請求。（由於文件大小並不一樣，這種狀況實際上並不會發生，但該限制仍然適用。）

如若從另外一個域中請求靜態文件，則可以使瀏覽器處理的HTTP請求數量加倍。此外，一個文件被調用後就會產生一個緩存文件，以供下一個調用它的網站使用。咱們可選用JavaScript庫（如jQuery）和字體庫，同時你也能夠考慮專用的圖片託管。

前面提到的三條建議能夠加快網站的加載速度，下面的建議將幫助咱們高效地減小網站的冗餘代碼。

4.刪掉沒用的資源

網站一直在變革之中。若是你再也不使用某組件，那就刪掉與之關聯的CSS和JavaScript。若是它們包含在一個單獨文件中，處理起來就會很簡單。不然，你須要藉助一些工具，如Chrome的Audit開發工具、 JSLint、 Dust-Me Selectors、 CSS Usage、 unused-css.com，也可構建 grunt-uncss此類的工具。

5.合併和壓縮CSS

理想的狀況是隻擁有一個CSS文件（若是你使用RWD以支持IE的老版本，那就須要兩個CSS文件。）構建並維護幾個單獨的CSS文件也算合理，但在部署到產品服務器以前，你應該將它們集合在一塊兒，並刪掉那些沒必要要的空白區域。

Saas、LESS和Stylus等預處理器可幫你完成這些痛苦的工做。 Grunt.js、 Gulp等工具可自動化你的工做流。若是你更喜歡GUI，可藉助Koala提供的免費跨平臺應用。

若是你以爲這些比較麻煩，也可手動經過命令行工具將CSS文件集中在一塊兒，如在Windows中，可以使用以下代碼：

 

在Mac/Linux中，可以使用以下代碼：

 

最終文件通過在線CSS壓縮工具（如 cssminifier.com、 CSS Compressor & Minifieror等）壓縮後便可運行。

最後，請記住在頭部（Head）加載全部CSS，以便瀏覽器展現接下來的HTML元素，同時也可避免瀏覽器下次再重繪頁面元素。

6.壓縮併合並JavaScript

平均每一個頁面需加載18個JavaScript文件，因此咱們要將本身編寫的JavaScript代碼進行合併和壓縮。咱們能夠本身構建壓縮工具，也可使用在線工具，如 YUI Compressor、 Closure Compiler及CompressorRater。

使用JavaScript壓縮工具進行壓縮，必須十分謹慎。你的代碼有一點小問題，即使丟失了一個分號，壓縮過程也可能會失敗。不管如何，對JavaScript文件進行壓縮，可減小HTTP請求數量，從而提升網站性能。

最好在</body>以前加載JavaScript，這樣可確保該腳本不會阻礙其它內容的加載，同時在該腳本被下載和執行以前，頁面的內容已加載完畢，並可閱讀了。

7.使用正確的圖片格式

錯誤地使用圖片格式會增長網頁的負載。圖片格式一般有如下使用原則：

 

• 照片使用JPG格式；
• 其餘的使用PNG格式。

 

當你有一些小圖像，它們僅包含有限的幾種色彩集，採用GIF格式，其壓縮效果可能更好。本文暫不討論向量圖。

如今有大量免費的圖形軟件包，可用來轉換圖片的格式。其中像XnView容許你批處理這些文件。請記住下面兩條原則：

JPG爲一種有損壓縮格式，其質量介於0（質量不好、更小的文件）至100（質量最好，更大的文件）之間。介於30至70之間的大部分圖片顯示效果比較好。

PNG支持256顏色表和24位的真彩色。若是你不須要透明，並能控制調色板，那256的PNG圖像顏色模式可能壓縮得更好。

8.重整大圖片的尺寸

即使是最入門級的智能手機上的照片機（三百萬像素），其拍出來的照片每每太大而不適合在網站上顯示。但大部份內容編輯者每每將圖片直接從相機中直接上傳到網站上。所以，咱們須要一個能夠自動調整圖片尺寸的系統。

圖片的尺寸永遠不能超過它所在容器的最大值。若是網站模板的寬度最大爲800px，那圖片的寬度就不能超過該值。一些高分辨率、Retina顯示屏，可顯示寬度爲1600px的圖片，但這仍比從相機中直接輸出的圖片要小。

在下降網頁文件大小方面，圖片尺寸的調整起着重要的做用。將圖片尺寸縮小50%，可節省75%的總空間，至關於減小了文件大小。

9.進一步壓縮圖片

即使已將圖片調整爲正確的格式和尺寸，你仍可以使用一些分析和優化圖像的工具進一步壓縮圖片。這些工具包括 OptiPNG、 PNGOUT、 jpegtran和 jpegoptim。大部分工具可獨立安裝，也可整合入你構建的過程當中。另外，還有一些在線工具，如Smush，它能夠工做於雲上。

10.去掉沒必要要的字體

Web字體對設計進行了重大改革，減小了基於圖像的字體的使用。可是，使用傳統字體後，網頁的代碼量每每會增長數百KB。因此網站中這種字體的使用盡可能控制在兩、三種之內。