WEB站點性能優化實踐

內容目錄

    進行優化前，關鍵是剖析當前的web性能，找到性能瓶頸，從而肯定最需改進的地方；若是精力有限，首先將精力放在能明顯提高性能的改進點上；

《高性能網站建設指南》提出了一個性能黃金法則：

只有10%-20%的最終用戶響應時間花在了下載HTML文檔上；其他的80%-90%的時間花在了下載頁面中的全部組件上。

因爲本文將實施一個完整的優化流程，因此，咱們仍是從後臺開始；

 

案例說明：

優化以前的網站規模：

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

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

首頁html文檔52kb;

 

第一步：後臺優化，啓用頁面緩存；

實驗站點首頁後臺邏輯並不複雜，不超過10個Sql查詢，經過查看時間線，本站在獲取HTML文檔時，花費的時間不到總響應時間的20%，優化以前沒有使用緩存，全部的數據都是從數據庫讀取，這裏，咱們使用靜態頁面緩存，將首頁整個頁面徹底的存放在緩存中（關於YII靜態頁面緩存的使用，參考這裏）；

經過查看html文檔的生成時間來檢測優化效果；

首字節時間爲376ms；html生成的時間大大縮短，後臺時間減小了一倍。

優化前：

優化後：

 

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

DNS解析是用戶訪問站點的第一步，在此以前，你的網站沒法作任何事情；

站點的DNS解析時間不該該超過500ms，若是站點原始DNS解析時間過長，就該考慮考慮使用第三方解析加速服務；

實驗站點的原始DNS解析較慢，平均耗時1017ms，算是很是長的；對於DNS加速，可使用DNS域名解析加速服務，本站點採用的國內的一款免費DNS加速服務DNSPOD，效果還不錯，使用後平均耗時降到370ms；

加速前測試：

使用DNS域名解析服務以後的測試：

 

第三步：使用CDN加速；

採用第三方CDN加速，時間縮短到2.1s；從下圖中看到主要的耗時在於並行下載的個數有些低，若是可以提高並行下載量的個數，那麼總體加載時間就會下降；

注：我的建議，啓用CDN最好放在最後一步，等將站點自己的優化都作完了以後，再啓用CDN能夠明顯的看到優化效果。（開啓CDN後，因爲有CDN緩存的緣由，觀測站點的自己的優化就不是很方便了）；

 

第四步，採用多臺服務器提升並行加載量：

原理：一個瀏覽器對與同一域名的並行下載的個數默認是2個， HTTP.1.0中規定的是4個。這樣，咱們可使用不一樣的域名來提高下載的速度；

觀察上圖中的下載數量，第一次並行下載的個數是4個，初始認爲是瀏覽器對於同一個域名來源的下載所限致使；因而考慮將部分靜態文件分別放在不一樣的服務器上；經過把css和js放在不一樣服務器上；結果並不理想，發現並未提升速度。

想到在哪曾看到過，瀏覽器必須得把放在頁頭的css和js下載完成了以後纔會開始下載其它的靜態組件；

關於並行下載這點上，後續將繼續實驗是否還有優化的空間。

 

第五步，合併腳本和樣式表；

    本站首頁使用了2個js和3個css。若是採用樸素複製的方式，將js和css都分別整合到一個文件中，不但操做麻煩，並且不方便後期的管理。網絡上有很多合併的工具，本站採用了CSS和JS合併優化工具-minify（下載地址：http://code.google.com/p/minify/）。若是使用的YII框架，更有YII整合版（minscript Extension），簡單幾步的配置，就自動將頁面全部的js和css文件合併；

關於minscript Extension的使用，請參考：https://bitbucket.org/TeamTPG/minscript/wiki/Usage

 

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

不一樣的web服務器設置方式有所差異，本站使用的Linux/apache,

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

#set compress

<ifmodule mod_deflate.c>

AddOutputFilter DEFLATE html xml php js css

</ifmodule>

經過firefox工具可看到，壓縮前，html文檔的大小是25KB；合併後的js大小爲138KB；

壓縮後，html文檔大小爲6.2KB。js大小爲39.8KB；減小2/3的傳輸時間；

 

第六步，最大化的減小HTTP請求；

添加Expires頭, 啓用靜態內容緩存，將jpg、gif等文件緩存；

方法也是在.htaccess中添加：

# Image and Flash content Caching for One Month

<FilesMatch 「.(flv|gif|jpg|jpeg|png|ico|swf)$」>

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

</FilesMatch>

 

結論

查看最終的測試結果，總體實現了較大的性能提高，最終頁面展示時間爲1.62s（測試使用的是一個第三方web測速工具，全部測試結果是在第三方本地無緩存的條件下進行）。仔細觀察本站最後幾個加載項：有一個第三方網站的廣告（加載廣告的時刻，頁面已經所有呈現，對用戶體驗影響不大），以及cnzz的統計數據。這樣看來，在第12項加載完後，整個頁面就完整的呈如今用戶面前，優化最終結果是1.1s，較優化前加載速度提高2s；因爲物理條件（虛擬機、國外站點）所限，本次優化就到此爲止（後續將在並行下載上作作文章，看是否有進一步提高空間）。

 

本次優化主要使用的是前端優化，其中大部分規則來自於這本書的指導《高性能網站建設指南》；若是你的web前端部分尚未充分優化，強烈建議讀讀這本書；

這是一本你只需畫上三小時就能看完，但收穫價值遠遠大於付出的一本書。

附上本書的目錄：

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

第1章：規則1——減小HTTP請求

第2章：規則2——使用內容發佈網絡

第3章：規則3——添加Expires頭

第4章：規則4——壓縮組件

第5章：規則5——將樣式表放在頂部

第6章：規則6——將腳本放在底部

第7章：規則7——避免CSS表達式

第8章：規則8——使用外部JavaScript和CSS

第9章：規則9——減小DNS查找

第10章：規則10——精簡JavaScript

第11章：規則11——避免重定向

第12章：規則12——移除重複腳本

第13章：規則13——配置ETag

第14章：規則14——使AjaX可緩存

第15章：析構十大網站

頁面大小、響應時間、YSlow等級

如何進行測試