YSlow!如何提高網頁的效率（上篇）――提高網頁效率的14條準則

日期：2013-12-16  來源：攀枝花惠康網絡公司

網站最根基的工具是什么？

網站最根基的工具是什么？
Wait：0.117s
――內容？seo（seo）？UE（用戶體驗）？都不合錯誤！是速度！
內容再豐碩的網站，如不美觀慢到無法訪謁也是毫無意義的； seo做的再好的網站，如不美觀搜索蜘蛛抓不到也是空費； UE設計的再人道化的網站，如不美觀用戶連看都看不到也是空口說。
所以網頁的效率絕對是最值得關注的方面。若何才能提高一個網頁的效率呢？Steve Souders(Steve Souders的資料http://www.oreillynet.com/pub/au/2951)提出的提高網頁效率的14條準則，而這些準則也將是我們下篇中介紹到的YSlow工具的理論基本：

• Make Fewer HTTP Requests
• Use a Content Delivery Network
• Add an Expires Header
• Gzip Components
• Put CSS at the Top
• Move Scripts to the Bottom
• Avoid CSS Expressions
• Make JavaScript and CSS External
• Reduce DNS Lookups
• Minify JavaScript
• Avoid Redirects
• Remove Duplicate Scripts
• Configure ETags
• Make Ajax Cacheable

這里我們將一一的講解這些準則,對其中開發者慎密親密相關的準則我將具體講解。小弟小我手藝其實有限，錯誤和蒙昧在所難免，還請高人指點。

首先來講講什么是Etag吧。Etag（Entity tags ）實體標簽。這個tag和你在網上經常看到的標簽云那種tag有點區別。這個Etag不是給用戶用的，而是給瀏覽器緩存用的。Etag是處事器告訴瀏覽器緩存，緩存中的內容是否已經發生轉變的一種機制。經由過程Etag，瀏覽器就可以知道此刻的緩存中的內容是不是最新的，需不需要年夜頭年夜處事器上年夜頭下載。這和“Last-Modified”的概念有點近似。很遺憾作為網頁開發人員對此力所不及。他依然是網站處事器人員的工作規模。如不美觀，你對此有樂趣，可以咨詢貴公司的網站處事器打點員。

第十四條：Make Ajax Cacheable 膳縵沔的準則也合用Ajax

80%的用戶響應時刻都是華侈在前端。而這些時刻首要又是因為下載圖片、樣式表、JavaScript劇本、flash等文件造成的。削減這些資本文件的Request請求數將是提高網頁顯示效率的重點。
這里仿佛有個矛盾，就是如不美觀我削減了良多的圖片，樣式，劇本或者flash，那么網頁豈不是光禿禿的，那多災看呢？其拭魅這是一個曲解。我們只是說盡量的削減，并沒有說完全不能使用。削減這些文件的Request請求數，當然也有一些技巧和建議的：

1：用一個年夜圖片庖代多個小圖片。

這簡直有點傾覆傳統的思維了。以前我們一向覺得多個小圖片的下載速度之和會小于一個年夜圖片的下載速度?？墒谴丝滩僮鱤ttpwatch工具的對多個頁面進行剖析后的結不美觀剖明事實并不是這樣。
第一張圖是一個巨細為40528bytes的337*191px的年夜圖片的剖析結不美觀。
第二張圖是一個巨細為13883bytes的280*90px的小圖片的剖析結不美觀。

一個巨細為40528bytes的337*191px的年夜圖片的剖析結不美觀（點擊圖片可以查看完全年夜圖片）

我以前犯了一個錯誤，你在看我《樣式表的組織與規劃》的系列文章中會知道。那時，我為了便利組織和規劃樣式表，將用于分歧用途的樣式表文件分分開來，形成分歧的css文件。然后在頁面中按照需要引用多個css文件。按照“盡可能的削減HTTP的Request請求數”準則我們知道，那樣簡直是不合理的，因為那樣會發生更多的HTTP的Request請求數。年夜而降低網頁的效率。所以，年夜提高網頁效率的角度上而言，我們仍是應該將所有的css寫在統一個css文件中?？墒菃栴}又來了。那么怎么來很好的組織和規劃樣式表呢？這簡直是個矛盾。我此刻的做法是采用兩套版本。編纂版和發布版。編纂版仍然使用多個css文件以便于規劃和組織。而等到發布的時辰，再將多個css文件合并到一個文件中去，年夜而達到削減HTTPRequest請求數的目的。

3：合并你的javascript文件。

Wait：0.163s

所以如不美觀可能仍是使用年夜圖片來替代過多的瑣碎的小圖片吧。這也是為什么翻轉門的效率要高于圖片替代實現的滑動門的原因。

第一張年夜圖片破耗時刻為：
Blocked：13.034s
Send：0.001s
Receive：4.596s
也恰是這點，我提醒巨匠一些，一些javascript框架、javascript包必然要慎用。至少要問一下：用了這個js kit 到底給我們若干好多便利，提高了若干好多工作效率。然后，再與它因為多余的、一再的代碼帶來的負面效不美觀斗勁一下。

第十三條：Configure ETags 設置裝備擺設你的實體標簽

TTFB：0.164s
NetWork：4.760s
功耗時：17.795s
真正用于傳輸年夜文件破耗的時刻為Reveive時刻，即4.596s，年夜都的時刻是用來檢索緩存和確定鏈接是否有用的Blocked時刻，供破耗13.034s，占總時刻的73.2%。

第二張小圖片破耗時刻為：
Blocked：16.274s
Send：小于0.001s
Receive：0.397s
TTFB：0.118s
鑒于這個不是我們開發人員力所能及的準則，所以這里也就不多言了。

NetWork：0.516s
功耗時：16.790s
真正用于傳輸文件的破耗時刻是Reveive時刻，即0.397s，這簡直要比適才年夜文件的4.596s小良多。可是他的Blocked時刻為16.274s，占總時刻的97%。

如不美觀這些數據還不夠說服你的話，讓我們看看下面這張圖。這里列出了某個網頁中所有圖片中的破耗時刻示意圖。當然，瑯縵沔的圖片有年夜有小，規格紛歧。

文章來源：攀枝花惠康網絡公司

惠康網絡，是一家專業從事攀枝花網站建設，攀枝花網站制作，攀枝花網站設計公司，提供網站建設一條龍服務（網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣），惠康網絡立足攀枝花，輻射全中國，攀枝花惠康網絡的客戶已經遍布國內各地大中小城市，我們高效優質的網站建設服務深受用戶好評。