子網域及別名妙用:加快網站瀏覽速度!

這個鮮為人知的技巧,就是利用子網域subdomain或別名cname來分散儲存檔案,讓瀏覽器得以同時下載資料,進而提升使用者的網頁瀏覽速度。其加速的基本原理,在於最大化瀏覽器的傳輸限制…

根據HTTP1.1的規範,網頁瀏覽器(如IE和FireFox)僅能從每個主機名稱同時下載兩個檔案,接著循序載入。

比方說www.abc.com/test.html裡,包含6張圖片、2個js、2個css,一共10個檔案,傳輸情況如圖:
1個主機名稱平行傳輸

但如果將該頁的檔案分五個出來到temp.abc.com,那麼速度將有顯著提升(橫軸為載入完成時間):
2個主機名稱平行傳輸


在實作上,大型的多媒體網站,建議可以這樣規劃:
www.domain.com(html, favicon, etc)
a.domain.com(css, js, images, uploads, etc)
b.domain.com(flash, flv, swf, movies, mp3, etc)

看實際需求,像這個網站是這樣規劃:
www.diimii.com(html, php, 文章圖片, 外掛css和js)
js.diimii.com(佈景js, 其它自訂的js)
css.diimii.com(佈景css, 其它自訂的css)
img.diimii.com(佈景圖片, 其它自訂的圖片)

後記1:瀏覽器其實都有方法來突破這傳輸限制:IEFirefox

後記2:網頁優化加速寫了好幾篇,到這裡應該是final了,主機雖然在國外,但經過這番調效,結果也很令人滿意,網路狀況好一點時,webwait測可以3秒內載完

參考文:Speed Tips: Use Multiple SubDomains | Maximizing Parallel Downloads in the Carpool Lane | Optimize Parallel Downloads to Minimize Object Overhead | IE8 speeds things up

您可能也會喜歡…

10 個回應

  1. CFC表示:

    請問如果同一台主機CNAME到自己的情況下也有幫助嗎?

  2. ANDY表示:

    一樣有幫助,我的也都是在同一台主機上!

  3. SAM表示:

    設定好子網域
    Wordpress的設定或檔案有要修改的嗎?
    謝謝

  4. ANDY表示:

    設定好子網域,就把想分散儲存的檔案放到該子網域中,再去連結…比方說原本我有一個js檔從https://www.diimii.com/wp-temp/test.js讀取,之後就改從http://js.diimii.com/test.js來讀取

  5. SAM表示:

    先謝謝你的回答。
    你是有重新搬移Wordpress的js、css及image嗎?
    或是只有將額外自訂的資源以子網域的方式來呈現呢?

  6. SAM表示:

    再請教你一下
    在設定「子網域」時
    發現不同的主機商提供不同的設定方式
    1. 我閱讀「高登工作室的 http://gordon168.tw/?p=265」
    它的設定方式如「http://image.gordon168.tw/wordpress/ftp/ftp-2.png」,「子網域」指向主機內的目錄。

    2. 看了另一個智邦虛擬主機設定子網域的方法「http://help.url.com.tw/form/OnLine_Application_3.html」
    它設定方式的例子「shop.url.com.tw = http://www.url.com.tw/shop」

    二種設定方式符合你文章寫的子網域別名妙用嗎?

  7. ANDY表示:

    呃,額外自訂的都搬到子網域去了,至於wordpress內的,有做部份搬移,大概就是一半一半吧,看心情看方不方便^^”

    子網域設定方式是要看主機而定,但只要能建立子網域做儲存空間,皆可用來加速使用…

    瀏覽器是認位址,不是認實際儲存在哪裡…
    比方說http://js.diimii.com
    它是對應到c:/js還是d:/abc…等都無所謂

  8. SAM表示:

    謝謝,這樣我了解了!我會試試的!

  9. 聪壹艮表示:

    高手啊,学习了,但是具体操作还是不会,望指点…

  10. ANDY表示:

    sorry…T_T…我還真不知從哪兒教起…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *