在業界有篇很經典的文章，來源于yahoo的開發者社群，它講述的是如果優化自己的網站的速度，包括從伺服器端到用戶端。這篇文章影響了很多人，原文可以參照這裡：Best Practices for Speeding Up Your Web Site
而本文隻是用一種比較通俗的語言來闡述那幾種方式，以及如何來優化自己的部落格或網站。
1：減少自己網站的http請求次數
在現在的網站已經不是簡單的文字，這其中還包括更多更為豐富的元素。這樣理所當然的增加了服務端與用戶端之間的請求數，現在要做的就是盡可能的減少這些響應時間，這是網站優化的第一步，在原文提到：Tenni Theurer在他的部落格中所說，HTTP請求在無緩存情況下占去了40%到60%的響應時間，如何優化呢？
合并檔案（Combined files）。比如在你的網站很多不同的css檔案或script檔案，我們盡可能把它們合并到一個檔案，合并css一般不會出現什麼錯誤，合并script就要注意了。
圖檔拼合技術（CSS Sprites）。這個在我早些文章有提到，在這裡你可以了解到詳情。
圖檔地圖（Image maps）。比如我們要做一個比較華麗的導航欄，這其中也包括每個欄目的字型，然後通過map和area元素來确定坐标來進行事件處理，這樣就不想切圖後很有小圖檔那樣。确定圖檔的坐标可能會比較繁瑣且容易出錯，不具有可讀性，是以盡量還是不要實用這個。
盡量少使用内聯圖像（Inline images）。即一般我們在(X)THML會使用img的src來插入圖檔。這樣做不太好，盡量把它放在樣式表（stylesheets）裡面寫。
2：使用CDN（Content Delivery Network）内容分布網絡
這個可能退普通的個人使用者來說有些可望不可即了。因為現在的每個地域的網絡狀态都不一樣，比如網站的伺服器在成都，那麼每個地區的通路的速度都會不同，而CDN的作用在于由一系列分散到各個不同地理位置上的Web伺服器組成的，它提高了網站内容的傳輸速度。用于向使用者傳輸内容的伺服器主要是根據和使用者在網絡上的靠近程度來指定的。目前國内這種服務都比較貴，而且聽說對動态網站效果不是太好，我沒用過無從考證。不過向是新浪，搜狐，騰訊這些大型門戶網站都用到這種服務。
3：在http頭部加一個Expires或Cache-Control
浏覽器（和代理）使用緩存來減少HTTP請求的大小和次數以加快頁面通路速度。Web伺服器在HTTP響應中使用Expires檔案頭來告訴用戶端内容需要緩存多長時間。下面這個例子是一個較長時間的Expires檔案頭，它告訴浏覽器這個響應直到2010年4月15日才過期。
Expires: Thu, 15 Apr 2010 20:00:00 GMT
如果你使用的是Apache伺服器，可以使用ExpiresDefault來設定相對目前日期的過期時間。下面這個例子是使用ExpiresDefault來設定請求時間後10年過期的檔案頭：
ExpiresDefault “access plus 10 years”
要切記，如果使用了Expires檔案頭，當頁面内容改變時就必須改變内容的檔案名。依Yahoo!來說我們經常使用這樣的步驟：在内容的檔案名中加上版本号，如yahoo_2.0.6.js。
這個是需要在伺服器端進行設定。
4：使用Gzip壓縮檔案内容。
這個也是需要伺服器端支援的。說一下Gzip:
Gzip是目前最流行也是最有效的壓縮方式。這是由GNU項目開發并通過RFC 1952來标準化的。另外僅有的一個壓縮格式是deflate，但是它的使用範圍有限效果也稍稍遜色。
Gzip大概可以減少70%的響應規模。目前大約有90%通過浏覽器傳輸的網際網路交換支援gzip格式。如果你使用的是Apache，gzip子產品配置和你的版本有關：Apache 1.3使用mod_zip，而Apache 2.x使用moflate。
這裡有個網站可以檢查你的網站是不否啟用了Gzip，而且也可以看到壓縮率等資訊，如果沒有你可以自自己通過搜尋，開啟相應環境下的Gzip。
5：把樣式表放到頭部
在研究Yahoo!的性能表現時，我們發現把樣式表放到文檔的<head />内部似乎會加快頁面的下載下傳速度。這是因為把樣式表放到<head />内會使頁面有步驟的加載顯示。簡單的說你css檔案放到<head/>之前。
6：盡量把Scripts放到底部
這點我個人感覺很實用而且很有效，特效在現在的注重于使用者互動的網站，其中的javascript好幾個加起了也至少有好幾十K。浏覽器的解析順序是由上到下，而網站的主要的就是内容，把Scripts放到底部能夠保證訪客最先看到的是内容。這裡有個我優化的例子：用css的position屬性控制div順序。不過有時候把所有的Scripts放到底部可能會導緻部分功能失效，這點要特别注意，及時進行調試。
7：避免使用CSS表達式（Expression）
CSS表達式是動态設定CSS屬性的強大（但危險）方法。Internet Explorer從第5個版本開始支援CSS表達式。下面的例子中，使用CSS表達式可以實作隔一個小時切換一次背景顔色：
background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ );
如上所示，expression中使用了JavaScript表達式。CSS屬性根據JavaScript表達式的計算結果來設定。expression 方法在其它浏覽器中不起作用，是以在跨浏覽器的設計中單獨針對Internet Explorer設定時會比較有用。
表達式的問題就在于它的計算頻率要比我們想象的多。不僅僅是在頁面顯示和縮放時，就是在頁面滾動、乃至移動滑鼠時都會要重新計算一次。給CSS表達式增加一個計數器可以跟蹤表達式的計算頻率。在頁面中随便移動滑鼠都可以輕松達到10000次以上的計算量。
8：把JavaScript和CSS放到外部
這點也好容易了解。在實際應用中使用外部檔案可以提高頁面速度，因為JavaScript和CSS檔案都能在浏覽器中産生緩存。在浏覽不同頁面，但是都用同一CSS或JavaScript是就不必反複下載下傳。
内置在HTML文檔中的JavaScript和CSS則會在每次請求中随HTML文檔重新下載下傳。這雖然減少了HTTP請求的次數，卻增加了HTML文檔的大小。從另一方面來說，如果外部檔案中的JavaScript和CSS被浏覽器緩存，在沒有增加HTTP請求次數的同時可以減少HTML文檔的大小。
9：減少DNS的查找次數
這個怎麼了解呢？什麼是DNS呢？DNS（Domain Name System）中文可以叫域名系統，它提供的是從主機名到IP位址轉換的一段計算機程式，在很早以後人們是通過特定的IP來通路某個網站，但是這樣很難記，而DNS就是用一些比較好記的詞組作為域名，當訪客輸入域名DNS就把它轉化為相應的ip位址。一般情況下傳回給定域名對應的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查找次數和保持較高程度并行下載下傳兩者之間的權衡了。
10：壓縮和削減JavaScript和CSS
精簡是指從去除代碼不必要的字元減少檔案大小進而節省下載下傳時間。消減代碼時，所有的注釋、不需要的空白字元（空格、換行、tab縮進）等都要去掉。在 JavaScript中，由于需要下載下傳的檔案體積變小了進而節省了響應時間。精簡JavaScript中目前用到的最廣泛的兩個工具是JSMin和YUI Compressor。YUI Compressor還可用于精簡CSS。
混淆是另外一種可用于源代碼優化的方法。這種方法要比精簡複雜一些并且在混淆的過程更易産生問題。在對美國前10大網站的調查中發現，精簡也可以縮小原來代碼體積的21%，而混淆可以達到25%。盡管混淆法可以更好地縮減代碼，但是對于JavaScript來說精簡的風險更小。
除消減外部的腳本和樣式表檔案外，<script>和<style>代碼塊也可以并且應該進行消減。即使你用Gzip壓縮過腳本和樣式表，精簡這些檔案仍然可以節省5%以上的空間。由于JavaScript和CSS的功能和體積的增加，消減代碼将會獲得益處。
11:避免使用跳轉
使用跳轉會降低使用者體驗，而且在使用者和HTML中增加一個跳轉，會拖延頁面中的所有元素的現實。
有一種經常被網頁開發者忽略卻往往十分浪費響應時間的跳轉現象。這種現象發生在當URL本該有斜杠（/）卻被忽略掉時。例如，當我們要通路http://astrology.yahoo.com/astrology 時，實際上傳回的是一個包含301代碼的跳轉，它指向的是http://astrology.yahoo.com/astrology/ （注意末尾的斜杠）。在Apache伺服器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash來避免。
12：去掉重複的Scripts
重複引用腳本的情況在Internet Explorer中會産生不必要的HTTP請求，而在Firefox卻不會。在Internet Explorer中，如果一個腳本被引用兩次而且它又不可緩存，它就會在頁面加載過程中産生兩次HTTP請求。即時腳本可以緩存，當使用者重載頁面時也會産生額外的HTTP請求。
一個避免偶爾發生的兩次引用同一腳本的方法是在模闆中使用腳本管理子產品引用腳本。在HTML頁面中使用<script />标簽引用腳本的最常見方法就是：
<script type=”text/javascript” src=”menu_1.0.17.js”></script>
在PHP中可以通過建立名為insertScript的方法來替代：
<?php insertScript(”menu.js”) ?>
為了防止多次重複引用腳本，這個方法中還應該使用其它機制來處理腳本，如檢查所屬目錄和為腳本檔案名中增加版本号以用于Expire檔案頭等。
特别提醒下喜歡玩各種插件的wordpress朋友。很多時候我都發現同樣是一個Jquery架構在一個頁面就被多次加載。注意檢查頁面代碼。
13：配置ETag
這個同樣是需要在伺服器端進行操作
Entity tags（ETags）（實體标簽）是web伺服器和浏覽器用于判斷浏覽器緩存中的内容和伺服器中的原始内容是否比對的一種機制（“實體”就是所說的“内容”，包括圖檔、腳本、樣式表等）。
ETag的問題在于，它是根據可以辨識網站所在的伺服器的具有唯一性的屬性來生成的。當浏覽器從一台伺服器上獲得頁面内容後到另外一台伺服器上進行驗證時 ETag就會不比對，這種情況對于使用伺服器組和處理請求的網站來說是非常常見的。預設情況下，Apache和IIS都會把資料嵌入ETag中，這會顯著減少多伺服器間的檔案驗證沖突。
Apache 1.3和2.x中的ETag格式為inode-size-timestamp。即使某個檔案在不同的伺服器上會處于相同的目錄下，檔案大小、權限、時間戳等都完全相同，但是在不同伺服器上他們的内碼也是不同的。
IIS 5.0和IIS 6.0處理ETag的機制相似。IIS中的ETag格式為Filetimestamp:ChangeNumber。用ChangeNumber來跟蹤 IIS配置的改變。網站所用的不同IIS伺服器間ChangeNumber也不相同。不同的伺服器上的Apache和IIS即使對于完全相同的内容産生的ETag在也不相同，使用者并不會接收到一個小而快的304響應；相反他們會接收一個正常的200響應并下載下傳全部内容。如果你的網站隻放在一台伺服器上，就不會存在這個問題。但是如果你的網站是架設在多個伺服器上，并且使用Apache和 IIS産生預設的ETag配置，你的使用者獲得頁面就會相對慢一點，伺服器會傳輸更多的内容，占用更多的帶寬，代理也不會有效地緩存你的網站内容。即使你的内容擁有Expires檔案頭，無論使用者什麼時候點選“重新整理”或者“重載”按鈕都會發送相應的GET請求。
如果你沒有使用ETag提供的靈活的驗證模式，那麼幹脆把所有的ETag都去掉會更好。Last-Modified檔案頭驗證是基于内容的時間戳的。去掉ETag檔案頭會減少響應和下次請求中檔案的大小。微軟的這篇支援文稿講述了如何去掉ETag。在Apache中，隻需要在配置檔案中簡單添加下面一行代碼就可以了：
FileETag none
14：讓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應用程式更加快捷。
15、盡早重新整理輸出緩沖
當使用者請求一個頁面時，無論如何都會花費200到500毫秒用于背景組織HTML檔案。在這期間，浏覽器會一直空閑等待資料傳回。在PHP中，你可以使用 flush()方法，它允許你把已經編譯的好的部分HTML響應檔案先發送給浏覽器，這時浏覽器就會可以下載下傳檔案中的内容（腳本等）而背景同時處理剩餘的 HTML頁面。這樣做的效果會在背景煩惱或者前台較空閑時更加明顯。
輸出緩沖應用最好的一個地方就是緊跟在<head />之後，因為HTML的頭部分容易生成而且頭部往往包含CSS和JavaScript檔案，這樣浏覽器就可以在背景編譯剩餘HTML的同時并行下載下傳它們。 例子：
… <!– css, js –>
</head>
<?php flush(); ?>
<body>
… <!– content –>
為了證明使用這項技術的好處，Yahoo!搜尋率先研究并完成了使用者測試。
16、使用GET來完成AJAX請求
Yahoo!Mail團隊發現，當使用XMLHttpRequest時，浏覽器中的POST方法是一個“兩步走”的過程：首先發送檔案頭，然後才發送資料。是以使用GET最為恰當，因為它隻需發送一個TCP包（除非你有很多cookie）。IE中URL的最大長度為2K，是以如果你要發送一個超過2K的資料時就不能使用GET了。
一個有趣的不同就是POST并不像GET那樣實際發送資料。根據HTTP規範，GET意味着“擷取”資料，是以當你僅僅擷取資料時使用GET更加有意義（從語意上講也是如此），相反，發送并在服務端儲存資料時使用POST。
17. 延遲載入元件 (Post-load Components)和18. 預載入元件 (Preload Components)
簡單的說就有些你不必要的東西可以稍後在加載它們，而欲載入說的說的是
預先利用在浏覽器空檔時，載入一些使用者接下來可能會用到的檔案等
19：減少DOM元素數量(Reduce the Number of DOM Elements)
一個複雜的頁面意味着需要下載下傳更多資料，同時也意味着JavaScript周遊DOM的效率越慢。比如當你增加一個事件句柄時在500和5000個DOM元素中循環效果肯定是不一樣的。
大量的DOM元素的存在意味着頁面中有可以不用移除内容隻需要替換元素标簽就可以精簡的部分。你在頁面布局中使用表格了嗎？你有沒有僅僅為了布局而引入更多的<div>元素呢？也許會存在一個适合或者在語意是更貼切的标簽可以供你使用。
20：将元件放到不同的域名目錄
原因是這樣的，在同一個域名在同一時間隻能接受兩個請求并進行，如果用不同域名就可以實作平行下載下傳。比如我可以用img.g9net.com這個連結來存放圖檔并進行連結。比如騰訊QQ，域名是www.QQ.com。而它用來存放的圖檔域名位址大緻為img1.qq.com，而不是類似www.qq.com/img 這樣的目錄。
21：減少Iframe的數量
ifrmae元素可以在父文檔中插入一個新的HTML文檔。了解iframe的工作理然後才能更加有效地使用它，這一點很重要。
<iframe>優點：解決加載緩慢的第三方内容如圖示和廣告等的加載問題 ；Security sandbox ；并行加載腳本
<iframe>的缺點：即時内容為空，加載也需要時間 ；會阻止頁面加載 ；沒有語意
22：不要有404錯誤頁面
這個也好了解除了會破壞使用者體驗外，還會停止平行下載下傳，此外，有些浏覽器還會花時間去解析傳回來的404檔案。
23：減小Cookie體積
HTTP coockie可以用于權限驗證和個性化身份等多種用途。coockie内的有關資訊是通過HTTP檔案頭來在web伺服器和浏覽器之間進行交流的。是以保持coockie盡可能的小以減少使用者的響應時間十分重要。具體可以這樣做：
- 去除不必要的coockie 。
- 使coockie體積盡量小以減少對使用者響應的影響 。
- 注意在适應級别的域名上設定coockie以便使子域名不受影響 。
- 設定合理的過期時間。較早地Expire時間和不要過早去清除coockie，都會改善使用者的響應時間。
- 24：對于頁面内容使用無coockie域名
當浏覽器在請求中同時請求一張靜态的圖檔和發送coockie時，伺服器對于這些coockie不會做任何地使用。是以他們隻是因為某些負面因素而建立的網絡傳輸。所有你應該确定對于靜态内容的請求是無coockie的請求。建立一個子域名并用他來存放所有靜态内容。
如果你的域名是www.example.org，你可以在static.example.org上存在靜态内容。但是，如果你不是在 www.example.org上而是在頂級域名example.org設定了coockie，那麼所有對于static.example.org的請求都包含coockie。在這種情況下，你可以再重新購買一個新的域名來存在靜态内容，并且要保持這個域名是無coockie的。Yahoo!使用的是 ymig.com，YouTube使用的是ytimg.com，Amazon使用的是images-anazon.com等等。
使用無coockie域名存在靜态内容的另外一個好處就是一些代理（伺服器）可能會拒絕對coockie的内容請求進行緩存。一個相關的建議就是，如果你想确定應該使用example.org還是www.example.org作為你的一首頁，你要考慮到coockie帶來的影響。忽略掉www會使你除了把coockie設定到*.example.org外沒有其它選擇，是以出于性能方面的考慮最好是使用帶有www的子域名并且在它上面設定coockie。
25：減少DOM通路
使用JavaScript通路DOM元素比較慢，是以為了獲得更多的應該頁面，應該做到：
- 緩存已經通路過的有關元素 。
- 線下更新完節點之後再将它們添加到文檔樹中 。
- 避免使用JavaScript來修改頁面布局 。
有關此方面的更多資訊請檢視Julien Lecomte在YUI專題中的文章“高性能Ajax應該程式”。
26、開發智能事件處理程式
有時候我們會感覺到頁面反應遲鈍，這是因為DOM樹元素中附加了過多的事件句柄并且些事件句病被頻繁地觸發。這就是為什麼說使用event delegation（事件代理）是一種好方法了。如果你在一個div中有10個按鈕，你隻需要在div上附加一次事件句柄就可以了，而不用去為每一個按鈕增加一個句柄。事件冒泡時你可以捕捉到事件并判斷出是哪個事件發出的。
你同樣也不用為了操作DOM樹而等待onload事件的發生。你需要做的就是等待樹結構中你要通路的元素出現。你也不用等待所有圖像都加載完畢。
你可能會希望用DOMContentLoaded事件來代替onload，但是在所有浏覽器都支援它之前你可使用YUI 事件應用程式中的onAvailable方法。
27：使用<link>代替@import
前面的最佳實作中提到CSS應該放置在頂端以利于有序加載呈現。 在IE中，用@import把<link>當到底部的作用是一樣的，是以最好不要使用它。
28：避免使用濾鏡
IE獨有屬性AlphaImageLoader用于修正7.0以下版本中顯示PNG圖檔的半透明效果。這個濾鏡的問題在于浏覽器加載圖檔時它會終止内容的呈現并且當機浏覽器。在每一個元素（不僅僅是圖檔）它都會運算一次，增加了記憶體開支，是以它的問題是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工作。如果你确實需要使用 AlphaImageLoader，請使用下劃線_filter又使之對IE7以上版本的使用者無效。
29：優化圖像
這個簡單的說設計好後圖檔不要急于直接用，最好用圖檔壓縮工具壓縮。我本人很喜歡png這種格式，所用的工具為PNGOUTWin，效果相當不錯。
30：優化CSS Spirite
- 1：在Spirite中水準排列你的圖檔，垂直排列會稍稍增加檔案大小；
- 2：Spirite中把顔色較近的組合在一起可以降低顔色數，理想狀況是低于256色以便适用PNG8格式；
- 3：便于移動，不要在Spirite的圖像中間留有較大空隙。這雖然不大會增加檔案大小但對于使用者代理來說它需要更少的記憶體來把圖檔解壓為像素地圖。100×100的圖檔為1萬像素，而1000×1000就是100萬像素。
31：不要在HTML中縮放圖像
不要為了在HTML中設定長寬而使用比實際需要大的圖檔。如果你需要：
<img width=”100″ height=”100″ src=”mycat.jpg” alt=”My Cat” />
那麼你的圖檔（mycat.jpg）就應該是100×100像素而不是把一個500×500像素的圖檔縮小使用。
32：favicon.ico要小且可緩存
favicon.ico是位于伺服器根目錄下的一個圖檔檔案，也就是在浏覽器旁邊的那個網站小圖示。它是必定存在的，因為即使你不關心它是否有用，浏覽器也會對它送出請求，是以最好不要傳回一個404 Not Found的響應。由于是在同一台伺服器上，它每被請求一次coockie就會被發送一次。這個圖檔檔案還會影響下載下傳順序，例如在IE中當你在 onload中請求額外的檔案時，favicon會在這些額外内容被加載前下載下傳。為了減少favicon.ico帶來的弊端，要做到
1：檔案盡量地小，最好小于1K
2：在适當的時候（也就是你不要打算再換favicon.ico的時候，因為更換新檔案時不能對它進行重命名）為它設定Expires檔案頭。你可以很安全地把Expires檔案頭設定為未來的幾個月。你可以通過核對目前favicon.ico的上次編輯時間來作出判斷。
Imagemagick可以幫你建立小巧的favicon。
33：保持單個内容小于25K
這條限制主要是因為iPhone不能緩存大于25K的檔案。注意這裡指的是解壓縮後的大小。由于單純gizp壓縮可能達不要求，是以精簡檔案就顯得十分重要。
34：打包組成複合文本
這條限制主要是因為iPhone不能緩存大于25K的檔案。注意這裡指的是解壓縮後的大小。由于單純gizp壓縮可能達不要求，是以精簡檔案就顯得十分重要。
總結一下：
對于普通的前端工作者，最重要的就是關心CSS和Javascript等，比較好下手
對于CSS：把樣式表置于頂部：避免使用CSS表達式（Expression）；使用外部JavaScript和CSS；削減JavaScript和CSS；削減JavaScript和CSS
對于Javascript：把腳本置于頁面底部；使用外部JavaScript和CSS；削減JavaScript和CSS；剔除重複腳本；減少DOM通路
原文連結http://www.g9net.com/2009/04/05/optimize-the-speed-of-the-web-in-several-ways.html
![Javascript建構Bingo卡片遊戲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)