What is dns-prefetch? Front-end optimization: DNS pre-resolution improves page speed

Background

Although DNS requests take up very little bandwidth, they will have high latency, which is more obvious on mobile networks. DNS pre-resolution technology can effectively reduce latency

Using dns-prefetch on Firefox, DNS pre-resolution is processed in parallel with page loading and does not affect the performance of page loading.

When accessing mobile websites that are mainly based on images, the page loading time can be improved by 5% with the use of DNS pre-resolution

1. What is dns-prefetch?

DNS realizes the mapping from domain name to IP. When accessing a site through a domain name, DNS resolution is required for each request. Currently, each DNS resolution usually takes less than 200ms. To address the time-consuming DNS resolution issue, some browsers use DNS Prefetch to improve access smoothness.
DNS Prefetch is a DNS pre-resolution technology. When browsing the web, the browser will resolve and cache the domain names in the web page when loading the web page. In this way, there is no need to perform DNS resolution when clicking on the link in the current web page, reducing user waiting time and improving user experience.

Currently, each DNS resolution usually takes less than 200ms. To address the time-consuming DNS resolution issue, some browsers use DNS Prefetch to improve access smoothness.

Currently, the browsers that support DNS Prefetch are Google Chrome and Firefox 3.5.

2. How to set up dns-prefetch?

If you want the browser to resolve a specific domain name, you can add a link tag to the page. For example:

<link rel="dns-prefetch" href="http://img.jb51.net" />

If you want to control whether the browser pre-resolves the domain name, you can control it through the x-dns-prefetch-control attribute of the HTTP header.
Unfortunately, only Google Chrome and Firefox 3.5 currently support the above tags.

Generally speaking, the reason for this delay is not the bandwidth or load of the other party's website, so what exactly causes this situation? Zhanlan tried to speculate and assumed that it was a DNS problem, because the DNS resolution speed is likely the biggest cause of resource delays. So Zhanlan added the following code in the page header (for DNS pre-resolution):

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
<link rel="dns-prefetch" href="http://nsclick.baidu.com" />
<link rel="dns-prefetch" href="http://hm.baidu.com" />
<link rel="dns-prefetch" href="http://eiv.baidu.com" />
<link rel="dns-prefetch" href="http://img.jb51.net" />

The effect is very good (the test browser is IE8), and the loading speed of Baidu sharing button is significantly improved when opening other pages!

<link rel="dns-prefetch" href="http://common.jb51.net" />
<!--If you are not sure whether it is an http or https connection, the following is recommended-->
<link rel="dns-prefetch" href="//common.jb51.net" />

3. DNS Prefetching pre-resolution implementation principles and precautions

1. <meta> information tells the browser that the current page needs to be pre-resolved by DNS;

<meta http-equiv="x-dns-prefetch-control" content="on" />

2.</head>Use the <link> tag to force DNS pre-resolution;

<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

3. Use dns-prefetch with caution. Repeated DNS pre-resolution of multiple pages will increase the number of repeated DNS queries.

4. The browser's first DNS resolution process for the website's domain name:

Browser cache -> System cache -> Router cache -> ISP -> DNS cache -> Recursive search

5. If you want to disable implicit DNS Prefetch, you can use the following tag

<meta http-equiv="x-dns-prefetch-control" content="off">

IV. Typical Cases

Taobao:

<link ref="dns-prefetch" href="//tce.taobao.com" />
<link rel="dns-prefetch" href="//log.mmstat.com" />
<link rel="dns-prefetch" href="//tui.taobao.com" />
<link rel="dns-prefetch" href="//ald.taobao.com" />
<link rel="dns-prefetch" href="//gw.alicdn.com" />

Alipay, NetEase, etc.

Notice;

Although using DNS Prefetch can speed up the resolution of pages, it should not be abused, as some developers have pointed out that disabling DNS prefetching can save 10 billion DNS queries per month.

5. DNS Prefetch Process

When a browser requests a URL, through Firebug we can find that there are probably the following processes: blocking, domain name resolution, establishing connection, sending request, waiting for response, and receiving data. The last four are related to the user's network conditions and your server processing speed. This article focuses on the first two.

1. Blocking: Solution - Increase the number of concurrent browser connections

Blocking: Different browsers have certain restrictions on the maximum number of concurrent connections for a single domain name, and HTTP/1.0 and HTTP/1.1 are also different. For example, under the HTTP/1.1 protocol, the number of concurrent connections of IE6 is limited to 2; while under HTTP/1.0, the number of concurrent connections of IE6 can reach 4. Other browsers have similar limits, usually 4 to 8. At this time, if the browser initiates multiple requests to a domain name at the same time, if the limit is exceeded, a waiting state will occur, which means blocking.

