網(wǎng)站在進(jìn)行優(yōu)化前,關(guān)鍵是剖析當(dāng)前的web性能,找到性能瓶頸,從而確定最需改進(jìn)的地方;如果精力有限,首先將精力放在能明顯提升性能的改進(jìn)點(diǎn)上;
《高性能網(wǎng)站建設(shè)指南》提出了一個(gè)性能黃金法則:
只有10%-20%的最終用戶(hù)響應(yīng)時(shí)間花在了下載HTML文檔上;其余的80%-90%的時(shí)間花在了下載頁(yè)面中的所有組件上。
由于本文將實(shí)施一個(gè)完整的優(yōu)化流程,所以,我們還是從后臺(tái)開(kāi)始;
案例說(shuō)明:
優(yōu)化之前的網(wǎng)站規(guī)模:
2個(gè)js、一個(gè)頁(yè)頭、一個(gè)頁(yè)腳;3個(gè)css;
類(lèi)型:博客類(lèi)站點(diǎn);后臺(tái)邏輯簡(jiǎn)單;首頁(yè)不到10個(gè)sql查詢(xún);
首頁(yè)html文檔52kb;
第一步:后臺(tái)優(yōu)化,啟用頁(yè)面緩存;
實(shí)驗(yàn)站點(diǎn)首頁(yè)后臺(tái)邏輯并不復(fù)雜,不超過(guò)10個(gè)Sql查詢(xún),通過(guò)查看時(shí)間線(xiàn),本站在獲取HTML文檔時(shí),花費(fèi)的時(shí)間不到總響應(yīng)時(shí)間的20%,優(yōu)化之前沒(méi)有使用緩存,所有的數(shù)據(jù)都是從數(shù)據(jù)庫(kù)讀取,這里,我們使用靜態(tài)頁(yè)面緩存,將首頁(yè)整個(gè)頁(yè)面完全的存放在緩存中(關(guān)于YII靜態(tài)頁(yè)面緩存的使用,參考這里);
通過(guò)查看html文檔的生成時(shí)間來(lái)檢測(cè)優(yōu)化效果;
首字節(jié)時(shí)間為376ms;html生成的時(shí)間大大縮短,后臺(tái)時(shí)間減少了一倍。
優(yōu)化前:
第二步,DNS域名解析加速:
DNS解析是用戶(hù)訪(fǎng)問(wèn)站點(diǎn)的第一步,在此之前,你的網(wǎng)站無(wú)法做任何事情;
站點(diǎn)的DNS解析時(shí)間不應(yīng)該超過(guò)500ms,如果站點(diǎn)原始DNS解析時(shí)間過(guò)長(zhǎng),就該考慮考慮使用第三方解析加速服務(wù);
實(shí)驗(yàn)站點(diǎn)的原始DNS解析較慢,平均耗時(shí)1017ms,算是非常長(zhǎng)的;對(duì)于DNS加速,可以使用DNS域名解析加速服務(wù),本站點(diǎn)采用的國(guó)內(nèi)的一款免費(fèi)DNS加速服務(wù)DNSPOD,效果還不錯(cuò),使用后平均耗時(shí)降到370ms;
加速前測(cè)試:

使用DNS域名解析服務(wù)之后的測(cè)試:

第三步:使用CDN加速;
采用第三方CDN加速,時(shí)間縮短到2.1s;從下圖中看到主要的耗時(shí)在于并行下載的個(gè)數(shù)有些低,如果能夠提升并行下載量的個(gè)數(shù),那么整體加載時(shí)間就會(huì)降低;
注:個(gè)人建議,啟用CDN最好放在最后一步,等將站點(diǎn)本身的優(yōu)化都做完了之后,再啟用CDN可以明顯的看到優(yōu)化效果。(開(kāi)啟CDN后,由于有CDN緩存的原因,觀(guān)測(cè)站點(diǎn)的本身的優(yōu)化就不是很方便了);

第四步,采用多臺(tái)服務(wù)器提高并行加載量:
原理:一個(gè)瀏覽器對(duì)與同一域名的并行下載的個(gè)數(shù)默認(rèn)是2個(gè), HTTP.1.0中規(guī)定的是4個(gè)。這樣,我們可以使用不同的域名來(lái)提升下載的速度;
觀(guān)察上圖中的下載數(shù)量,第一次并行下載的個(gè)數(shù)是4個(gè),初始認(rèn)為是瀏覽器對(duì)于同一個(gè)域名來(lái)源的下載所限導(dǎo)致;于是考慮將部分靜態(tài)文件分別放在不同的服務(wù)器上;通過(guò)把css和js放在不同服務(wù)器上;結(jié)果并不理想,發(fā)現(xiàn)并未提高速度。
想到在哪曾看到過(guò),瀏覽器必須得把放在頁(yè)頭的css和js下載完成了之后才會(huì)開(kāi)始下載其它的靜態(tài)組件;
關(guān)于并行下載這點(diǎn)上,后續(xù)將繼續(xù)實(shí)驗(yàn)是否還有優(yōu)化的空間。

