精簡程式碼 為網站減負的十大建議

csdn發表於2014-01-21
網站

　　網站快速載入，是提供良好使用者體驗的前提。然而，網站功能的不斷增多，程式包的不斷臃腫，導致網站訪問時較大的下載量，最終影響了響應速度。沒有一個使用者喜歡等待，如何減少程式碼量，為網站減去過多負擔，Craig Buckler在sitepoint網站發表了一篇文章《10 Quick and Easy Fixes to Reduce Page Weight》，分享為網站減負的十個建議。下面為該文的編譯內容。

　　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檔案，其中的程式碼實現了“將所有圖片快取一個月”的功能。

<IfModule mod_expires.c>
ExpiresActive On
 
<FilesMatch "\.(jpg|jpeg|png|gif|svg)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>

</IfModule>

　　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中，可使用如下程式碼：

copy file1.css+file2.css file.css

　　在Mac/Linux中，可使用如下程式碼：

cat file1.css file2.css > file.css

　　最終檔案經過線上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。所以網站中這種字型的使用盡量控制在兩、三種以內。

　　利用以上提到的方法，大部分網站可以將減去30~50%的重量。對於一般的網站，可以減掉800KB的程式碼量，訪問速度可獲明顯提升。（編譯：陳秋歌）

　　內容來自：10 Quick and Easy Fixes to Reduce Page Weight

相關文章