Forum

Heyxu Forum

Forum Dictionary / Heyzu Allience / 公告 / 互動網頁設計 /

優化網站內容提升效能

New Subject
Random
Previous
Next
|
優化網站內容提升效能

1. 減少HTTP請求 (Make Fewer HTTP Requests)

相當重要第一條。根據Yahoo的研究,減少一個網站的HTTP請求數目會增進相當大的效能與速度。以下有幾種方法可以有效的減少HTTP Request :

  1. 合併檔案文件:如把多個css或js檔案併成一個。
  2. CSS Sprites:什麼是CSS Sprites?簡單的說,就是把網頁上用到的多個小圖片全部統一放到一張圖片上,如此就只需要一次HTTP Request啦!而後在排版時再利用CSS的background-position屬性來調整背景圖片(background-image)的絕對位置。
  3. 影像地圖(Image maps):與CSS Sprites相同理由,但此法只適合用在連續的圖片上,故CSS Sprites較優。
  4. Inline images:使用data:URL scheme內嵌圖片到你的HTML裡,但此法會加大你的HTML大小,比較好的方式是將Inline images放在你可暫存的樣式表中。不過不是所有瀏覽器都支援Inline images!

2. 減少DNS解析 (Reduce DNS Lookups)

就是去DNS伺服器詢問將網址解析為IP的過程,一次DNS Lookups大約會花掉20-120 milliseconds的時間,而在這段期間瀏覽器只能邊發呆邊等DNS回應。建議一個網頁最好保持Hostname在2~4個之間,太多會花太多時間在DNS解析,太少則會不利於檔案的平行下載(parallel downloads,後面會談到)。

3. 避免重新導向 (Avoid Redirects)

盡量避免301與302重新導向。一個值得住意的是要記得幫你的子目錄URL加上slash「/」,試試看沒加的話連往http: //yourdomain/123的request是不是會被重新定向到http://yourdomain/123/呢。而如果你是使用Apache你可以透過Alias、mod_rewrite或DirectorySlash這些指令來解決這個問題。

4. 暫存你的AJAX (Make Ajax Cacheable)

為你的Ajax加上Expires。

5. 延遲載入元件 (Post-load Components)

有些你不會立即用到的檔案圖片你可以稍後再載入,像是用來drag and drop還有空置依些動畫的Javascript等。

6. 預先載入元件 (Preload Components)

你可以預先利用在瀏覽器空檔時,載入一些使用者接下來可能會用到的檔案圖片等。

7. 減少DOM元素數量 (Reduce the Number of DOM Elements)

太多的DOM Element會降低Javascript執行效能。

8. 將元件放到不同的網域 (Split Components Across Domains)

這是為了提高頁面同時間能下載愈多的元件(平行下載),因為一個Hostname正常同一時間只能下載兩個請求檔案。實踐方法例如你可以將HTML或動態內容放在www.example.org,而靜態元件像是圖片、JS檔則分別放在static1.example.org和 static2.example.org。但需注意一個網頁最好保持Hostname在2~4個之間(第2點)。

9. 最小化iframe數量 (Minimize the Number of iframes)

iframe的好壞是大家長久以來爭論的話題之一,使用iframe有好有壞端看個人用途吧。

10. 不要有404錯誤 (No 404s)

除了會破壞使用者體驗外,還會停止平行下載,此外,有些瀏覽器還會花時間去解析傳回來的404文件。

參考資料:http://developer.yahoo.com/performance/

  • Keywords : example, Sprites, Components, 網頁, 檔案圖, 會花, 平行下載, 保持Hostname, yourdomain, images, background, Reduce, Number, Inline, 過程, 連續, 速度, 這段期, 請求檔案, 話題
0 0
2009-12-14T09:36:00+0000


  • Now, you can post comments by Facebook Account when your Heyxu account was logout or unvariable. whatever, we suggest to post comment by Heyxu Account to get more bounds to join new events of Heyxu
Comment
Verify
Comment
  • Auto Platform
    For better browsing experience, it will auto detects your device to display webpage.
  • Bug Report
    Tell us about the idea, problem and errors you found.
  • Copyright
    © 2009 Heyxu Multimedia, Inc - All rights reserved.
  • Revised Version
    V2.1.313
    02 Feb 2019 (GMT+8)