In order to solve the blocking problem, we can disperse the domain names of certain URLs. For example, our image domain names are generally similar to img.guoweiwei.com. When a page contains more than 20 images, at least 10 requests will be blocked. If we disperse them to different domain names such as img0.guoweiwei.com/img1.guoweiwei.com/img2.guoweiwei.com/…, at least these 20 image requests will be carried out concurrently, and the website opening speed will be significantly improved. Similarly, the same processing can be applied to some css/js domain names.

2. Domain name resolution: Solution - DNS pre-resolution

Domain name resolution: The process of querying the IP from the domain name. This process is generally very fast, but it may also cause delays. Generally, browsers will cache the resolution results appropriately and pre-resolve new domain names that appear in the page, but not all browsers will do this. In order to help other browsers pre-resolve certain domain names, you can add dns-prefetch to the html tag of the page to tell the browser to pre-resolve the specified domain name, as follows:

<link rel="dns-prefetch" href="//domain.com">

If you are careful, you will find these two phenomena on Taobao's website. Taobao has many domain names like img0.tbcdn.cn.

Another optimization point:

3. Cookie isolation

So why use the domain name img0.tbcdn.cn instead of img0.taobao.com? This has to start with cookies. Taobao's cookies are already very large, reportedly close to 1K. If you use the domain name at the end, each image request will include a long cookie. The consequences are obvious. Not only does it slow down network requests, but it also wastes bandwidth. Taobao's image server does not need these cookies. This is called cookie pollution, and to solve this problem, a separate domain name is necessary.

The following highlights:

4. DNS pre-resolution solution

DNS pre-resolution is when the browser attempts to resolve the domain name before the user accesses the link. This is the normal DNS resolution mechanism of the computer.

After the domain name is resolved, if the user actually accesses the domain name, there will be no delay in the DNS resolution time.

The most obvious example is that DNS pre-resolution is very effective when a page contains a lot of domain names, such as a search results page. When encountering a hyperlink in a web page, DNS prefetching extracts the domain name from it and resolves it into an IP address. This work is performed in the background while the user is browsing the web, using minimal CPU and network. When users click on these pre-resolved domain names, the time consumption can be reduced by an average of 200 milliseconds (assuming that the user has not visited the domain name recently). More importantly, users will not encounter the worst-case scenario of DNS resolution (often exceeding 1 second).

DNS Prefetch, or DNS pre-acquisition, is part of front-end optimization. Generally speaking, there are two points related to DNS in front-end optimization:

One is to reduce the number of DNS requests.

Another is to perform DNS pre-acquisition.

As the basic protocol of the Internet, the resolution speed of DNS seems to be easily overlooked by website optimizers. Most new browsers are now optimized for DNS resolution. A typical DNS resolution takes 20-120 milliseconds. Reducing the DNS resolution time and number is a good optimization method.

DNS Prefetching allows domain names with this attribute to be resolved in the background without the user having to click a link. Domain name resolution and content loading are serial network operations, so this method can reduce user waiting time and improve user experience.

The browser's first DNS resolution search process for a website is as follows: browser cache - system cache - router cache - ISP DNS cache - recursive search

By default, the browser will pre-fetch domain names in the page that are not in the same domain as the current domain name (the domain name of the web page being browsed) and cache the results. This is implicit DNS Prefetch. If you want to prefetch domains that do not appear on the page, then use the explicit DNS Prefetch.

Currently, most browsers already support this property. The supported versions are as follows:

•– Safari: 5+
•– Chrome: All
•– Firefox: 3.5+
•– Opera: Unknown
•– IE: 9+ (called “Pre-resolution” on blogs.msdn.com)

Chrome and Firefox 3.5+ have built-in DNS Prefetching technology and have made corresponding optimization settings for DNS pre-resolution. Therefore, even without setting this property, Chrome and Firefox 3.5+ can automatically perform pre-parsing in the background.

Currently, many large sites have also applied this optimization, for example:

Taobao, Alipay, NetEase

DNS Prefetch should be placed at the beginning of the web page as much as possible, and it is recommended to be placed after <meta charset="UTF-8">. The specific usage is as follows:

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//www.zhix.net">
<link rel="dns-prefetch" href="//api.share.zhix.net">
<link rel="dns-prefetch" href="//bdimg.share.zhix.net">

Implementation of pre-parsing:

1. Use meta information to inform the browser that the current page needs to be pre-resolved by DNS: <meta http-equiv="x-dns-prefetch-control" content="on" />

2. Use the link tag in the page header to force DNS pre-resolution: <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

Note: dns-prefetch should be used with caution. Repeated DNS pre-resolution of multiple pages will increase the number of repeated DNS queries.

It should be noted that although using DNS Prefetch can speed up page resolution, it should not be abused, as some developers have pointed out that disabling DNS prefetching can save 10 billion DNS queries per month.

If you need to disable implicit DNS Prefetch, you can use the following tag:

<meta http-equiv="x-dns-prefetch-control" content="off">

PS: DNS pre-resolution is mainly used for website front-end page optimization. Its role in SEO has not yet been verified, but as part of enhancing user experience, rel="dns-prefetch" may be worth your slow discovery.