主頁 > 知識庫 > 用YSlow分析和優(yōu)化頁面的方法第1/2頁

用YSlow分析和優(yōu)化頁面的方法第1/2頁

熱門標(biāo)簽:福州外呼系統(tǒng)中間件 德州外呼系統(tǒng)排名 好看的地圖標(biāo)注圖標(biāo)下載 機(jī)器人電銷有什么用 地圖標(biāo)注員怎么去做 上海電銷卡外呼系統(tǒng)廠家 百度地圖標(biāo)注備注 貴州全自動外呼系統(tǒng)廠家 威海人工智能電銷機(jī)器人系統(tǒng)
仔細(xì)研究了下YSlow跌評分規(guī)則。

主要有12條:

1. Make fewer HTTP requests 盡可能少的http請求。。我們有141個請求(其中15個JS請求,3個CSS請求,47個CSS background images請求),多的可怕。思考了下,為什么把這個三種請求過多列為對頁面加載的重要不利因素呢,而過多的IMG請求并沒有列為不利因素呢?

發(fā)現(xiàn)原來這些請求都是可以避免的。

15個JS和3個CSS完全可以通過特殊的辦法進(jìn)行合并(這個技術(shù)部已經(jīng)幫我們解決了,實在是太感謝了,嘿嘿。),這樣合并以后,一般情況下頁面上只會出現(xiàn)一個JS和一個CSS(對JS的封裝得有一定的要求)。

但是47個CSS background images請求改怎么解決呢?為什么頁面上的純IMG請求時合理的,而CSS background images請求過多就是不利因素了呢。這個我想了很久,總算明白,原來是這樣的:

一般頁面上的ICON,欄目背景啊,圖片按鈕啊,我們都會用圖片CSS背景來實現(xiàn),而一般這個圖片CSS背景用到的圖片都是比較小的,所以完全可以把這些圖片合并成一個相對比較大的圖片,這樣頁面上只會出現(xiàn)一個CSS background images請求,最多也就2-3個。后來仔細(xì)看了下雅虎美國的頁面,他們的確也是這樣做的,雖然這樣做需要花一定的時間來有規(guī)則的合并這些ICON,欄目背景,圖片按鈕,以方便CSS調(diào)用,但是這樣做絕對是合算的,而且是有必要的,YSlow也是極力推薦的。

2.Use a CDN 這項我們的評分是F級,最低。說實在的,我剛開始什么是CDN都不知道。后來查了GOODLE才知道。CDN的全稱是Content Delivery Network,即內(nèi)容分發(fā)網(wǎng)絡(luò)。其目的是通過在現(xiàn)有的Internet中增加一層新的網(wǎng)絡(luò)架構(gòu),將網(wǎng)站的內(nèi)容發(fā)布到最接近用戶的網(wǎng)絡(luò)”邊緣”,使用戶可以就近取得所需的內(nèi)容,解決Internet網(wǎng)絡(luò)擁擠的狀況,提高用戶訪問網(wǎng)站的響應(yīng)速度。從技術(shù)上全面解決由于網(wǎng)絡(luò)帶寬小、用戶訪問量大、網(wǎng)點分布不均等原因所造成的用戶訪問網(wǎng)站響應(yīng)速度慢的問題。

看來上述的解釋后,基本上明白了CDN是怎么回事,后來咨詢了下中文站點SA,得知我們網(wǎng)站目前的確還沒有做CDN的優(yōu)化,但是據(jù)說我們有更加先進(jìn)的技術(shù)來解決類似的問題(具體什么技術(shù)那就保密了),但是畢竟CDN也是個相當(dāng)不錯的技術(shù),所以在我們先進(jìn)技術(shù)的基礎(chǔ)上在做CDN優(yōu)化,肯定比現(xiàn)在更好,嘿嘿。據(jù)說SA明年會做幾個點的CND。

3. Add an Expires header 設(shè)置過期的HTTP Header.設(shè)置Expires Header可以將腳本, 樣式表, 圖片, Flash等緩存在瀏覽器的Cache中.

其實我們網(wǎng)站也做了這個優(yōu)化,至少圖片在這個上做過優(yōu)化,但是沒有做完全。我們的CSS和JS都還沒有做過優(yōu)化,倒是外部引入的一個廣告JS做了,呵呵。其實設(shè)置過期的HTTP Header 更應(yīng)該做在腳本, 樣式表, Flash上.不過據(jù)說這個SA也是沒有做的,但是有一定的風(fēng)險,因為JS和CSS是有一定的邏輯,如果服務(wù)器端和客戶端都存在緩存的話,萬一出了什么問題,對我們以后查找問題的所在和增加難度,不過我想兩者中是可以權(quán)衡和并存的。

4. Gzip components 對我們的頁面內(nèi)容進(jìn)行Gzip格式的壓縮,Gzip格式是一種很普遍的壓縮技術(shù),幾乎所有的瀏覽器都有解壓Gzip格式的能力,而且它可以壓縮的比例非常大,一般壓縮率為85%,就是說服務(wù)器端100K的頁面可以壓縮到25K左右的Gzip格式的數(shù)據(jù)發(fā)給客戶端,客戶端收到Gzip格式的數(shù)據(jù)后自動解壓縮后顯示頁面。

這點我們網(wǎng)站基本上是100%做到了,但是我們這項的評分并沒有達(dá)到想象中的A級,原因是出在我們的外部鏈接,比如我們首頁,有外部的廣告投放JS,這個JS說擁有的網(wǎng)站是沒有做過GZIP優(yōu)化,連累了我們網(wǎng)站,所以我們也只有B,或者C級。

5. Put CSS at the top 把CSS外部鏈接放到頁面的頂部。

其實這個原則我們一般都遵守的,如果把CSS外部鏈接作為邏輯的一部分出現(xiàn)在頁面頭部以下,我個人覺得這個本身就是個錯誤。還好,我們的頁面基本上都做到了,可是有些頁面比如LIST頁面,還是出現(xiàn)了和邏輯掛鉤的CSS鏈接,原因是為了解決一些本來就不合理的產(chǎn)品邏輯。所以,我們WEB前端工程師有義務(wù)杜絕這些不合理的產(chǎn)品邏輯破壞我們的頁面結(jié)果及頁面加載速度,不能為了實現(xiàn)而實現(xiàn)。

12下一頁閱讀全文

標(biāo)簽:岳陽 白城 撫州 葫蘆島 南陽 南陽 邵陽 泉州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《用YSlow分析和優(yōu)化頁面的方法第1/2頁》,本文關(guān)鍵詞  用,YSlow,分析,和,優(yōu)化,頁,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《用YSlow分析和優(yōu)化頁面的方法第1/2頁》相關(guān)的同類信息!
  • 本頁收集關(guān)于用YSlow分析和優(yōu)化頁面的方法第1/2頁的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章