(翻譯中止)Best Practices for Speeding Up Your Web Site 網站加速最佳實踐

看到得太晚了,本來想慢慢來……結果被人bs說是古董,鬱悶,就此罷手。

 

原文:http://developer.yahoo.com/performance/rules.html

Best Practices for Speeding Up Your Web Site
網站加速最佳實踐

性能專家團隊確定了一些使網頁加速的最佳實踐,包括7類34種.

   1. 減少發出HTTP請求
   2. 使用內容分發網絡(CDN)
   3. 添加過期(Expires)或Cache - Control標題
   4. 使用gzip或組件
   5. 把css樣式表放在頂部
   6. 把腳本放在底部
   7. 避免CSS表達式
   8. 避免內嵌的JavaScript和CSS
   9. 減少DNS查找
  10. 縮小的JavaScriptCSS
  11. 避免重定向
  12. 刪除重複的腳本
  13. 配置ETags
  14. 使用Ajax緩存
  15. 儘早刷新緩衝區
  16. 在AJAX請求中使用GET方法
  17. Post-load Components·後負荷組件
  18. 預讀組件
  19. 減少DOM元素
  20. Split Components Across Domains·跨域分隔組件
  21. 儘量減少內置頁框(iframe)
  22. 不要出現404錯誤
  23. 減少Cookie大小
  24. Use Cookie-free Domains for Components·爲組件使用域無關的Cookie
  25. 最小化的DOM訪問
  26. Develop Smart Event Handlers·開發智能事件句柄
  27. Choose <link> over @import·用<link>代替@import
  28. Avoid Filters·避免過濾器
  29. 優化圖像
 
 
 
 
 

1. 減少發出HTTP請求
標籤:內容

80 %的最終用戶響應時間花在前端。其中大部分時間是費在下載的所有組成部分的網頁:圖片,樣式,腳本,閃存等等,減少元件數量就可減少HTTP請求提供所需的頁面。這是網頁速度更快的關鍵。

一種以減少網頁中的元件數量的方法是是簡化網頁設計。但是否有辦法在建立更豐富的網頁內容同時實現快速的反應時間?這裏有一些技術減少了HTTP請求,同時還支持豐富的網頁設計。

通過把所有腳本結合到一個單一的腳本,類似的把所有的CSS結合到一個單一的樣式表來實現以合併文件的方式減少HTTP請求數。 Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.結合腳本和樣式不同的網頁文件很具挑戰性,但這樣做會改善響應時間。

CSS Sprites是減少了圖像要求的首選方法。 合併您的多個背景圖像成一個單一的圖像並使用CSS的background-image和background-position屬性以顯示所需的圖像部分。

Image maps 結合多張圖片到一個單一的圖像。 整體規模差不多,但減少了HTTP請求加速了網頁。 Image maps 僅工作在連續圖像的網頁,如導航欄。 確定image maps的座標是乏味而又易錯的。 使用mage maps的導航也是無法訪問的,所以不建議採用。

內置圖片使用 data:URL 方案中嵌入圖像數據的實際網頁。這會增加HTML文件的大小。集成內置圖片到您的(緩存的)樣式表可以減少HTTP請求,並避免增加您的網頁的大小。內置圖片還不被所有主要瀏覽器支持。

在您的網頁減少HTTP請求只是開始。提高首次來訪的性能是最重要的準則。正如Tenni Theurer的博客帖子《Browser Cache Usage - Exposed!》中所描述,每天到您網站的40-60 %的訪客緩存是空的。爲這些第一次來訪者加速網頁是更好用戶體驗的關鍵。

 

2. 使用內容分發網絡(CDN)
標籤:服務器

用戶與您的網絡服務器接近程度影響了響應時間。在多個地理上分散的服務器部署您的內容將從用戶的觀點提高您的網頁載入速度。但是,您應從何處入手?

第一步,實施內容的地理分散,不要試圖重新設計您的Web應用程序工作在分佈式體系結構。根據不同的應用改變結構,可包括大任務如同步會話狀態和複製數據庫事務的服務器位置。試着減少可能造成延遲或從來沒有連通的用戶和您的內容之間的距離,這是應用體系重構的步驟。

請記住,80-90%的最終用戶響應時間花在下載頁面所有組件:圖片,樣式,腳本,閃存等,這是黃金規則。比起重新設計您的應用程序架構這樣艱鉅的任務,最好是首先分散你的靜態內容。這不僅實現了反應時間更大的減少,而且更容易在網絡傳送內容。

內容分發網絡(CDN)是一組分佈在多個地點的網絡服務器集合,用以更有效地爲用戶提供內容。爲特定的用戶選定提供內容的服務器,通常是基於網絡距離的量度。例如,最少網絡跳數(hop)的服務器或最快響應時間的服務器被選擇。

