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