01. Minimize HTTP Requests 減少HTTP請求
Image、CSS、Script、Flash等等這些都會增加HTTP 請求數，減少這些元素的數量就能減少回應時間。把多個JS、CSS在可能的情況下寫入一個文件；頁面裡直接寫入圖片也是不好的做法，應該寫入CSS裡，利用CSS Sprite 將小圖拼合後利用background 來查找定位；使用“圖片地圖」（在同一張圖片上放置不同的URL，這種方式就可以減少對於圖片的請求。經測試，獲取圖片地圖的時間比獲取每個單獨的圖片時間上要快56%。圖片地圖有兩種方式，一是“伺服器端圖片地圖”，一是“客戶端圖片地圖”。在前台用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並不支援該模式。另外資料大小也受到限制。
聲明：內容來自網絡，基於雅虎的34條。