DNS Prefetching - 預先做DNS解析，幫助網頁載入速度更快

DNS Prefetching - 預先做DNS解析，幫助網頁載入速度更快

DNS Prefetching - 預先做DNS解析，幫助網頁載入速度更快

前陣子看見Addy Osmani大大在Facebook上發表了一張圖片(原文)。

Resource Hints

在研究淘寶SEO策略時有略略看到頁面上出現這樣的設定，但對於網站效能提升這一塊比較陌生的我，並沒有做太多的研究(只知道是做什麼用的)，剛好藉這次機會來看看相關資料並做整理。

什麼是DNS Prefetching？

預先做DNS解析(domain name resolution)，將人類可理解的domain name，轉為IP address。瀏覽器載入頁面和資源時需做DNS解析，但若等到瀏覽該頁或要下載資源時才做DNS解析就太遲了(使用者需要等待一段時間)，因此可預先執行。(關於DNS Lookup流程可參考 DNS 名稱解析程序。)

預先做DNS解析的好處是使用者瀏覽之後的頁面時，可減少DNS Lookup的時間，感覺速度變快了。

如何使用DNS Prefetching？

在HTML的 <head> 加入 <link rel="dns-prefetch" href="https://my-site.com"> 。 使用這個指令後，頁面上 <a> 的連結也都會開啟DNS Prefetching。

附註，DNS Prefetching在https下是無法使用的。若要在https下開啟DNS Prefetching，必須在 <head> 加上 <meta http-equiv="x-dns-prefetch-control" content="on"> 才能啟動DNS Prefetching。但只能啟動連結，而無法啟動手動設定的資源。

順道一提，<link rel="dns-prefetch" href="//host_name_to_prefetch.com"> 和 <link rel="dns-prefetch" href="http://host_name_to_prefetch.com"> 意義是相同的，「//」表示網址起始是一個host name。

使用DNS Prefetching的時機

  • 該頁面有許多靜態資源但放在各個不同的domain底下，例如圖檔、CSS檔案、JS檔案等：例如，在這個頁面或這個網站將圖片放在 http://a.img.com.tw 和 http://b.img.com.tw 這些domain底下。我希望瀏覽該頁面時能先對這兩個domain name做DNS Prefetching，於是可在 <head> 加上

    <link rel="dns-prefetch" href="http://a.img.com.tw">
<link rel="dns-prefetch" href="http://b.img.com.tw">

  • 該頁會轉跳到不同domain下的頁面，因此可在指令先指定對轉跳的domain做DNS Prefetching

適合的對象

  • 電商網站的商品頁大量載入不同domain下的商品圖，例如：淘寶
  • 手機網頁，需要提高頁面載入完成的速度

成效評估

測試範例

拿我們家露天拍賣的測試機商品頁來看看...

尚未做DNS Prefetch之前

DNS Prefetch

做了DNS Prefetch之後

我加了這幾條指令到 <head> 裡面...

<link rel="dns-prefetch" href="http://a.rimg.com.tw">
<link rel="dns-prefetch" href="http://b.rimg.com.tw">
<link rel="dns-prefetch" href="http://c.rimg.com.tw">
<link rel="dns-prefetch" href="http://d.rimg.com.tw">
<link rel="dns-prefetch" href="http://e.rimg.com.tw">

DNS Prefetch

多7次DNS Prefetch，其中不需做DNS Prefetch的有7次，完全命中。由於在上一頁的時候保留了DNS Lookup的紀錄，因此省了7次的DNS Lookup。

拿淘寶的商品頁來看看

DNS Prefetch

先點這個範例頁面

DNS Prefetch

再點這個範例頁面

多9次DNS Prefetch，其中不需做DNS Prefetch的有4次，大約減少了一半。

附註：可以用來觀察結果的指令

  • chrome://histograms/DNS.PrefetchQueue
  • about:histograms/DNS (可看更詳細的資料)
  • about:dns (可看更詳細的資料)

使用DNS Prefetching的好處？

花小量的傳輸(不到100 bytes)，卻平均可節省200ms。
(有興趣的話可參考DNS Prefetching - The Chromium Projects)

對SEO來說，網站速度也是Ranking Factor之一，提高下載速度就可提高排名。

減少DNS Lookup 次數的相關議題

假設在頁面上有許多資源，例如：圖片、CSS檔案、JS檔案，這些都放在同一個domain name底下，這時瀏覽器針對每個domain只會開一個連線。也就是說，假設有10個檔案放在同一個domain之下，每個檔案需要100ms才能下載完，那個預計載完資源需要 10*100=1000ms 。但若我們將這10個檔案分別放在2個不同的domain下，就可以開兩條連線檔案同時下載，那麼只要花 5*100=500ms 即可，減少了一半的時間。但也不是說domain愈多愈好，因為DNS Lookup需要時間，因此建議維持2~4個不同的domain name即可。

瀏覽器比較：Chrome、Firefox、IE

Chrome

  1. Chrome會記住最近使用的10個domain，並且在開啟瀏覽器時自動解析，因此在開啟這些常用頁面的時候，並不會有DNS Lookup的延遲狀況，大約節省了200ms或更多。打開你的Chrome，使用指令 chrome://dns 來看看。
  2. 本機作業系統對DNS的快取是有限的，大約只能暫存50~200個domain name。一旦超過了這個限制，便會移除過去使用過的domain name來存放新的domain name。而選取移除的domain name只靠瀏覽的時間決定，可能會造成經常使用的domain name查詢結果被移除，被迫常常對這個domain name進行查詢。Chrome嘗試修正這樣的機制，所以會猜測哪些domain name是使用者近期可能會用到的，然後標記為常用，使其能保存久一點。

(有興趣的話可參考可參考 DNS Prefetching - The Chromium Projects)。

而Chrome類似其他瀏覽器的其他設定都已忽略，似乎不希望使用者更改預設值。因此直接清除。

  1. chrome打開：chrome://net-internals/#dns
  2. 點擊按鈕「clean host cache」

Firefox

  • network.dns.disablePrefetch：若設定為true，則會關閉瀏覽器DNS Prefethcing的功能。
  • network.dns.disablePrefetchFromHTTPS：若設定為false，則會開啟使用HTTPs的網站的DNS Prefethcing功能。在HTTPs的網站下，DNS Prefethcing功能預設是關閉的，必須經此手動開啟。
  • network.dnsCacheExpiration：預設DNS暫存1分鐘
  • network.dnsCacheEntries：預設DNS暫存20個
  • network.http.keep-alive.timeout：TCP/IP連線idle一段時間後才會被釋放掉，預設是5分鐘。好處是避免重覆DNS Lookup太快發生。

IE

  • DnsCacheTimeout：預設DNS暫存30分鐘。
  • KeepAliveTimeout：TCP/IP連線idle一段時間後才會被釋放掉，預設是1分鐘。好處是避免重覆DNS Lookup太快發生。
  • ServerInfoTimeout：就算沒有KeepAliveTimeout，假設我們查到了IP位置，並在使用一段時間內都沒有發生錯誤，那麼這段間內都不會對此domain name做DNS Lookup。預設是2分鐘。

References

由於部落格搬家了，因此在新落格也放了一份，未來若有增刪會在這裡更新-DNS Prefetching - 預先做 DNS 解析，幫助網頁載入速度更快。

留言

張貼留言