1、最小化的HTTP請求（content）

因為在一個頁面中所花費的時間大多數是在scripts、stylesheets、images和flashs等等，這些都是通過HTTP請求來載入的，這些大概佔用了載入時間的70%到80%。因此，減少這些載入時間可以大大優化頁面的載入速度。使用下面的幾種方法可以有效提高載入速度：

1. 將所有的scripts指令碼程式碼組合成一個單獨的script指令碼程式碼，將可以合併的所有css合成為一個stylesheet.
2. CSS Sprites（國內稱為：CSS精靈），是一種網頁圖片應用處理方式。它允許你將一個頁面設計到的所有零星圖片包含到一張大圖片中去（要求：不高於200KB的單張圖片，因為這樣可以保證載入時間和未處理前的時間差不多）.
3. 影象對映（Image Maps）：就是圖片分成幾個區域，或者被稱之為“熱區”的影象；點選“熱區”會顯示一個網頁。注意：除AltaVista、Google支援Image Maps，其他引擎不支援。當”蜘蛛“程式（即爬蟲）遇到這種結構時，往往不知所措。因此在sem優化（http://baike.baidu.com/link?url=3HuwBV0Oq8OrU5tcfG6TIHjWrQsXsDqTeNHZ_BEfVbsOONRzc99ge0cYiYSxfJV6b0x0c4-ihCoCZi8AX-qvtK）中，儘量不要設定Image Map連結
4. 內嵌影象（Inline images）使用data URI scheme

舉例：假設有以下影象 http URI scheme 標準形式：<img src="http://www.example.com/images/1.png" /> data URI scheme方式：<img src=data:image/png;base64,iDJJK.....> 上面標籤內容解析：data-取得資料的協議名稱            image/png-資料型別       base64-資料編碼方式    iDJJK....-編碼後的資料            :,;-data URI scheme指定分隔符 這樣，我們就將一張圖片資料內建到http中，節省了一個HTTP區別請求。 在css中使用data URI scheme：body{background-image:url("data:image/png;base64,iDDJJ....");} 注意：瀏覽器不會快取這種影象，若該影象在網頁很多地方使用，會加大網頁內容，延長下載時間。 解決辦法：在一個css class中加入data URL，在需要顯示影象的區塊呼叫這個class 例如：.logobg{background:url(data....)} <div class="navigation logobg">..hello..<div class="footer logobg">.... IE8之前不支援data URI scheme 解決辦法：使用XHTML解決data URI  scheme 瀏覽器相容問題

2、使用CDN（Content Delivery Network）內容分發網路（伺服器server）

其思路是儘可能避開網際網路上可能影響資料傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。通過在網路各處放置節點伺服器所構成的在現有的網際網路基礎之上的一層智慧虛擬網路，CDN系統能夠實時地根據網路流量和各節點的連線、負載狀況以及到使用者的距離和響應時間等綜合資訊將使用者的請求重新導向離使用者最近的服務節點上。其目的是使使用者可就近取得所需內容，解決 Internet網路擁擠的狀況，提高使用者訪問網站的響應速度。

3、新增快取欄位（Expires）或一個快取控制頭（Cache-control）（伺服器server）

在這個規則中有兩個方面的內容

1. 對於靜態的元件，例如不經常變化的css、js等，可適當設定快取時間，使得瀏覽器下次只拿對應快取的檔案，而不用想伺服器發出請求。（注意伺服器的最長快取時間）
2. 對於動態的元件，即經常變化的，例如：一些圖片等。利用Cache-Control頭可以控制瀏覽器不要拿快取，而是向伺服器發出請求

4、壓縮技術（Gzip Components）（伺服器server）

將scripts、stylesheet、images和flash等等壓縮為一個zip檔案，之後將zip檔案連結進頁面來減少http request回撥來加快載入速度。通過HTTP 頭的Accept-Encoding為gzip，deflate之後再response頭設定Content-Encoding：gzip來解壓壓縮包檔案，就可以將這些檔案匯入到頁面的對應部分。注意：當上述檔案數量比較少時，不建議使用上述方法，因為壓縮後有可能比未壓縮前還大，形成相反效果。

5、將樣式（stylesheet）放在頂部，將指令碼（scripts）放在底部（CSS\javascript）

將css放在頂部，可以先載入，然使用者先看到網頁的整體樣式，將指令碼放在底部，可以在使用者看到整體樣式之後顯示功能設定，當然這些指令碼前提是不影響到樣式顯示效果。

6、避免使用css表示式（CSS）

css表示式會增加運算量，影響網頁載入速度。

7、通過外聯方式載入css和javascript到頁面（javascript、CSS）

這個不會與減少HTTP request請求載入元件衝突。因為：如果不用外聯方式載入檔案，則每次載入頁面的時候，都需要去載入內聯的javascript和css內容，這樣使得HTML容量變大，從而引起下載速度變慢。而使用外聯方式的好處在於瀏覽器會快取這些檔案，第二次載入頁面的時候瀏覽器可以拿這些檔案的快取，從而使HTML頁面“變小”。因此，需要看具體情況，再採取對應的最有效的措施。

