Excetional Performance 團隊總結出了一系列可以提高網站速度的方法??梢苑譃?7大類 35條。包括內容 、服務器 、 CSS 、 javaScript 、Cookie 、圖片 、移動應用 ,七部分。
一、內容部分
1、盡量減少 HTTP請求次數
終端用戶響應的時間中,有 80%用于下載各項內容。這部分時間包括下載頁面中的圖像、樣式表、腳本、 Flash等。通過減少頁面中的元素可以減少 HTTP請求的次數。這是提高網頁速度的關鍵步驟。
減少頁面組件的方法其實就是簡化頁面設計。那么有沒有一種方法既能保持頁面內容的豐富性又能達到加快響應時間的目的呢?這里有幾條減少HTTP請求次數同時又可能保持頁面內容豐富的技術。
合并文件是通過把所有的腳本放到一個文件中來減少 HTTP請求的方法,如可以簡單地把所有的 CSS文件都放入一個樣式表中。當腳本或者樣式表在不同頁面中使用時需要做不同的修 改,這可能會相對麻煩點,但即便如此也要把這個方法作為改善頁面性能的重要一步。
CSS SPRites是減少圖像請求的有效方法。把所有的背景圖像都放到一個圖片文件中,然后通過 CSS的 background-image和 background-position屬性來顯示圖片的不同部分;
圖片地圖是把多張圖片整合到一張圖片中。雖然文件的總體大小不會改變,但是可 以減少 HTTP請求次數。圖片地圖只有在圖片的所有組成部分在頁面中是緊挨在一起的時候才能 使用,如導航欄。確定圖片的坐標和可能會比較繁瑣且容易出錯,同時使用圖片地圖導航也不具有可讀性,因此不推薦這種方法;
內聯圖像是使用 data:URL scheme的方法把圖像數據加載頁面中。這可能會增加頁面的大 小。把內聯圖像放到樣式表(可緩存)中可以減少 HTTP請求同時又避免增加頁面文件的大小。但是內聯圖像現在還沒有得到主流瀏覽器的 支持。
減少頁面的 HTTP請求次數是你首先要做的一步。這是改進首次訪問用戶等待時間的最重要的方法。 如同 Tenni Theurer的他的博客 Browser Cahe Usage - Exposed!中所說, HTTP請求在無緩存情況下占去了 40%到 60%的響應時間。讓那些初次訪問你網站的人獲得更加快速的體驗吧!
2、減少 DNS查找次數
域名系統( DNS)提供了域名和 IP的對應關系,就像電話本中人名和他們的電話號碼的關系一樣。當你在瀏覽器地址欄中 輸入 www.yahoo.com 時, DNS解析服務器就會返回這個域名對應的 IP地址。 DNS解析的過程同樣也是需要時間的。一般情況下返回給定域名對應的 IP地址會花費 20到 120毫秒的時間。而且在這個過程中瀏覽器什么都不會做直到 DNS查找完畢。
緩存 DNS查找可以改善頁面性能。這種緩存需要一個特定的緩存服務器,這種服務器一般屬于用戶的 ISP提供商或者本地局域網控制,但是它同樣會在用戶使用的計算機上產生緩存。 DNS信息會保留在操作系統的 DNS緩存中(微軟 Windows系統中 DNS Client Service)。大多數瀏覽器有獨立于操作系統以外的自己的緩存。由于瀏覽器有自己的緩存記錄,因此在一次請求中它不會受到操作系統的影響。
Internet Explorer 默認情況下對 DNS查找記錄的緩存時間為 30分鐘,它在注冊表中的鍵值為 DnsCacheTimeout。 Firefox對 DNS的查找記錄緩存時間為 1分鐘,它在配置文件中的選項為 network.dnsCacheExpiration( Fasterfox把這個選項改為了 1小時)。
當客戶端中的 DNS緩存都為空時(瀏覽器和操作系統都為空), DNS查找的次數和頁面中主機名的數量相同。這其中包括頁面中 URL、圖片、腳本文件、樣式表、Flash對象等包含的主機名。減少主機名的數量可以減少DNS查找次數。
減少主機名的數量還可以減少頁面中并行下載的數量。減少 DNS查找次數可以節省響應時間,但是減少并行下載卻會增加響應時間。我的指導原則是 把這些頁面中的內容分割成至少兩部分但不超過四部分。這種結果就是在減少 DNS查找次數和保持較高程度并行下載兩者之間的權衡了。
3、避免跳轉
跳轉是使用 301和 302代碼實現的。下面是一個響應代碼為 301的 HTTP頭:
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
瀏覽器會把用戶指向到 Location中指定的 URL。頭文件中的所有信息在一次跳轉中都是必需的,內容部分可以為空。不管他們的名 稱, 301和 302響應都不會被緩存除非增加一個額外的頭選項,如 Expires或者 Cache-Control來指定它緩存。 <meat />元素的刷新標簽和Javascript也可以實現 URL的跳轉,但是如果你必須要跳轉的時候,最好的方法就是使用標準的 3XXHTTP狀態代碼,這主要是為了確保“后退”按鈕可以正確地使用。
但是要記住跳轉會降低用戶體驗。在用戶和 HTML文檔中間增加一個跳轉,會拖延頁面中所有元素的顯示,因為在 HTML文件被加載前任何文件(圖像、 Flash等)都不會被下載。
有一種經常被網頁開發者忽略卻往往十分浪費響應時間的跳轉現象。 這種現象發生在當 URL本該有斜杠( /)卻被忽略掉時。例如,當我們要訪問 http://astrology.yahoo.com/astrology 時,實際上返回的是一個包含 301代碼的跳轉,它指向的是 http://astrology.yahoo.com/astrology/(注意末尾的斜杠)。在 Apache服務器中可以使用 Alias 或者 mod_rewrite或者 the DirectorySlash來避免。
連接新網站和舊網站是跳轉功能經常被用到的另一種情況。這種情況 下往往要連接網站的不同內容然后根據用戶的不同類型(如瀏覽器類型、用戶賬號所屬類型)來進行跳轉。使用跳轉來實現兩個網站的切換十分簡單,需要的代碼量 也不多。盡管使用這種方法對于開發者來說可以降低復雜程度,但是它同樣降低用戶體驗。一個可替代方法就是如果兩者在同一臺服務器上時使用 Alias和 mod_rewrite和實現。如果是因為域名的不同而采用跳轉,那么可以通過使用 Alias或者 mod_rewirte建立 CNAME(保存一個域名和另外一個域名之間關系的DNS記錄)來替代。
4、可緩存的 Ajax
Ajax 經常被提及的一個好處就是由于其從后臺服務器傳輸信息 的異步性而為用戶帶來的反饋的即時性。但是,使用 Ajax并不能保證用戶不會在等待異步的 JavaScript和 xml響應上花費時間。在很多應用中,用戶是否需要等待響應取決于 Ajax如何來使用。例如,在一個基于 Web的 Email客戶端中,用戶必須等待 Ajax返回符合他們條件的郵件查詢結果。記住一點,“異步”并不異味著“即時”,這 很重要。
為了提高性能,優化 Ajax響應是很重要的。提高 Ajxa性能的措施中最重要的方法就是使響應具有可緩存性,具體的討論可以查看 Add an Expires or a Cache-Control Header。 其它的幾條規則也同樣適用于Ajax:
Gizp 壓縮文件
減少 DNS查找次數
精簡 JavaScript
避免跳轉
配置 ETags
讓我們來看一個例子:一個 Web2.0的 Email客戶端會使用 Ajax來自動完成對用戶地址薄的下載。如果用戶在上次使用過 Email web應用程序后沒有對地址薄作任何的修改,而且 Ajax響應通過 Expire或者 Cacke-Control頭來實現緩存,那么就可以直接從上一次的緩存中讀取地址薄 了。必須告知瀏覽器是使用緩存中的地址薄還是發送一個新的請求。這可以通過為讀取地址薄的 Ajax URL增加一個含有上次編輯時間的時間戳來實現,例如, &t=11900241612等。如果地址薄在上次下載后沒有被編輯過,時間 戳就不變,則從瀏覽器的緩存中加載從而減少了一次 HTTP請求過程。如果用戶修改過地址薄,時間戳就會用來確定新的 URL和緩存響應并不匹配,瀏覽器就會重要請求更新地址薄。
即使你的 Ajxa響應是動態生成的,哪怕它只適用于一個用戶,那么它也應該被緩存起來。這樣做 可以使你的 Web2.0應用程序更加快捷。
5、推遲加載內容
你可以仔細看一下你的網頁,問問自己“哪些內容是頁面呈現時 所必需首先加載的?哪些內容和結構可以稍后再加載?
把整個過程按照 onload事件分隔成兩部分, JavaScript是一個理想的選擇。例如,如果你有用于實現拖放和動畫的 JavaScript,那么它就以等待稍后加載,因為頁面上的拖放元素是在初始化呈現 之后才發生的。其它的例如隱藏部分的內容(用戶操作之后才顯現的內容)和處于折疊部分的圖像也可以推遲加載
工具可以節省你的工作量: YUI Image Loader可以幫你推遲加載折疊部分的圖片, YUI Get utility是包含 JS和 CSS的便捷方法。比如你可以打開 Firebug的 Net選項卡看一下 Yahoo的首頁。
當性能目標和其它網站開發實踐一致時就會相得益彰。這種情況 下,通過程序提高網站性能的方法告訴我們,在支持 JavaScript的情況下,可以先去除用戶體驗,不過這要保證你的網站在沒有 JavaScript也可以正常運行。在確定頁面運行正常后,再加載腳本來實現如拖放和動畫等更加花哨的效果。
6、預加載
預加載和后加載看起來似乎恰恰相反,但實際上預加載是為了實 現另外一種目標。預加載是在瀏覽器空閑時請求將來可能會用到的頁面內容(如圖像、樣式表和腳本)。使用這種方法,當用戶要訪問下一個頁面時,頁面中的內容 大部分已經加載到緩存中了,因此可以大大改善訪問速度。
下面提供了幾種預加載方法:
無條件加載:觸發 onload事件時,直接加載額外的頁面內容。以 Google.com為例,你可以看一下它的 spirit image圖像是怎樣在 onload中加載的。這個 spirit image圖像在 google.com主頁中是不需要的,但是卻可以在搜索結果頁面中用到它。
有條件加載:根據用戶的操作來有根據地判斷用戶下面可能去往的頁面并相應的預 加載頁面內容。在 search.yahoo.com中你可以看到如何在你輸入內容時加載
新聞熱點
疑難解答