網(wǎng)站打開速度直接影響了用戶體驗(yàn),試想用戶在互聯(lián)網(wǎng)上查閱資料時(shí)進(jìn)入了你的網(wǎng)站,如果頁面超過3秒還沒加載出來,大部分用戶會馬上關(guān)閉你的網(wǎng)站,這樣無疑是會導(dǎo)致用戶流失。網(wǎng)站打開速度快不僅能給用戶帶來流暢的閱讀體驗(yàn),對于搜索引擎優(yōu)化也是很有幫助的。下面是我總結(jié)的一些影響網(wǎng)站打開速度的主要原因,大家可以看看自己的網(wǎng)站在哪些方面還可以優(yōu)化提高。
盡可能地減少使用flash控件和復(fù)雜的js代碼,給網(wǎng)站代碼瘦身,這些重口味的東西看起來絢麗,其實(shí)華而不實(shí)。
網(wǎng)站上的圖片是優(yōu)化的重點(diǎn),對圖片我們要壓縮到合適的分辨率和尺寸,如果是顯示文章標(biāo)題圖片的地方,一定要使用和網(wǎng)站縮略圖相同尺寸的圖片,切勿直接使用原圖顯示。
訪問加載主要的時(shí)間耗費(fèi)在各類js、css、圖片等文件上,每一個(gè)文件都是一個(gè)單獨(dú)的請求線程,過多的請求會影響網(wǎng)站加載速度,并且給服務(wù)器帶來更大的壓力。我們要做的是竟可能地減少不必要的請求,例如檢查是否存在沒用的js和css文件,是否可以將多個(gè)js、css文件進(jìn)行合并。
對于圖片,一方面是控制大小,另一方面是合并圖片,使用css來切割顯示圖片。優(yōu)秀的網(wǎng)站會把頁面中出現(xiàn)的小圖標(biāo)、logo等,合并在一張圖片上,只通過一次請求獲取,再使用css控制不同位置顯示圖片的不同區(qū)域。大的展示圖片最好使用jpg格式,文件大小會小很多,透明圖標(biāo)使用png或gif格式。
靜態(tài)頁面不僅速度快,而且節(jié)省服務(wù)器資源,安全性也好。靜態(tài)頁面省去了和服務(wù)器的運(yùn)算、數(shù)據(jù)庫的調(diào)用,能夠支持的并發(fā)量比動態(tài)頁面高很多。目前很多開源的cms系統(tǒng)都支持此功能,自己實(shí)現(xiàn)起來也不復(fù)雜。所以,如果頁面沒有特殊功能性要求,盡可能地使用靜態(tài)頁面。
服務(wù)器的性能和穩(wěn)定性對網(wǎng)站的打開速度有著至關(guān)重要的影響。目前大部分的中小型網(wǎng)站采用虛擬主機(jī)或者云服務(wù)器。各位要根據(jù)自己網(wǎng)站的訪問量、并發(fā)量、流量使用情況、計(jì)算密集度等,選擇適合自己網(wǎng)站的服務(wù)器配置及帶寬。
我的網(wǎng)站使用的是阿里云的云服務(wù)器ECS,速度和穩(wěn)定性都很好。之前也使用過便宜的虛擬空間,效果很不好,時(shí)常發(fā)生網(wǎng)站無法訪問的情況,所以還真是一分價(jià)錢一分貨。建議大家還是選擇阿里、騰訊、百度這些大企業(yè)的云服務(wù),絕對不會花冤枉錢。
通常在服務(wù)器上的Apache、Nginx、tomcat都可以直接開啟這個(gè)設(shè)置,而且瀏覽器自ie6就具備了此功能。開啟此功能后,一般網(wǎng)頁的大小能減少50%以上,不僅可以提高用戶訪問速度,還可以減少服務(wù)器帶寬壓力,效果還是很可觀的。下面是兩個(gè)演示對比圖:
未開啟Gzip:
以我的網(wǎng)站首頁為例,我們可以使用瀏覽器的“保存網(wǎng)頁”功能(快捷鍵Ctrl+S),把網(wǎng)頁保存到本地看一下大小,網(wǎng)頁大小不僅是html頁面的大小,還包括文件夾里的css、js、圖片等文件。
在網(wǎng)頁中按F12,調(diào)出瀏覽器調(diào)試工具,在”Network”選項(xiàng)下,可以看到網(wǎng)頁的所有請求,和響應(yīng)時(shí)間,大家可以找一找有沒有大文件拖慢網(wǎng)站打開時(shí)間。
網(wǎng)站上線前,我們應(yīng)該對網(wǎng)站的打開速度在本地服務(wù)器下進(jìn)行人工測試,如果這時(shí)候已經(jīng)發(fā)現(xiàn)慢了,在公網(wǎng)環(huán)境下會更慢,一定要查找原因修復(fù)。
網(wǎng)站上線后,可以借助第三方的測速網(wǎng)站對我們的網(wǎng)站進(jìn)行測試,比如站長工具網(wǎng)速測。