一招:開啟http壓縮
目前主流的web服務器都已經支持gzip壓縮,可以對html、css、javascript等文本內容進行壓縮。一般情況下,開啟gzip壓縮之後能節省60%以上的流量,具體的壓縮率,我們可以通過站長之家提供的工具來識別。
第二招:在浏覽器端生成頁面
由於HTML標准本身的問題,一個web頁面包含了非常多的用戶不可見的標簽,這些標簽的傳輸占據了大量的帶寬。通過使用JavaScript/AJAX技術,把用戶可見的內容傳輸過來,在客戶端的浏覽器上實時生成頁面,不單可以加快頁面下載速度,還可以有效的減輕服務器的壓力。一般的頁面可以節省1/3以上的流量,對於表格類等重排版的頁面,流量節省可以高達80%以上。
第三招:優化JavaScript和CSS代碼
現在的網頁,都是包含了不少的JS文件和CSS文件。不管是手寫的還是工具生成的JS和CSS文件,裡面的內容包含了大量的空行,空格,注釋信息,長的變量名稱等,可以通過工具進行優化。
JS文件我們可以使用JSmin之類的工具進行優化,原始的JS文件大小是2463字節,經過壓縮之後變為1115字節,經過http的gzip壓縮,最終變為了640字節,整個JS文件變為了原來的26%。
使用CSS在線壓縮工具,原始的CSS文件大小是2289字節,經過壓縮之後變為1753字節,再經過http的gzip壓縮,最終變為了612字節,整個CSS文件大小變為了原來的27%。
雖然我們的目標是想盡辦法搾干每一個多余的字節,但是JS文件和CSS可能會要對其進行修改,因此自己需要控制好壓縮率,不要為了流量而大大增加了修改的成本。
第四招:圖片的優化
圖片應該是網站的頭號通緝犯了,網站使用的圖片不但多,而且越來越大。我們可以來看看煎蛋網首頁,共有圖片41張,總計1311KB,占了整個頁面大小的90%。圖片優化得好,不但可以提高頁面的加載速度,提升網站的用戶體驗,而且還可以節省網站的帶寬。通過下圖我們可以看出,在不影響圖片質量下,不同文件格式不同壓縮比下面,圖片文件差異還是很大的,最大和最小的圖片相差6倍,如圖:
我們可以通過繪圖工具,將圖片保存為自己需要的格式,再利用Smush.it之類的工具對圖片進行更深入的優化。同時在能使用縮略圖的地方盡量使用縮略圖,而不是借用浏覽器的縮放功能。
對圖片進行延遲加載,只有當圖片滾動到可視區域時候,才動態的從後台獲取圖片。由於不需要一次性把全部圖片取到位,因此不單網頁加載速度大大提高,還極大的提升了用戶的體驗。目前已經很多的JS庫支持了,常見的如JQuery。
第五招:巧借外部免費資源
目前雲計算技術興起,很多網站提供了一定額度的免費流量,利用好這些免費額度,能夠給你網站減少不少成本。目前阿裡雲的OSS提供了10G的免費流量,換算成300KB的圖片,可以被浏覽3.5萬次。如果同時借用多個免費的服務,就可以節省不小的成本。
第六招:對移動設備進行優化
目前智能手機越來越普及,使用移動上網的份額在不斷的擴大,而目前的移動終端的顯示屏大部分還不能跟PC終端相比,因此如果網頁提供的可視區域大於移動終端的顯示區域,要麼就是不可見,要麼就是被縮放了。
目前的移動設備,大部分還是使用2G和3G的網絡,下載速度是非常有限的,所以我們對移動終端的優化不但可以減小網站的網絡使用帶寬,還可以有效的增強用戶體驗。雖然目前的移動終端的浏覽器的功能已經非常強大,但是受限於設備的計算能力和屏幕大小,因此網頁盡量不要使用大幅圖片,不要使用龐大的JS庫等。
第七招:趕上HTML5潮流
HTML5來啦!目前各大浏覽器廠商已經相繼支持HTML5,IE6的市場份額已經不足8%,就算國內市場,也不足20%了。你可能沒有注意到一個隱藏的數據流:cookie,這個數據量不大,但是每次訪問web頁面,都是需要來回各傳送一次的。很多網站為了方便用戶輸入,增強用戶體驗,把用戶的輸入進行自動保存,每次保存都需要提交並刷新頁面。網頁應用的某些數據是可以靜態緩存的,這樣沒必要讓用戶每次刷新的時候重新下載一遍。使用HTML5的本地存儲功能,把這些可以存放在本地的數據在浏覽器端緩存起來,減少每次交互的數據量,對網站的帶寬使用也會產生很大的影響的。
技術可以驅動成本的降低,但是技術的改造不是一朝一夕可以完成的。當前的最有效的降低網絡帶寬費用的方式,就是使用動態的帶寬,可以根據自己的業務需要,按天甚至按小時對實際使用的網絡流量進行買單。目前像阿裡雲等很多雲計算公司都提供了這種動態帶寬變更,讓站長的帶寬費用更加的合理。