羊皮紙論壇

羊皮紙論壇

分享讓知識傳播,閱讀讓心靈成長, 創作讓文化傳承,讓我們共同努力。
  • 禁止廣告文
  • 知識傳播
  • 閱讀
  • 心靈成長
  • 創作
  • 文化傳承
羊皮紙論壇目錄 / 黑族聯盟 / 公告 / 互動網頁設計 /

優化網站內容提升效能

發表新主題
隨機主題
上個主題
下個主題
|
優化網站內容提升效能

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/

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


  • 當您未登入羊皮紙時,可以利用臉書 Facebook 登入來發表迴響。若使用羊皮紙會員身份發表迴響則可獲得經驗值及虛擬金幣,用來參加羊皮紙推出的活動。
發表迴響
 
驗證字串

Facebook 粉絲專頁

QRCode 條碼 & APP 連結

說明
本頁網址

在相關服務標籤中,『掃描條碼,在行動裝置』或是『點擊連結按鈕,在本裝置』中開啟網頁或是 APP 相關操作。
QRCode