第五步,合并腳本和樣式表;
本站首頁(yè)使用了2個(gè)js和3個(gè)css。如果采用樸素復(fù)制的方式,將js和css都分別整合到一個(gè)文件中,不但操作麻煩,而且不方便后期的管理。網(wǎng)絡(luò)上有不少合并的工具,本站采用了CSS和JS合并優(yōu)化工具-minify(下載地址:http://code.google.com/p/minify/)。如果使用的YII框架,更有YII整合版(minscript Extension),簡(jiǎn)單幾步的配置,就自動(dòng)將頁(yè)面所有的js和css文件合并;
關(guān)于minscript Extension的使用,請(qǐng)參考:https://bitbucket.org/TeamTPG/minscript/wiki/Usage
第六步,壓縮css/js/html/xml;
不同的web服務(wù)器設(shè)置方式有所差別,本站使用的Linux/apache,
在web根目錄下的.htaccess文件中添加以下代碼即可:
#set compress
AddOutputFilter DEFLATE html xml php js css
通過(guò)firefox工具可看到,壓縮前,html文檔的大小是25KB;合并后的js大小為138KB;
壓縮后,html文檔大小為6.2KB。js大小為39.8KB;減少2/3的傳輸時(shí)間;

第六步,最大化的減少HTTP請(qǐng)求;
添加Expires頭, 啟用靜態(tài)內(nèi)容緩存,將jpg、gif等文件緩存;
方法也是在.htaccess中添加:
# Image and Flash content Caching for One Month
Header set Cache-Control “max-age=2592360″
結(jié)論
查看最終的測(cè)試結(jié)果,整體實(shí)現(xiàn)了較大的性能提升,最終頁(yè)面展現(xiàn)時(shí)間為1.62s(測(cè)試使用的是一個(gè)第三方web測(cè)速工具,所有測(cè)試結(jié)果是在第三方本地?zé)o緩存的條件下進(jìn)行)。仔細(xì)觀(guān)察本站最后幾個(gè)加載項(xiàng):有一個(gè)第三方網(wǎng)站的廣告(加載廣告的時(shí)刻,頁(yè)面已經(jīng)全部呈現(xiàn),對(duì)用戶(hù)體驗(yàn)影響不大),以及cnzz的統(tǒng)計(jì)數(shù)據(jù)。這樣看來(lái),在第12項(xiàng)加載完后,整個(gè)頁(yè)面就完整的呈現(xiàn)在用戶(hù)面前,優(yōu)化最終結(jié)果是1.1s,較優(yōu)化前加載速度提升2s;由于物理?xiàng)l件(虛擬機(jī)、國(guó)外站點(diǎn))所限,本次優(yōu)化就到此為止(后續(xù)將在并行下載上做做文章,看是否有進(jìn)一步提升空間)。

本次優(yōu)化主要使用的是前端優(yōu)化,其中大部分規(guī)則來(lái)自于這本書(shū)的指導(dǎo)《高性能網(wǎng)站建設(shè)指南》;如果你的web前端部分還沒(méi)有充分優(yōu)化,強(qiáng)烈建議讀讀這本書(shū)。
網(wǎng)站建設(shè)教程
企業(yè)網(wǎng)站建設(shè)一條龍
找零度飛易網(wǎng)絡(luò)公司-fslingdu所做php
網(wǎng)站建設(shè)方案、
網(wǎng)站設(shè)計(jì)、
網(wǎng)站制作由
北京上海深圳龍崗衢州蘭州常州東營(yíng)南通濟(jì)寧桂林淮安煙臺(tái)長(zhǎng)春無(wú)錫天津昆山蘇州合肥貴洛陽(yáng)昆明天津唐山泉州惠州萬(wàn)州新鄉(xiāng)商丘臺(tái)州哈爾濱太原攝影海口隨州學(xué)校商丘廣東湖南廣西江西海南廣州企業(yè)中小企業(yè)武漢南山羅湖福田虎門(mén)肇慶汕尾汕頭廣州佛山成都杭州濟(jì)南重慶福州西安廈門(mén)昆山沈陽(yáng)青島徐州鄭州南京寧南寧長(zhǎng)沙大連淄博石家莊南昌溫州珠海番禺順德南三水高明中山東莞合肥江門(mén)嘉興西寧大良容桂倫教勒流陳村均安杏壇龍江樂(lè)從北滘祖廟石灣南莊等地區(qū)
企業(yè)網(wǎng)站建設(shè)(廣告)公司提供專(zhuān)業(yè)做網(wǎng)站價(jià)格規(guī)劃書(shū)及
營(yíng)銷(xiāo)型網(wǎng)站制作,
網(wǎng)站建設(shè)基礎(chǔ)知識(shí)