!!!!! WEB站點性能優(yōu)化實踐（加載速度提升2s）

2013.02.23

關(guān)注

感謝大CC的投稿：

進(jìn)行優(yōu)化前，關(guān)鍵是剖析當(dāng)前的web性能，找到性能瓶頸，從而確定最需改進(jìn)的地方;如果精力有限，首先將精力放在能明顯提升性能的改進(jìn)點上;

《高性能網(wǎng)站建設(shè)指南》提出了一個性能黃金法則：

只有10%-20%的最終用戶響應(yīng)時間花在了下載HTML文檔上;其余的80%-90%的時間花在了下載頁面中的所有組件上。

由于本文將實施一個完整的優(yōu)化流程，所以，我們還是從后臺開始;

案例說明：

優(yōu)化之前的網(wǎng)站規(guī)模：

2個js、一個頁頭、一個頁腳;3個css;

類型：博客類站點;后臺邏輯簡單;首頁不到10個sql查詢;

首頁html文檔52kb;

第一步：后臺優(yōu)化，啟用頁面緩存;

實驗站點首頁后臺邏輯并不復(fù)雜，不超過10個Sql查詢，通過查看時間線，本站在獲取HTML文檔時，花費的時間不到總響應(yīng)時間的20%，優(yōu)化之前沒有使用緩存，所有的數(shù)據(jù)都是從數(shù)據(jù)庫讀取，這里，我們使用靜態(tài)頁面緩存，將首頁整個頁面完全的存放在緩存中(關(guān)于YII靜態(tài)頁面緩存的使用，參考這里);

通過查看html文檔的生成時間來檢測優(yōu)化效果;

首字節(jié)時間為376ms;html生成的時間大大縮短，后臺時間減少了一倍。

優(yōu)化前：

優(yōu)化后：

第二步，DNS域名解析加速：

DNS解析是用戶訪問站點的第一步，在此之前，你的網(wǎng)站無法做任何事情;

站點的DNS解析時間不應(yīng)該超過500ms，如果站點原始DNS解析時間過長，就該考慮考慮使用第三方解析加速服務(wù);

實驗站點的原始DNS解析較慢，平均耗時1017ms，算是非常長的;對于DNS加速，可以使用DNS域名解析加速服務(wù)，本站點采用的國內(nèi)的一款免費DNS加速服務(wù)DNSPOD，效果還不錯，使用后平均耗時降到370ms;

加速前測試：平均解析時間：1017ms

使用DNS域名解析服務(wù)之后的測試：370ms

第三步：使用CDN加速;

采用第三方CDN加速，時間縮短到2.1s;從下圖中看到主要的耗時在于并行下載的個數(shù)有些低，如果能夠提升并行下載量的個數(shù)，那么整體加載時間就會降低;

注：個人建議，啟用CDN最好放在最后一步，等將站點本身的優(yōu)化都做完了之后，再啟用CDN可以明顯的看到優(yōu)化效果。(開啟CDN后，由于有CDN緩存的原因，觀測站點的本身的優(yōu)化就不是很方便了);

第四步，采用多臺服務(wù)器提高并行加載量：

原理：一個瀏覽器對與同一域名的并行下載的個數(shù)默認(rèn)是2個， HTTP.1.0中規(guī)定的是4個。這樣，我們可以使用不同的域名來提升下載的速度;

觀察上圖中的下載數(shù)量，第一次并行下載的個數(shù)是4個，初始認(rèn)為是瀏覽器對于同一個域名來源的下載所限導(dǎo)致;于是考慮將部分靜態(tài)文件分別放在不同的服務(wù)器上;通過把css和js放在不同服務(wù)器上;結(jié)果并不理想，發(fā)現(xiàn)并未提高速度。

想到在哪曾看到過，瀏覽器必須得把放在頁頭的css和js下載完成了之后才會開始下載其它的靜態(tài)組件;

關(guān)于并行下載這點上，后續(xù)將繼續(xù)實驗是否還有優(yōu)化的空間。

第五步，合并腳本和樣式表;

本站首頁使用了2個js和3個css。如果采用樸素復(fù)制的方式，將js和css都分別整合到一個文件中，不但操作麻煩，而且不方便后期的管理。網(wǎng)絡(luò)上有不少合并的工具，本站采用了CSS和JS合并優(yōu)化工具-minify(下載地址：http://code.google.com/p/minify/)。如果使用的YII框架，更有YII整合版(minscript Extension)，簡單幾步的配置，就自動將頁面所有的js和css文件合并;

關(guān)于minscript Extension的使用，請參考：https://bitbucket.org/TeamTPG/minscript/wiki/Usage

第六步，壓縮css/js/html/xml;

不同的web服務(wù)器設(shè)置方式有所差別，本站使用的Linux/apache,

在web根目錄下的.htaccess文件中添加以下代碼即可：

AddOutputFilter DEFLATE html xml php js css

</ifmodule>

通過firefox工具可看到，壓縮前，html文檔的大小是25KB;合并后的js大小為138KB;

壓縮后，html文檔大小為6.2KB。js大小為39.8KB;減少2/3的傳輸時間;

第七步，最大化的減少HTTP請求;

添加Expires頭, 啟用靜態(tài)內(nèi)容緩存，將jpg、gif等文件緩存;

方法也是在.htaccess中添加：

# Image and Flash content Caching for One Month

Header set Cache-Control “max-age=2592360″

</FilesMatch>

結(jié)論

查看最終的測試結(jié)果，整體實現(xiàn)了較大的性能提升，最終頁面展現(xiàn)時間為1.62s(測試使用的是一個第三方web測速工具，所有測試結(jié)果是在第三方本地?zé)o緩存的條件下進(jìn)行)。仔細(xì)觀察本站最后幾個加載項：有一個第三方網(wǎng)站的廣告(加載廣告的時刻，頁面已經(jīng)全部呈現(xiàn)，對用戶體驗影響不大)，以及cnzz的統(tǒng)計數(shù)據(jù)。這樣看來，在第12項加載完后，整個頁面就完整的呈現(xiàn)在用戶面前，優(yōu)化最終結(jié)果是1.1s，較優(yōu)化前加載速度提升2s;由于物理條件(虛擬機(jī)、國外站點)所限，本次優(yōu)化就到此為止(后續(xù)將在并行下載上做做文章，看是否有進(jìn)一步提升空間)。

本次優(yōu)化主要使用的是前端優(yōu)化，其中大部分規(guī)則來自于這本書的指導(dǎo)《高性能網(wǎng)站建設(shè)指南》;如果你的web前端部分還沒有充分優(yōu)化，強(qiáng)烈建議讀讀這本書;

這是一本你只需畫上三小時就能看完，但收獲價值遠(yuǎn)遠(yuǎn)大于付出的一本書。

附上本書的目錄：

緒言A：前端性能的重要性

第1章：規(guī)則1——減少HTTP請求

第2章：規(guī)則2——使用內(nèi)容發(fā)布網(wǎng)絡(luò)

第3章：規(guī)則3——添加Expires頭

第4章：規(guī)則4——壓縮組件

第5章：規(guī)則5——將樣式表放在頂部

第6章：規(guī)則6——將腳本放在底部

第7章：規(guī)則7——避免CSS表達(dá)式

第8章：規(guī)則8——使用外部JavaScript和CSS