隨著網(wǎng)站功能的日益增強(qiáng),網(wǎng)站的代碼量也會越來越大,而且進(jìn)入Web2.0富客戶端以后,網(wǎng)站主更加關(guān)注網(wǎng)站的美觀和用戶的體驗,可是要產(chǎn)生這樣的 視覺效果,圖片CSS和JS就是擔(dān)負(fù)起很大的責(zé)任,這樣就使網(wǎng)站的頁面變的很大,從而影響網(wǎng)站的訪問速度。試想一下,一個只有10K的頁面和一個100K 的頁面哪一個能更快的展現(xiàn)出來,答案當(dāng)然是10K的頁面,許多研究都表明,用戶最滿意的打開網(wǎng)頁時間,是在2秒以下。用戶能夠忍受的最長等待時間大約在 6~8秒之間。也就是說,8秒是一個臨界值,如果你的網(wǎng)站打開速度在8秒以上,那么很可能,大部分訪問者最終都會離你而去。
既然網(wǎng)站頁面的大小如此重要,我們應(yīng)該如何來優(yōu)化自己的頁面呢?
當(dāng)然首先要保證你的HTML代碼書寫要規(guī)范,要知道DIV要比TABLE展示的快,所以布局盡量用DIV和CSS。JS和CSS代碼都寫在外部文件,可以 分模塊來減小他們的大小,每個模塊引用各自模塊的JS和CSS,然后對每個CSS和JS文件進(jìn)行壓縮。圖片沒有辦法壓縮,但是我們可以通過工具來查看頁面 引用的所有圖片的大小來進(jìn)行優(yōu)化。
下面我來介紹一下分析網(wǎng)站和壓縮代碼的工具:
分析網(wǎng)站的工具:YSlow
YSlow是Yahoo開發(fā)的一個用于測試分析網(wǎng)站優(yōu)化的Firefox工具插件,安裝時還必須依賴于Firebug。YSlow針對網(wǎng)站速度體驗上的優(yōu) 化,將其總結(jié)為13條,分別用F到A的指標(biāo)來對你的網(wǎng)站速度做出評價并給出數(shù)據(jù),F(xiàn)代表最差,A代表最好。我們可以通過分析得到的數(shù)據(jù)對自己的網(wǎng)站和服務(wù) 器做相應(yīng)的優(yōu)化。不僅如此,YSlow還為我們統(tǒng)計了頁面發(fā)起的HTTP請求和頁面的大小,下面是統(tǒng)計的示例:
有了這個統(tǒng)計,也可以很好的引導(dǎo)我們對代碼和媒體進(jìn)行優(yōu)化。
壓縮代碼的工具也是Yahoo公司提供的一個在線的壓縮器:Online YUI Compressor,這個壓縮器可以對所有的JS和CSS進(jìn)行壓縮,壓縮完以后會提示 壓縮的比例,使用起來也是非常方便。