聲明：內容來源於網絡，基於雅虎的34條。
01. Minimize HTTP Requests 減少HTTP請求
Image、CSS、Script、Flash等等這些都會增加 HTTP 請求數，減少這些元素的數量就能減少響應時間。把多個JS、CSS在可能的情況下寫進一個文件；頁面裏直接寫入圖片也是不好的做法，應該寫進CSS裏，利用 CSS Sprite 將小圖拼合後利用 background 來查找定位；使用“圖片地圖”（在同一個張圖片上放置不同的URL，這種方式就可以減少對於圖片的請求。經測試，獲取圖片地圖的時間比獲取每個單獨的圖片時間上要快56%。圖片地圖有兩種方式，一是“服務器端圖片地圖”，一是“客戶端圖片地圖”。服務器端實現方式即將用戶點擊的XY座標傳入服務器，然後由服務器端映射相應的操作。客戶端的方式即在前臺用 MAP 標籤來實現。圖片地圖的方式，使編程維護變得困難了許多。）。
02. Use a Content Delivery Network 利用CDN技術
“內容分發網絡”。其目的是通過在現有的 Internet 中增加一層新的網絡架構，將網站的內容發佈到最接近用戶的網絡“邊緣”。
CDN的特點：
1、本地Cache加速 - 提高了企業站點（尤其含有大量圖片和靜態頁面站點）的訪問速度，並大大提高以上性質站點的穩定性。
2、鏡像服務 - 消除了不同運營商之間互聯的瓶頸造成的影響，實現了跨運營商的網絡加速，保證不同網絡中的用戶都能得到良好的訪問質量。
3、遠程加速 - 遠程訪問用戶根據DNS負載均衡技術，智能自動選擇 Cache 服務器，選擇最快的 Cache 服務器，加快遠程訪問的速度。
4、帶寬優化 - 自動生成服務器的遠程Mirror Cache服務器，遠程用戶訪問時從 Cache 服務器上讀取數據，減少遠程訪問的帶寬、分擔網絡流量、減輕原站點WEB服務器負載等。
5、集羣抗攻擊 - 廣泛分佈的CDN節點加上節點之間的智能冗於機制，可以有效地預防黑客入侵以及降低各種 DDOS 攻擊對網站的影響，同時保證較好的服務質量。
03. Add an Expires or a Cache-Control Header 設置“ 頭文件過期”或者“ 靜態緩存”
瀏覽器會用緩存來減少 HTTP 請求數來加快頁面加載的時間。如果頁面頭部加一個很長的過期時間，瀏覽器就會一直緩存頁面裏的元素。不過這樣如果頁面裏的東西變動的話就要改名字了，否則用戶端不會主動刷新。
（1）概念
Cache-control 用於控制HTTP緩存（在HTTP/1.0中可能部分沒實現，僅僅實現了Pragma: no-cache）
格式：Cache-Control: cache-directive
cache-directive 可以爲以下：
request時用到：
| "no-cache"
| "no-store"
| "max-age" "=" delta-seconds
| "max-stale" [ "=" delta-seconds ]
| "min-fresh" "=" delta-seconds
| "no-transform"
| "only-if-cached"
| "cache-extension"
response時用到：
| "public"
| "private" [ "=" <"> field-name <"> ]
| "no-cache" [ "=" <"> field-name <"> ]
| "no-store"
| "no-transform"
| "must-revalidate"
| "proxy-revalidate"
| "max-age" "=" delta-seconds
| "s-maxage" "=" delta-seconds
| "cache-extension"
部分說明：
根據是否可緩存分爲
Public 指示響應可被任何緩存區緩存。
Private 指示對於單個用戶的整個或部分響應消息，不能被共享緩存處理。這允許服務器僅僅描述當用戶的部分響應消息，此響應消息對於其他用戶的請求無效。
no-cache 指示請求或響應消息不能緩存（HTTP/1.0用Pragma的no-cache替換）
根據什麼能被緩存
no-store 用於防止重要的信息被無意的發佈。在請求消息中發送將使得請求和響應消息都不使用緩存。
根據緩存超時
max-age 指示客戶機可以接收生存期不大於指定時間（以秒爲單位）的響應。
min-fresh 指示客戶機可以接收響應時間小於當前時間加上指定時間的響應。
max-stale 指示客戶機可以接收超出超時期間的響應消息。如果指定max-stale消息的值，那麼客戶機可以
接收超出超時期指定值之內的響應消息。
Expires 表示存在時間，允許客戶端在這個時間之前不去檢查（發請求），等同max-age的
效果。但是如果同時存在，則被Cache-Control的max-age覆蓋。
格式：Expires = "Expires" ":" HTTP-date
例如：Expires: Thu, 01 Dec 1994 16:00:00 GMT （必須是GMT格式）
（2）應用
通過 HTTP 的 META 設置 expires 和 cache-control：
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2009 23:00:00 GMT" />
上述設置僅爲舉例，實際使用其一即可。這樣寫的話僅對該網頁有效，對網頁中的圖片或其他請求無效，並不會做任何cache。而且，客戶端的請求就多了，儘管只是檢查 Last-modified 狀態，但是請求增多對瀏覽速度必定有影響。
如果要對文件添加 cache 可以通過 apache 的 mod_expire 模塊（http://httpd.apache.org/docs/2.2/mod/mod_expires.html），寫法爲
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 days"
</IfModule>
記得 ExpiresActive 設爲On，我起先沒設置On，似乎怎樣YSlow都查不到緩存機制。這樣添加的話就是默認所有的。如果要針對個別MIME類型則可以：
ExpiresByType image/gif "access plus 5 hours 3 minutes"
另外，當點擊瀏覽器上的刷新，客戶端發送的請求中均是 max-age=0，表示 validate 操作，發送請求到服務器要求檢查 cache，再更新 cache，一般得到的是304 Not Modified，表示沒變動。
04. Gzip Components Gzip壓縮
Gzip格式是一種很普遍的壓縮技術，幾乎所有的瀏覽器都有解壓Gzip格式的能力，而且它可以壓縮的比例非常大，一般壓縮率爲85%。壓縮沒壓縮，可以到 這裏 做下測試。
05. Put Stylesheets at the Top 把CSS放頂部
使用LINK標籤將樣式表放在文檔的HEAD中，讓瀏覽者能儘早的看到網站的完整樣式。
HTML頁面是逐步呈現的，在用戶打開頁面的同時，我們需要考慮到用戶的體驗——打開網頁的速度。顯示頁面第一需求是HTML，而HTML是由一個一個的DIV組成，CSS是一切的基礎。
06. Put Scripts at the Bottom 把 JS 放底部
網站呈現完畢後再進行功能設置，當然這些JS要在你的加載過程中不影響內容表現。
因爲頁面是逐步呈現的，對於腳本以下的內容，會被阻塞。直到腳本加載完畢纔會繼續呈現頁面。正確的放位置
（1）最差的情況：將腳本放在頂部。會阻塞其後內容呈現、會阻塞其後組件下載。
（2）最佳的情況：將腳本放在底部。不會阻止頁面的呈現。
07. Avoid CSS Expressions 避免CSS Expressions
CSS表達式很可怕，這個只被IE支持的東西執行時候的運算量非常大，你移動一下鼠標它都要進行重計算的，但有時候爲了做瀏覽器的兼容必須要用到這個。
08. Make JavaScript and CSS External 將JS和CSS外鏈
前面講到了緩存這個事情，一些較爲公用的JS和CSS，我們可以使用外鏈的形式，譬如從Google外鏈Jquery文件。
09. Reduce DNS Lookups 減少DNS查找
減少網站從外部調用資源。
Internet 是通過 IP 地址來查找服務器的。DNS也是有開銷的。一般情況下瀏覽器查找一個給定的主機IP地址的時間是20~120ms。爲了減少DNS查找過程中所花費的時間，需要採取以下一些技術：
（1）DNS緩存
DNS查找可以緩存起來提高性能，在用戶計算機上，一個主機名被解析後相應的DNS信息會被存儲在操作系統的DNS緩存中，之後使用時就可以減少所需要的時間了。另外一些瀏覽器也有相應的DNS緩存功能。但是緩存的DNS數量是有限的。一般情況下操作系統在考慮TTL值，而瀏覽器會忽略該值而設置自己的時間。
（2）TTL
DNS緩存對帶來一些系統消耗，同時服務器的IP地址並不一定是一塵不變的。服務器可以表明記錄可以被緩存多久，查找返回的DNS記錄包含了一個存活時間（Time-to-live，TTL）值，它表明了客戶端可以對該記錄緩存多久。一般情況下可以設置爲1天。
10. Minify JavaScript and CSS 減小JS和CSS的體積
寫JS和CSS都是有技巧的，用最少的代碼實現同樣的功能，減少空白，增強邏輯性，用縮寫方式等等，當然也有不少工具也能夠幫你實現這一點。
11. Avoid Redirects 避免重定向
再寫入鏈接時，雖然“http://xxx.com”和“http://xxx.com/”僅有一個最後的“/”之差，但是結果是不同的，服務器需要花時間把前者重定向爲後者然後進行跳轉，這個要自己注意，也可以在Apache裏用Alias 或者 mod_rewrite 或者 DirectorySlash 解決。
另，重定向的用處有：連接不同的網站；跟蹤網站訪問量；美化URL。
12. Remove Duplicate Scripts 刪除重複腳本
重複調用的代碼瀏覽器並不會識別忽略，而是會再次運算一遍，這當然是大大的浪費。
13. Configure ETags 配置ETags
搞不清楚咋回事，總之我是在. htaccess裏把它刪除了。
14. Make Ajax Cacheable 緩存Ajax
Ajax是實時響應的，在瀏覽器接收到新的數據前，舊的數據被緩存，這樣能夠更好的提高效率。
15. Flush the Buffer Early 儘早的釋放緩衝
當用戶進行頁面請求時，服務器端需要花費200到500毫秒時間來拼合HTML，將寫在head與body之間，釋放緩衝，這樣可以將文件頭先發送出去，然後再發送文件內容，提高效率。
16. Use GET for AJAX Requests 用GET方式進行AJAX請求
Get 方法和服務器只有一次交互（發送數據），而 Post 要兩次（發送頭部再發送數據）。
17. Post-load Components 延遲加載組件
最先加載必須的組件進行頁面初始化，然後再加載其它，具體實現方式可以採用"隱藏IFRAME"或者javascript。"YUI Image Loader"是很好的例子。
18. Preload components 預加載組件
提前加載以後可能用到的東西，和延遲加載並不衝突，它的目的是爲後續請求提供更快的響應，參見Google首頁上的CSS sprites應用。
19. Reduce the Number of DOM Elements 減少DOM元素數量
複雜的頁面結構意味着更長的下載及響應時間，導致頁面渲染的變慢。更合理更高效的使用標籤來架構頁面，是好的前端的必備條件。
20. Split Components Across Domains 跨域分離組件
主要的目的是提高頁面組件並行下載能力，但注意不要過多，超過2-4個域名會引起上面說到的DNS查找浪費。IE對同一個域的請求，同時只能有兩個。實現可以利用CDN網絡或者其他分佈式計算網絡。
21. Minimize the Number of iframes 減少 IFrame 數量
IFrame 是 SEO 的大忌，需要更有效的利用 IFrame。
IFrame 優點：有利於下載緩慢的廣告等第三方內容，安全沙箱，並行下載腳本
IFrame 缺點：即使爲空也會有較大資源消耗，會阻止頁面的onload，非語義
22. No 404s 不要出現404頁面
站點本身裏（非搜索結果）出現404頁面，無意義的404頁面會影響用戶體驗並且會消耗服務器資源。
23. Reduce Cookie Size 減小Cookie
Cookie 在服務器及瀏覽器之間的通過文件頭進行交換，儘可能減小 Cookie 體積，設置合理的過期時間，能夠很好的提高效率。
24. Use Cookie-free Domains for Components 對組件使用無Cookie的域名
對靜態組件的 Cookie 讀取是一種浪費，使用另一個無Cookie的域名來存放你的靜態組件式一個好方法，或者也可以在Cookie中只存放帶www的域名。
25. Minimize DOM Access 減少DOM的訪問次數
JS 訪問 DOM 是很慢的，儘量不要用 JS 來設置頁面佈局。
26. Develop Smart Event Handlers 開發靈活的事件處理句柄
DOM 樹上過多的元素被加入事件句柄的話，反應效率肯定會低，YUI事件工具有一個 onAvailable 方法可以幫助你靈活的設置 DOM 事件句柄。
27. Choose <link> over @import 使用<link>而非 @import
在 IE 中使用 @import 就和在頁面底部用 <link> 一樣。
28. Avoid Filters 避免過濾器的使用
如果需要Alpha透明，不要使用 AlphaImageLoader ，它效率低下而且只對IE6及以下的版本適用，用PNG8圖片。如果你非要使用，加上_filter以免影響IE7+用戶。
29. Optimize Images 優化圖片
將你的 GIF 轉爲 PNG8 會是個減小體積的好辦法，另外有很多方法處理你的JPG及PNG圖片以達到優化效果。
30. Optimize CSS Sprites 優化CSS Sprites
在CSS Sprites中豎直並儘量緊湊的排列圖片，儘量將顏色相似的圖片排在一起，會減小圖片本身的大小及提高頁面圖片顯示速度。
31. Don't Scale Images in HTML 不要在HTML中縮放圖片
圖片要用多大的就用多大的，不要偷懶。
32. Make favicon.ico Small and Cacheable 縮小 favicon.ico 的大小並緩存它
站點的瀏覽器ICO應該不是經常換吧，那就長時間的緩存它，並且最好控制在1K以下。
33. Keep Components under 25K 保證組件在25K以下
iPhone不能緩存25K以上的組件，並且這還是要在被壓縮前。
34. Pack Components into a Multipart Document 將組件打包進一個多部分的文檔中
就好像在郵件中加入附件一樣，一個HTTP請求就夠了，但是這一技術需要確保你的代理支持，iPhone就不支持。
內聯圖象：
使用“data: URL scheme”在實際的頁面嵌入圖像數據。平時我們常見的是：http,ftp,mailto 等幾種模式，實際上data:URL模式早在1995年已經提出，它表示將小塊數據直接融入到鏈接URL中。其模式如下：data:[<mediatype>][;base64],<data>
第一個參數表示文件格式，如：image/gif。
可惜的是，目前IE並不支持該模式。另外數據大小也受到限制。