內容再豐富的網站，如果慢到無法訪問也是毫無意義的；SEO做的再好的網站，如果搜索蜘蛛抓不到也是白搭；UE設計的再人性化的網站，如果用戶連看都看不到也是空談。
所以，網頁的效率優化絕對是最值得關注的方面，那麼，我們該如何才能提高一個網頁的效率呢？對此，我今天就在馬海祥博客上爲大家分享一下雅虎網頁優化的14條原則，也被稱爲：雅虎十四條，而這些原則也是我們作爲一名SEO人員所必須瞭解的。
1、減少HTTP請求次數
據統計，有80%的最終用戶響應時間是花在前端程序上，而其大部分時間則花在各種頁面元素，如圖像、樣式表、腳本和Flash等的下載上，減少頁面元素將會減少HTTP請求次數，這是快速顯示頁面的關鍵所在。
一種減少頁面元素個數的方法是簡化頁面設計，但是否存在其他方式，能做到既有豐富內容，又能獲得快速響應時間呢？以下是這樣一些技術：
Image maps組合多個圖片到一張圖片中，總文件大小變化不大，但減少了HTTP請求次數從而加快了頁面顯示速度（具體可查看馬海祥博客《提高網站速度的6種網站前端優化方法》的相關介紹），該方式只適合圖片連續的情況，同時座標的定義是煩人又容易出錯的工作。
CSS Sprites是更好的方法，它可以組合頁面中的圖片到單個文件中，並使用CSS的background-image和background-position屬性來現實所需的部分圖片。
Inline images使用data:URL scheme來在頁面中內嵌圖片，這將增大HTML文件的大小，組合inline images到你的（緩存）樣式表是既能較少HTTP請求，又能避免加大HTML文件大小的方法。
Combined files通過組合多個腳本文件到單一文件來減少HTTP請求次數，樣式表也可採用類似方法處理，這個方法雖然簡單，但沒有得到大規模的使用。據馬海祥博客收集的資料顯示：國外10大網站每頁平均有7個腳本文件和2個樣式表，當頁面之間腳本和樣式表變化很大時，該方式將遇到很大的挑戰，但如果做到的話，將能加快響應時間。
減少HTTP請求次數是性能優化的起點，這最提高首次訪問的效率起到很重要的作用，據Tenni Theurer的文章Browser Cache Usage - Exposed描述，40-60%的日常訪問是首次訪問，因此爲首次訪問者加快頁面訪問速度是用戶體驗的關鍵。
對此，馬海祥的建議是：將首頁的幾十個小圖標合併爲一個，通過CSS控制它們的顯示，減少了HTTP請求數。
2、使用CDN(Content Delivery Network，內容分發網絡)
用戶離web server的遠近對響應時間也有很大影響，從用戶角度看，把內容部署到多個地理位置分散的服務器上將有效提高頁面裝載速度，但是該從哪裏開始呢？
作爲實現內容地理分佈的第一步，不要試圖重構web應用以適應分佈架構，改變架構將導致多個週期性任務，如同步session狀態，在多個server之間複製數據庫交易，這樣縮短用戶與內容距離的嘗試可能被應用架構改版所延遲或阻止。
我們還記得80-90%的最終用戶響應時間花在下載頁面中的各種元素上，如圖像文件、樣式表、腳本和Flash等，與其花在重構系統這個困難的任務上，還不如先分佈靜態內容，這不僅能大大減少響應時間，而且由於CDN的存在，分佈靜態內容非常容易實現。
CDN是地理上分佈的web server的集合，用於更高效地發佈內容，通常基於網絡遠近來選擇給具體用戶服務的web server。
一些大型網站擁有自己的CDN，但是使用如Akamai Technologies、Mirror Image Internet或Limelight Networks等CDN服務提供商的服務將是划算的，在Yahoo!把靜態內容分佈到CDN減少了用戶影響時間20%或更多，切換到CDN的代碼修改工作是很容易的，但能達到提高網站的速度。
對此，馬海祥的建議是：目前還沒用到，不過據客戶反映，廣東山東等地網絡情況比較差，如果可以將佔據主要帶寬的靜態資源通過CDN發佈，相信可以大大緩解目前網站訪問速度的問題。
3、增加Expires Header
網頁內容正變得越來越豐富，這意味着更多的腳本文件、樣式表、圖像文件和Flash，首次訪問者將不得不面臨多次HTTP請求，但通過使用Expires header，您可以在客戶端緩存這些元素，這在後續訪問中避免了不必要的HTTP請求，Expires header最常用於圖像文件，但是它也應該用於腳本文件、樣式表和Flash。
瀏覽器（和代理）使用緩存來減少HTTP請求的次數和大小，使得網頁加速裝載，Web server通過Expires header告訴客戶端一個元素可以緩存的時間長度。
如果服務器是Apache的話，您可以使用ExpiresDefault基於當期日期來設置過期日期，如：ExpiresDefault “access plus 10 years”，設置過期時間爲從請求時間開始計算的10年。
請記住，如果使用超長的過期時間，則當內容改變時，您必須修改文件名稱，在Yahoo!我們經常把改名作爲release的一個步驟：版本號內嵌在文件名中，如yahoo_2.0.6.js。
對此，馬海祥的建議是：在Apache配置了JS,CSS,image的緩存，如果靜態資源需要更新，則採用修改文件版本號的方案確保客戶端取得最新版本。
4、壓縮頁面元素
通過壓縮HTTP響應內容可減少頁面響應時間，從HTTP/1.1開始，web客戶端在HTTP請求中通過Accept-Encoding頭來表明支持的壓縮類型，如：Accept-Encoding: gzip,deflate.
如果Web server檢查到Accept-Encoding頭，它會使用客戶端支持的方法來壓縮HTTP響應，會設置Content-Encoding頭，如：Content-Encoding: gzip。Gzip是目前最流行及有效的壓縮方法，其他的方式如deflate，但它效果較差，也不夠流行。通過Gzip，內容一般可減少70%；如果是Apache，在1.3版本下需使用mod_gzip模塊，而在2.x版本下，則需使用mod_deflate。
Web server根據文件類型來決定是否壓縮，大部分網站對HTML文件進行壓縮，但對腳本文件和樣式表進行壓縮也是值得的，實際上，對包括XML和JSON在內的任務文本信息進行壓縮都是值得的，圖像文件和PDF文件不應該被壓縮，因爲它們本來就是壓縮格式保存的，對它們進行壓縮，不但浪費CPU，而且還可能增加文件的大小。
因此，對儘量多的文件類型進行壓縮是一種減少頁面大小和提高用戶體驗的簡便方法。
對此，馬海祥的建議是：600多K的ext2包，是人都會想到要去壓縮它，壓縮後的效果還不錯，只有150多K，另外，JS、CSS、HTML也儘量壓縮（在此也推薦一種壓縮CSS代碼的簡單工具：http://www.mahaixiang.cn/zyxz/zxgj/cssys.html），要知道我們的很多客戶還在使用1M的ADSL。
5、把樣式表放在頭上
無論是HTML還是XHTML還是CSS都是解釋型的語言，而非編譯型的，所以CSS到上方的話，那麼瀏覽器解析結構的時候，就已經可以對頁面進行渲染，這樣就不會出現，頁面結構光禿禿的先出來，然後CSS渲染，頁面又突然華麗起來，這樣太具有“戲劇性”的頁面瀏覽體驗了。
我們發現把樣式表移到HEAD部分可以提高界面加載速度，因此這使得頁面元素可以順序顯示。在很多瀏覽器下，如IE，把樣式表放在document的底部的問題在於它禁止了網頁內容的順序顯示，瀏覽器阻止顯示以免重畫頁面元素，那用戶只能看到空白頁了，Firefox不會阻止顯示，但這意味着當樣式表下載後，有些頁面元素可能需要重畫，這導致閃爍問題。
HTML規範明確要求樣式表被定義在HEAD中，因此，爲避免空白屏幕或閃爍問題，最好的辦法是遵循HTML規範，把樣式表放在HEAD中。
6、把腳本文件放在底部
與樣式文件一樣，我們需要注意腳本文件的位置，我們需儘量把它們放在頁面的底部，這樣一方面能順序顯示，另方面可達到最大的並行下載。瀏覽器會阻塞顯示直到樣式表下載完畢，因此我們需要把樣式表放在HEAD部分，而對於腳本來說，腳本後面內容的順序顯示將被阻塞，因此把腳本儘量放在底部意味着更多內容能被快速顯示。
腳本引起的第二個問題是它阻塞並行下載數量，HTTP/1.1規範建議瀏覽器每個主機的並行下載數不超過2個，因此如果您把圖像文件分佈到多臺機器的話，您可以達到超過2個的並行下載，但是當腳本文件下載時，瀏覽器不會啓動其他的並行下載，甚至其他主機的下載也不啓動。在某些情況下，不是很容易就能把腳本移到底部的，如，腳本使用document.write方法來插入頁面內容，同時可能還存在域的問題，不過在很多情況下，還是有一些方法的。
一個備選方法是使用延遲腳本（deferred script），DEFER屬性表明腳本未包含document.write，指示瀏覽器刻繼續顯示，不幸的是，Firefox不支持DEFER屬性，在IE中，腳本可能被延遲執行，但不一定得到需要的長時間延遲。不過，從另外角度來說，如果腳本能被延遲執行，那它就可以被放在底部了。
對此，馬海祥的建議是：這點之前大家可能都沒有意識到，不過在我們的XCube XUI中我們已經實施了這條法則，相信可以進一步提升頁面的訪問性能。
7、避免CSS表達式
CSS表達式是功能強大的(同時也是危險的)用於動態設置CSS屬性的方式，IE從版本5開始支持CSS表達式，如backgourd-color: expression((new Date()).getHours()%2?”#B8D4FF”:”#F08A00”)，即背景色每個小時切換一次。
CSS表達式的問題是其執行次數超過大部分人的期望，不僅頁面顯示和resize時計算表達式，而且當頁面滾屏，甚至當鼠標在頁面上移動時都會重新計算表達式。一種減少CSS表達式執行次數的方法是一次性表達式，即當第一次執行時就以明確的數值代替表達式，如果必須動態設置的話，可使用事件處理函數代替，如果您必須使用CSS表達式的話，請記住它們可能被執行上千次，從而影響頁面性能（具體可查看馬海祥博客《資深Web前端開發工程師教你如何優化CSS框架》的相關介紹）。
對此，馬海祥的建議是：目前CSS的維護工作主要由UI人員負責，他們已經儘量在避免這種情況了。
8、把JavaScript和CSS放到外部文件中
上述很多性能優化法則都基於外部文件進行優化，現在，我們必須問一個問題：JavaScript和CSS應該包括在外部文件，還是在頁面文件中？
在現實世界中，使用外部文件會加快頁面顯示速度，因爲外部文件會被瀏覽器緩存，如果內置JavaScript和CSS在頁面中雖然會減少HTTP請求次數，但增大了頁面的大小。另外一方面，使用外部文件，會被瀏覽器緩存，則頁面大小會減小，同時又不增加HTTP請求次數。
因此，一般來說，外部文件是更可行的方式，唯一的例外是內嵌方式對主頁更有效，如Yahoo!和My Yahoo!都使用內嵌方式，一般來說，在一個session中，主頁訪問此時較少，因此內嵌方式可以取得更快的用戶響應時間。
對此，馬海祥的建議是：ext2的代碼作了很好的引導，目前前端開發人員都非常注意客戶端模塊的封裝、重用，儘量以外部JS的方式提高代碼的重用度，當然也要注意不要引入過多的外部資源，因爲這違反了法則1。目前CSS的封裝也不錯，但是主要是針對IE系列的解決方案，可以考慮引入YAML、blueprint等CSS框架，輕鬆解決瀏覽器兼容性問題。另外，馬海祥要提醒大家一點：把JavaScript和css文件放到外部，並不內嵌於網頁，同時可以考慮把樣式表放到頭上把腳本文件放到底部。需要注意的是儘量不要使用css的表達式，他很容易讓瀏覽器出現假死。
9、減少DNS查詢次數
DNS用於映射主機名和IP地址，一般一次解析需要20～120毫秒，爲達到更高的性能，DNS解析通常被多級別地緩存，如由ISP或局域網維護的caching server，本地機器操作系統的緩存（如windows上的DNS Client Service），瀏覽器，IE的缺省DNS緩存時間爲30分鐘，Firefox的缺省緩衝時間是1分鐘。
減少主機名可減少DNS查詢的次數，但可能造成並行下載數的減少，避免DNS查詢可減少響應時間，而減少並行下載數可能增加響應時間，一個可行的折中是把內容分佈到至少2個，最多4個不同的主機名上。
對此，馬海祥的建議是：爲了繞開瀏覽器對下載線程數的限制，我們對靜態資源啓用了多域名，但是這麼做違反了該法則，不過，對windows IE來說，DNS的緩存可以緩解該問題。
10、最小化JavaScript代碼
最小化JavaScript代碼指在JS代碼中刪除不必要的字符，從而降低下載時間，兩個流行的工具是#JSMin和YUI Compressor。
混淆是最小化於源碼的備選方式，象最小化一樣，它通過刪除註釋和空格來減少源碼大小，同時它還可以對代碼進行混淆處理，作爲混淆的一部分，函數名和變量名被替換成短的字符串，這使得代碼更緊湊，同時也更難讀，使得難於被反向工程，Dojo Compressor (ShrinkSafe)是最常見的混淆工具。
最小化是安全的、直白的過程，而混淆則更復雜，而且容易產生問題，從對國外10大網站的調查來看，通過最小化，文件可減少21%，而混淆則可減少25%（具體可查看馬海祥博客《推薦一種測試javascript執行性能和性能比較的方法》的相關介紹）。
除了最小化外部腳本文件外，內嵌的腳本代碼也應該被最小化，即使腳本根據法則4被壓縮後傳輸，最小化腳本刻減少文件大小5%或更高。
對此，馬海祥的建議是：我們沒有直接使用JS壓縮，但是我們用的許多組件例如ext2、jquery等，已經在爲我們實踐該法則。
11、避免重定向
重定向功能是通過301和302這兩個HTTP狀態碼完成的，如：
HTTP/1.1 301 Moved Permanently
Location: http://mahaixiang.cn/newuri
Content-Type: text/html
瀏覽器自動重定向請求到Location指定的URL上，重定向的主要問題是降低了用戶體驗。一種最耗費資源、經常發生而很容易被忽視的重定向是URL的最後缺少/，如訪問http://www.mahaixiang.cn/astrology將被重定向到http://www.mahaixiang.cn/astrology/，在Apache下，可以通過Alias，mod_rewrite或DirectorySlash等方式來解決該問題。
經驗豐富的SA已經爲我們考慮了這個問題，對此，馬海祥的建議是：大家可以看看線上環境的Apache配置文件：httpd.conf。
12、刪除重複的腳本文件
在一個頁面中包含重複的JS腳本文件會影響性能，即它會建立不必要的HTTP請求和額外的JS執行。不必要的HTTP請求發生在IE下，而Firefox不會產生多餘的HTTP請求，額外的JS執行，不管在IE下，還是在Firefox下，都會發生。
一個避免重複的腳本文件的方式是使用模板系統來建立腳本管理模塊，除了防止重複的腳本文件外，該模塊還可以實現依賴性檢查和增加版本號到腳本文件名中，從而實現超長的過期時間。
對此，馬海祥的建議是：舊版本的Xplatform中這個問題比較嚴重，不過相信新版的XCube不會重蹈覆轍。另外，提醒大家一點：一些javascript框架、javascript包一定要慎用，至少要問一下：用了這個js kit到底給我們多少方便，提高了多少工作效率，然後，再與它因爲多餘的、重複的代碼帶來的負面效果比較一下。
13、配置ETags
Etag（Entity tags）實體標籤，這個tag和你在網上經常看到的標籤雲那種tag有點區別，這個Etag不是給用戶用的，而是給瀏覽器緩存用的。Etag是服務器告訴瀏覽器緩存，緩存中的內容是否已經發生變化的一種機制，通過Etag，瀏覽器就可以知道現在的緩存中的內容是不是最新的，需不需要重新從服務器上重新下載，這和“Last-Modified”的概念有點類似，很遺憾作爲網頁開發人員對此無能爲力，他依然是網站服務器人員的工作範疇。
ETags是用於確定瀏覽器緩存中元素是否與Web server中的元素相匹配的機制，它是比last-modified date更靈活的元素驗證機制。
ETag是用於唯一表示元素版本的字符串，它需被包括在引號中，Web server首先在response中指定ETag：
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
後來，如果瀏覽器需要驗證某元素，它使用If-None-Match頭回傳ETag給Web server，如果ETag匹配，則服務器返回304代碼，從而節省了下載時間：
GET /i/yahoo.gif HTTP/1.1
Host: mahaixiang.cn
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified
ETags的問題在於它們是基於服務器唯一性的某些屬性構造的，如Apache1.3和2.x，其格式是inode-size-timestamp，而在IIS5.0和6.0下，其格式是Filetimestamp:ChangeNumber。
這樣同一個元素在不同的web server上，其ETag是不一樣的，在多Web server的環境下，瀏覽器先從server1請求某元素，後來向server2驗證該元素，由於ETag不同，所以緩存失效，必須重新下載。
因此，如果您未用到ETags系統提供的靈活的驗證機制，最好刪除ETag，刪除ETag會減少http response及後續請求的HTTP頭的大小，微軟支持文章描述瞭如何刪除ETags，而在Apache下，只要在配置文件中設置FileETag none即可。
對此，馬海祥的建議是：自定義ETag的生成策略，以儘量減少探頭規則的生成次數，由於不是採用服務器默認的ETag，不存在該問題，如果以前沒有關注過的，趕快檢查一下Apache中的配置。
14、緩存Ajax
現在的Ajax好像有點被神話了，好像網頁只要Ajax了，那麼就不存在效率問題了，其實這是一種誤解，拙劣的使用Ajax不會讓你的網頁效率更高，反而會降低你的網頁效率。在馬海祥看來，Ajax的確是個好東西，但是請不要過分的神話它，使用Ajax的時候也要考慮上面的那些準則。
另外，性能優化法則同樣適用於web 2.0應用，提高Ajax的性能最重要的方式是使得其response可緩存，就象“法則3增加Expires Header”討論的那樣，以下其他法則同樣適用於Ajax，當然法則3是最有效的方式。
馬海祥博客點評：
網頁設計和SEO技術結合是網絡技術發展對網頁設計師的新要求，95%的SEO技巧很簡單，而最重要的5%是“經驗”、“創意”和“人脈”，需要在工作中根據實際情況不斷做出調整策略，並持之以恆地把SEO優化堅持下去。