yahoo開發(fā)的網(wǎng)頁(yè)評(píng)分插件YSlow的評(píng)分規(guī)則

2024-08-30 08:33:34

字體：大中小

供稿：網(wǎng)友

YSlow是yahoo美國(guó)開發(fā)的一個(gè)頁(yè)面評(píng)分插件，非常的棒，從中我們可以看出我們頁(yè)面上的很多不足，并且可以知道我們改怎么卻改進(jìn)和優(yōu)化。
仔細(xì)研究了下YSlow的評(píng)分規(guī)則。
主要有12條：
1. Make fewer HTTP requests 盡可能少的http請(qǐng)求。。我們有141個(gè)請(qǐng)求（其中15個(gè)JS請(qǐng)求，3個(gè)CSS請(qǐng)求，47個(gè)CSS background images請(qǐng)求），多的可怕。思考了下，為什么把這個(gè)三種請(qǐng)求過(guò)多列為對(duì)頁(yè)面加載的重要不利因素呢，而過(guò)多的IMG請(qǐng)求并沒(méi)有列為不利因素呢？
發(fā)現(xiàn)原來(lái)這些請(qǐng)求都是可以避免的。
15個(gè)JS和3個(gè)CSS完全可以通過(guò)特殊的辦法進(jìn)行合并（這個(gè)技術(shù)部已經(jīng)幫我們解決了，實(shí)在是太感謝了，嘿嘿。），這樣合并以后，一般情況下頁(yè)面上只會(huì)出現(xiàn)一個(gè)JS和一個(gè)CSS（對(duì)JS的封裝得有一定的要求）。
但是47個(gè)CSS background images請(qǐng)求改怎么解決呢？為什么頁(yè)面上的純IMG請(qǐng)求時(shí)合理的，而CSS background images請(qǐng)求過(guò)多就是不利因素了呢。這個(gè)我想了很久，總算明白，原來(lái)是這樣的：
一般頁(yè)面上的ICON，欄目背景啊，圖片按鈕啊，我們都會(huì)用圖片CSS背景來(lái)實(shí)現(xiàn)，而一般這個(gè)圖片CSS背景用到的圖片都是比較小的，所以完全可以把這些圖片合并成一個(gè)相對(duì)比較大的圖片，這樣頁(yè)面上只會(huì)出現(xiàn)一個(gè)CSS background images請(qǐng)求，最多也就2-3個(gè)。后來(lái)仔細(xì)看了下雅虎美國(guó)的頁(yè)面，他們的確也是這樣做的，雖然這樣做需要花一定的時(shí)間來(lái)有規(guī)則的合并這些ICON，欄目背景，圖片按鈕，以方便CSS調(diào)用，但是這樣做絕對(duì)是合算的，而且是有必要的，YSlow也是極力推薦的。
2.Use a CDN 這項(xiàng)我們的評(píng)分是F級(jí)，最低。說(shuō)實(shí)在的，我剛開始什么是CDN都不知道。后來(lái)查了GOODLE才知道。CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。其目的是通過(guò)在現(xiàn)有的Internet中增加一層新的網(wǎng)絡(luò)架構(gòu)，將網(wǎng)站的內(nèi)容發(fā)布到最接近用戶的網(wǎng)絡(luò)”邊緣”，使用戶可以就近取得所需的內(nèi)容，解決Internet網(wǎng)絡(luò)擁擠的狀況，提高用戶訪問(wèn)網(wǎng)站的響應(yīng)速度。從技術(shù)上全面解決由于網(wǎng)絡(luò)帶寬小、用戶訪問(wèn)量大、網(wǎng)點(diǎn)分布不均等原因所造成的用戶訪問(wèn)網(wǎng)站響應(yīng)速度慢的問(wèn)題。
看來(lái)上述的解釋后，基本上明白了CDN是怎么回事，后來(lái)咨詢了下中文站點(diǎn)SA，得知我們網(wǎng)站目前的確還沒(méi)有做CDN的優(yōu)化，但是據(jù)說(shuō)我們有更加先進(jìn)的技術(shù)來(lái)解決類似的問(wèn)題（具體什么技術(shù)那就保密了），但是畢竟CDN也是個(gè)相當(dāng)不錯(cuò)的技術(shù)，所以在我們先進(jìn)技術(shù)的基礎(chǔ)上在做CDN優(yōu)化，肯定比現(xiàn)在更好，嘿嘿。據(jù)說(shuō)SA明年會(huì)做幾個(gè)點(diǎn)的CND。
3. Add an Expires header 設(shè)置過(guò)期的HTTP Header.設(shè)置Expires Header可以將腳本, 樣式表, 圖片, Flash等緩存在瀏覽器的Cache中.
其實(shí)我們網(wǎng)站也做了這個(gè)優(yōu)化，至少圖片在這個(gè)上做過(guò)優(yōu)化，但是沒(méi)有做完全。我們的CSS和JS都還沒(méi)有做過(guò)優(yōu)化，倒是外部引入的一個(gè)廣告JS做了，呵呵。其實(shí)設(shè)置過(guò)期的HTTP Header 更應(yīng)該做在腳本, 樣式表, Flash上.不過(guò)據(jù)說(shuō)這個(gè)SA也是沒(méi)有做的，但是有一定的風(fēng)險(xiǎn)，因?yàn)镴S和CSS是有一定的邏輯，如果服務(wù)器端和客戶端都存在緩存的話，萬(wàn)一出了什么問(wèn)題，對(duì)我們以后查找問(wèn)題的所在和增加難度，不過(guò)我想兩者中是可以權(quán)衡和并存的。
4. Gzip components 對(duì)我們的頁(yè)面內(nèi)容進(jìn)行Gzip格式的壓縮，Gzip格式是一種很普遍的壓縮技術(shù)，幾乎所有的瀏覽器都有解壓Gzip格式的能力，而且它可以壓縮的比例非常大，一般壓縮率為85%，就是說(shuō)服務(wù)器端100K的頁(yè)面可以壓縮到25K左右的Gzip格式的數(shù)據(jù)發(fā)給客戶端，客戶端收到Gzip格式的數(shù)據(jù)后自動(dòng)解壓縮后顯示頁(yè)面。
這點(diǎn)我們網(wǎng)站基本上是100%做到了，但是我們這項(xiàng)的評(píng)分并沒(méi)有達(dá)到想象中的A級(jí)，原因是出在我們的外部鏈接，比如我們首頁(yè)，有外部的廣告投放JS，這個(gè)JS說(shuō)擁有的網(wǎng)站是沒(méi)有做過(guò)GZIP優(yōu)化，連累了我們網(wǎng)站，所以我們也只有B，或者C級(jí)。
5. Put CSS at the top 把CSS外部鏈接放到頁(yè)面的頂部。
其實(shí)這個(gè)原則我們一般都遵守的，如果把CSS外部鏈接作為邏輯的一部分出現(xiàn)在頁(yè)面頭部以下，我個(gè)人覺得這個(gè)本身就是個(gè)錯(cuò)誤。還好，我們的頁(yè)面基本上都做到了，可是有些頁(yè)面比如LIST頁(yè)面，還是出現(xiàn)了和邏輯掛鉤的CSS鏈接，原因是為了解決一些本來(lái)就不合理的產(chǎn)品邏輯。所以，我們WEB前端工程師有義務(wù)杜絕這些不合理的產(chǎn)品邏輯破壞我們的頁(yè)面結(jié)果及頁(yè)面加載速度，不能為了實(shí)現(xiàn)而實(shí)現(xiàn)。

上一頁(yè)12 下一頁(yè) 閱讀全文

上一篇：網(wǎng)頁(yè)設(shè)計(jì)色彩搭配寶藍(lán)色的介紹

下一篇：網(wǎng)頁(yè)設(shè)計(jì)教程(2):論摹仿和抄襲