8、減少DNS查詢次數（content）

9、壓縮javascript和css（javascript、CSS）

壓縮javascript和css，使得檔案變小，因而在載入中速度加快。這裡有兩個js的壓縮工具：JSMin和YUI。

10、儘量避免重定向（content）

重定向時會使得瀏覽器位址列發生變化。HTTP頭裡包含了重定向所需的資訊。響應的主體一般都是空的。301或者302響應都不會被實際快取，除非新增額外的頭部，比如Expires或者Cache-Control指明需要將這些快取。meta refresh標籤和javascript也可以將使用者重定向到不同的URL，但如果你必須使用重定向，最好的辦法是使用標準3XX HTTP狀態程式碼，以便使後退按鈕能夠工作正常。 有一種情況需要注意的：那就是當地址中應當有一個左斜線的時候卻沒有。例如：http://www.baidu.com/test會導致一個301效應並重定向到http://www.baidu.com/test/。 使用重定向的常見場景： 1、當註冊或者登陸成功的時候需要讓使用者知道頁面的跳轉 2、當連線舊網站和新網站時

11、移除重複的指令碼程式碼（javascript）

12、配置ETag（實體標籤Entity Tag）（server）

ETag是屬於HTTP協議的一部分，也是所有Web伺服器都應該支援這個特性。它的作用是用一個特殊的字串來表示某個資源的“版本”，當瀏覽器來請求時，可以比較，如果ETag一致，則表示該資源沒有修改過，瀏覽器可以使用自己快取的版本。

13、使AJAX可以快取（content）

AJAX是用於伺服器非同步傳輸資料的，每一步都需要新的資料。但是，在某些情況下，我們需要認識到AJAX快取同樣也很重要。例如：當我們搜尋的內容是通過AJAX形式得到結果的時候，當用戶搜尋同一個內容而且Last modified沒有修改的情況下，可以使用上次的快取。一些原則也適用於這裡，例如：壓縮元件、減少DNS次數、最小化javascript、避免重定向和配置ETag等。

14、儘早重新整理緩衝（server）

當用戶請求頁面時，伺服器端需要花費200到500毫秒的時間來組成HTML，將寫在head與body之間，釋放緩衝，這樣可以將檔案頭先發出去，然後再發送檔案內容，提高效率。

15、用get方式進行AJAX請求（server）

get方法和伺服器只有一次傳送資料，而post要兩次，一次是傳送頭部，另外一次是傳送資料。

16、延遲載入元件（content）

最先載入必須的元件進行頁面的初始化工作，然後再載入其他。

17、提前載入元件（content）

提前載入以後可能用到的東西，目的是為後序請求提供更快的響應。

18、減少DOM元素數量（content）

複雜的頁面結構意味著更長的下載時間及響應時間，更合理的使用標籤來架構頁面，是好的前端必備條件。

19、跨域分離元件（content）

頁面元件多個來源可以增大你的平行下載量，但注意不要過多，超過2-4域名會引起上面說到的DNS查詢浪費。

20、減少iframe數量（content）

需要有效的利用iframes。iframe優點：有利於下載緩慢的第三方內容；缺點：即使為空也要消耗較大的資源，會阻止頁面的onload。

21、不要出現404頁面（content）

無意義的404頁面會影響使用者的體驗還有資源的浪費。

22、縮小cookie的大小（cookie）

cookie在伺服器及瀏覽器之間通過檔案頭進行交換，儘可能縮小cookie體積，設定合理的過期時間能夠有效提高效率。

23、針對web元件使用域名無關性的cookie（cookie）

這裡的元件多指靜態檔案，例如：圖片css等。yahoo!的靜態檔案都在yimg.com上，客戶端請求靜態檔案的時候，減少了cookie的反覆傳輸對主域名（yahoo.com）的影響

24、減少DOM的訪問（javascript）

有一下三條建議： 1、快取已經訪問過的元素。 2、離線更新節點，然後將它們新增到樹。 3、避免javascript輸出頁面佈局。

25、開發智慧的事件處理程式（javascript）

26、選擇<link>而不是@import（CSS）

27、避免使用過濾器（Filter）（CSS）

28、優化影象（images）

儘可能使用PNG格式圖片，因為與GIF和JPG圖片相比，PNG有更多的功能和更小的尺寸。可使用工具對PNG進行優化。

29、不要在頁面中使用縮放的圖片（images）

有時候沒有找到適合大小的圖片，會對圖片進行拉伸等處理，這樣做會使圖片很難看，進而使頁面難看，影響使用者體驗。

30、使用更小及可以快取的favicon.ico（images）

31、保持元件在25K以下（mobile）

32、將頁面元件打包成一個多部分組成的文件

將頁面元件打包成一個多部分組成的文件目的是減少HTTP請求。注意：當你使用這條原則的時候，必須檢查是否支援。

33、避免空的圖片路徑（src）（server）

避免空的圖片路徑，因為這樣會產生一次請求。