一些大型互聯網公司擁有自己的CDN,但其成本—效益趨向使用CDN服務提供商,如Akamai Technologies 、 Mirror Image Internet 或者 Limelight Networks。對剛起步的公司和私人網站,CDN的費用可以讓人望而卻步,但由於您的目標受衆越來越大,變得更加全球性,爲實現快速的反應時間CDN是必要的。 在Yahoo上 ,從網絡服務器搬到CDN的靜態內容使得終端用戶響應時間改善達到20%或更多。切換到CDN是一個相對容易的代碼變更,將顯着改善你的網站的速度。

3. 添加過期(Expires)或Cache - Control標題
標籤:服務器

本規則有兩方面:

    * 靜態部分:實施“永不過期”的政策定製長遠Expires頭
    * 動態部分:使用適當的Cache-Control標題,幫助瀏覽器有條件的請求

網頁設計越來越豐富,這意味着更多的腳本,樣式,圖片和Flash在網頁上。訪客第一次到您的網頁要發出一些HTTP請求,但通過使用Expires頭你可以使這些組件被緩存。這可以在隨後的頁面瀏覽時避免不必要的HTTP請求。 Expires 頭最常用於圖像,但它們應該使用到所有組件,包括腳本,樣式,和Flash組件。

瀏覽器(和代理)使用高速緩存,以減少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 。

只有在用戶已經訪問了您的網站使用遙遠的Expires頭纔會生效。當用戶第一次訪問您的網站、瀏覽器的緩存是空的,它對HTTP請求沒有效果。因此所產生的影響這一性能的改善取決於用戶藉助緩存訪問您的網頁的頻度。(“緩存”已包含所有組件的網頁。)我們在Yahoo測量並發現藉助緩存的瀏覽數爲75-85% 。通過使用遙遠的Expires頭,您增加的組件被瀏覽器緩存和重用,而不必在用戶的互聯網連接中發送一個字節。

4. 使用Gzip組件
標籤:服務器

 

…………

…………

…………

 

30. 優化CSS Sprites(用css定位來把若干小圖片組成的大圖分割顯示的技巧)
標籤:影像

    * 橫向安排小圖片通常會得到一個較小的大圖文件。
    * 結合在相似的顏色可以幫助您減少顏色計數,最好小於256種顏色,以符合 PNG8 。
    * “移動兼容”,並且在小圖片之間沒有大的的空間。這並不影響文件的大小,但解壓縮圖片爲像素圖時爲用戶代理節省內存。100x100圖片是10萬像素,1000x1000就是100萬像素。

31. 不要在HTML中放縮圖像
標籤:影像

不要因爲你可以設置寬度和高度就使用比您需要的更大的圖片。如果您需要<img width="100" height="100" src="mycat.jpg" alt="My Cat" />那麼您的圖片( mycat.jpg )應是100x100px而非用500x500px去縮小。

32. 減小favicon.ico並緩存
標籤:影像

文件favicon.ico是一個圖像,放在你服務器的根路徑。這產生了無法避免的問題,因爲即使你不關心它,瀏覽器將仍然會發請求,所以最好不要回應 404 Not Found 。而且由於它在同一臺服務器上, 每次發出請求時都會傳送Cookie。這個圖像也干擾了下載序列,例如,IE瀏覽器在onload時如果要求額外的組件,該圖標將在這些額外的組件之前下載。

因此,要減輕favicon.ico的不利作用要確保:
    * 它很小,最好在1K以下 。
    * 設置Expires頭會讓你覺得好一點(因爲即使您決定要改變它也不能將它重命名)。您可以沒有風險地置Expires頭爲未來幾個月後。您可以檢查當前favicon.ico的最後修改日期,作出明智的決定。

www.imagemagick.org是一個可以幫助您創建小圖示的網站

33. 保持部件小於25K
標籤:手機

這種限制是由於iPhone將不緩存大於25K的組件(注意,這是未壓縮的大小)。因爲Gzip可能不起作用,所以縮小組件很重要。
欲瞭解更多信息,參閱 Wayne Shea 和 Tenni Theurer 的《 Performance Research, Part 5: iPhone Cacheability - Making it Stick 》。

34. Pack Components into a Multipart Document·把內容打包進多部分文件
標籤:手機

把內容打包進多部分文件就像是一封帶有附件的電子郵件,它可以幫助你用一次HTTP請求傳輸若干組成部分(請記住: HTTP請求代價昂貴) 。當您使用此方法前,先檢查用戶代理是否支持它(iPhone手機就不支持) 。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章