提高網(wǎng)頁(yè)打開(kāi)速度-受歡迎網(wǎng)站第一步


關(guān)于受歡迎網(wǎng)站用戶(hù)體驗的方法論有很多，最基本的：別讓我等??！提高網(wǎng)頁(yè)打開(kāi)速度。 


為什么迅雷在下載軟件中獨樹(shù)一幟？為什么越來(lái)越多的用戶(hù)在低畫(huà)質(zhì)的視頻網(wǎng)站上在線(xiàn)觀(guān)看連續劇，而不是下載更清晰的視頻文件？答案是：用戶(hù)的耐心非常有限，用戶(hù)對速度的追求遠遠超過(guò)了對畫(huà)質(zhì)等因素的追求。 


回到網(wǎng)站運營(yíng)問(wèn)題上，你是否有在全國各地都測試過(guò)，訪(fǎng)問(wèn)打開(kāi)你的網(wǎng)站需要幾秒？ 


曾有很多研究表明：用戶(hù)最滿(mǎn)意的打開(kāi)網(wǎng)頁(yè)時(shí)間是2-5秒，如果等待超過(guò)10秒，99%的用戶(hù)會(huì )關(guān)閉這個(gè)網(wǎng)頁(yè)。也許這樣講，各位還不會(huì )有太多感觸，接下來(lái)，我列舉一組數據：Google網(wǎng)站訪(fǎng)問(wèn)速度每慢400ms就導致用戶(hù)搜索請求下降0.59%；Amazon每增加100ms網(wǎng)站延遲將導致收入下降1%；雅虎如果有400ms延遲會(huì )導致流量下降5-9%。 


怎么樣？現在感受如何？是不是該馬上去做測試工作呢。 


這時(shí)候你也許會(huì )問(wèn)：什么原因會(huì )導致網(wǎng)站打開(kāi)慢？有什么辦法解決呢？別急，我一一道來(lái)。以下內容有些偏技術(shù)層面，各位需要耐心閱讀。 


1、減少HTTP請求數 


用戶(hù)在打開(kāi)一個(gè)網(wǎng)頁(yè)的時(shí)候，后臺程序響應用戶(hù)所需的時(shí)間并不多，用戶(hù)等待的時(shí)間主要花費在下載網(wǎng)頁(yè)元素上了，即HTML、CSS、JavaScript、Flash、圖片等，統計顯示，每增加一個(gè)元素，網(wǎng)頁(yè)載入的時(shí)間就增加25-40毫秒（取決于用戶(hù)的帶寬情況）。 


所以，想要提高網(wǎng)頁(yè)打開(kāi)速度，就要減少HTTP請求數，方法有3種： 


1）減少不必要的HTTP請求，例如用CSS圓角代替圓角圖片，減少圖片的使用。 


2）合并文件，對于文本文件，可以直接合并內容。例如將多個(gè)JS（JavaScript的簡(jiǎn)稱(chēng)）文件合并成一個(gè)，將多個(gè)CSS文件合并成一個(gè)。 


3）優(yōu)化緩存，對于沒(méi)有變化的網(wǎng)頁(yè)元素（如頁(yè)頭、頁(yè)尾等），用戶(hù)再次訪(fǎng)問(wèn)的時(shí)候沒(méi)有必要重新下載，直接從瀏覽器緩存里讀取就可以了。 


2、使用CDN（Content Delivery Network，內容分發(fā)網(wǎng)絡(luò )） 


CDN由一系列分散到各個(gè)不同地理位置上的Web服務(wù)器組成，它根據和用戶(hù)在網(wǎng)絡(luò )上的靠近程度來(lái)指定某臺服務(wù)器響應用戶(hù)的請求。當你的網(wǎng)站圖片很多事，就一樣要使用CDN了，比如現在的電商網(wǎng)站，幾乎都在使用CDN。 


3、壓縮網(wǎng)頁(yè)元素 


網(wǎng)頁(yè)中的每個(gè)元素越小，下載所需的時(shí)間就越少，這個(gè)很好理解?，F在比較成熟和流程的壓縮網(wǎng)頁(yè)的方式，是通過(guò)Gzip，我自己的實(shí)操經(jīng)驗來(lái)看，一般可以將網(wǎng)頁(yè)文本內容減少70%以上。 


4、樣式表放在網(wǎng)頁(yè)Head部分 


這也是我實(shí)際操作過(guò)的案例，把樣式表（CSS文件）移到網(wǎng)頁(yè)的Head部分，可以提高頁(yè)面的加載速度，讓頁(yè)面元素順序顯示。 


5、把JS文件放到網(wǎng)頁(yè)底部 


網(wǎng)頁(yè)打開(kāi)時(shí)，所有元素是順序顯示的。由于JS文件的特殊性，其相比其他元素來(lái)說(shuō)，會(huì )加載的很慢，在JS文件下載完成之前，其他后面元素的順序顯示將被阻塞，因此把JS文件盡量放在底部，意味著(zhù)內容能被快速顯示。 


6、把樣式表和JS腳本放到外部文件中 


盡管將樣式表和JS腳本直接寫(xiě)入網(wǎng)頁(yè)HTML中，可以減少外部文件調用數量，但是，這樣做會(huì )增加網(wǎng)頁(yè)的文件大小。綜合來(lái)看，將樣式表和JS腳本放到外部文件中，也許用戶(hù)首次訪(fǎng)問(wèn)時(shí)會(huì )有點(diǎn)慢，但是后續在訪(fǎng)問(wèn)網(wǎng)站時(shí)，用戶(hù)直接通過(guò)瀏覽器緩存就可以用，從而達到減少HTTP請求數的目的，為最優(yōu)的做法。