yslow是yahoo美國開發的乙個頁面評分外掛程式,非常的棒,從中我們可以看出我們頁面上的很多不足,並且可以知道我們改怎麼卻改進和優化。
yslow跌評分規則。
主要有12條:
盡可能少的http請求。。我們有141個請求(其中15個js請求,3個css請求,47個css background images請求),多的可怕。思考了下,為什麼把這個三種請求過多列為對頁面載入的重要不利因素呢,而過多的img請求並沒有列為不利因素呢?
發現原來這些請求都是可以避免的。
15個js和3個css完全可以通過特殊的辦法進行合併(這個技術部已經幫我們解決了,實在是太感謝了,嘿嘿。),這樣合併以後,一般情況下頁面上只會出現乙個js和乙個css(對js的封裝得有一定的要求)。
但是47個css background images請求改怎麼解決呢?為什麼頁面上的純img請求時合理的,而css background images請求過多就是不利因素了呢。這個我想了很久,總算明白,原來是這樣的:
一般頁面上的icon,欄目背景啊, 按鈕啊,我們都會用css背景來實現,而一般這個css背景用到的都是比較小的,所以完全可以把這些合併成乙個相對比較大的,這 樣頁面上只會出現乙個css background images請求,最多也就2-3個。後來仔細看了下雅虎美國的頁面,他們的確也是這樣做的,雖然這樣做需要花一定的時間來有規則的合併這些icon,欄 目背景,按鈕,以方便css呼叫,但是這樣做絕對是合算的,而且是有必要的,yslow也是極力推薦的。
2.use a cdn
這 項我們的評分是f級,最低。說實在的,我剛開始什麼是cdn都不知道。後來查了goodle才知道。cdn的全稱是content delivery network,即內容分發網路。其目的是通過在現有的internet中增加一層新的網路架構,將**的內容發布到最接近使用者的網路」邊緣」,使使用者可 以就近取得所需的內容,解決internet網路擁擠的狀況,提高使用者訪問**的響應速度。從技術上全面解決由於網路頻寬小、使用者訪問量大、網點分布不均 等原因所造成的使用者訪問**響應速度慢的問題。
看來上述的解釋後,基本上明白了 cdn是怎麼回事,後來諮詢了下中文站點sa,得知我們**目前的確還沒有做cdn的優化,但是據說我們有更加先進的技術來解決類似的問題(具體什麼技術 那就保密了),但是畢竟cdn也是個相當不錯的技術,所以在我們先進技術的基礎上在做cdn優化,肯定比現在更好,嘿嘿。據說sa明年會做幾個點的 ***。
3. add an expires header 設
置過期的http header.設定expires header可以將指令碼, 樣式表, , flash等快取在瀏覽器的cache中.
其實我們**也做了這個優化,至少圖 片在這個上做過優化,但是沒有做完全。我們的css和js都還沒有做過優化,倒是外部引入的乙個廣告js做了,呵呵。其實設定過期的http header 更應該做在指令碼, 樣式表, flash上.不過據說這個sa也是沒有做的,但是有一定的風險,因為js和css是有一定的邏輯,如果伺服器端和客戶端都存在快取的話,萬一出了什麼問 題,對我們以後查詢問題的所在和增加難度,不過我想兩者中是可以權衡和並存的。
4. gzip components
對 我們的頁面內容進行gzip格式的壓縮,gzip格式是一種很普遍的壓縮技術,幾乎所有的瀏覽器都有解壓gzip格式的能力,而且它可以壓縮的比例非常 大,一般壓縮率為85%,就是說伺服器端100k的頁面可以壓縮到25k左右的gzip格式的資料發給客戶端,客戶端收到gzip格式的資料後自動解壓縮 後顯示頁面。
這點我們**基本上是100%做到了,但是我們這項的評分並沒有達到想象中的a級,原因是出在我們的外部鏈結,比如我們首頁,有外部的廣告投放js,這個js說擁有的**是沒有做過gzip優化,連累了我們**,所以我們也只有b,或者c級。
5. put css at the top
把css外部鏈結放到頁面的頂部。
其實這個原則我們一般都遵守的,如果 把css外部鏈結作為邏輯的一部分出現在頁面頭部以下,我個人覺得這個本身就是個錯誤。還好,我們的頁面基本上都做到了,可是有些頁面比如list頁面, 還是出現了和邏輯掛鉤的css鏈結,原因是為了解決一些本來就不合理的產品邏輯。所以,我們web前端工程師有義務杜絕這些不合理的產品邏輯破壞我們的頁 面結果及頁面載入速度,不能為了實現而實現。
網頁優化外掛程式 YSlow
yslow是yahoo美國開發的乙個頁面評分外掛程式,非常的棒,從中我們可以看出我們頁面上的很多不足,並且可以知道我們改怎麼卻改進和優化。yslow跌評分規則。主要有12條 盡可能少的http請求。我們有141個請求 其中15個js請求,3個css請求,47個css background image...
YSlow 針對網頁效能優化設計
yslow是yahoo performance team針對網頁效能優化設計的一款firefox瀏覽器外掛程式,他依賴於firefox的firebug外掛程式執行,在使用它之前,你必須安裝firefox firebug.firebug和yslow是 前端開發人員必備的開發工具之一,如果你都沒用過,那...
Apache網頁優化 網頁快取
apache 的mod expries 模組會自動生成頁面頭部資訊中的 express標籤和 cache control 標籤。客戶端瀏覽器根據標籤決定下次訪問是在本地機器的快取中獲取頁面,不需要再次向伺服器發出請求,從而降低客戶端的訪問頻率和次數,達到減少不必要的流量和增加訪問速度的目的。1 先關...