Reduce DNS Lookups


Part One Chapter 15

DNS

Reducing the number of DNS lookups and enabling keep-alive should normally improve your mobile web pages' load speed.

What is DNS Lookup

A DNS (domain name system) lookup can map hostnames to IP addresses. For example:

  • When a user enters m.example.com into the web browser, a DNS resolver is contacted by the web browser and returns the server's IP address.
  • DNS has a downside. Each DNS lookup may take some 100-200 milliseconds for the web browser to look up the IP address for any hostname.
  • The web browser will not be able to download any files from this hostname until the DNS lookup is completed.
  • The response time depends on the DNS resolver (typically provided by the user’s Internet service provider), the load of requests on it, the user’s proximity to it, and the bandwidth speed.

An Example

For example, you have a page with URL m.example.com/page-xyz.html. When loading this page it has to request resource files from 4 other hostnames than m.example.com, including:

  • css.example.com
  • js.example.com
  • images.example.com
  • www.example-2.com
<head>
<link rel="stylesheet" href="http://css.example.com/style.css" />
<link rel="stylesheet" href="http://www.example-2.com/style2.css" />
<script src="http://js.example.com/script.js"></script>
<script src="http://www.example-2.com/script2.js"></script>
</head>
<body>
<!-- Page Content -->
<div><img src="http://images.example.com/image-1.png"></div>
<div><img src="http://images.example.com/image-2.png"></div>
<div><img src="http://images.example.com/image-3.png"></div>
<div><img src="http://www.example-2.com/image-4.png"></div>
<!-- Some More Page Content -->
</body>

Enable Keep-alive

Keep-alive is a persistent connection and is a method that keeps a connection alive between the web server and the web browser, when the web browser requests multiple resource files from the same domain.

For any resource files to be downloaded for your mobile web page, the web browser must look up at least once for each domain your page is receiving resource files from.

When keep-alive is disabled for web browsers, the DNS lookups below are required. In this case, 8 DNS lookups are required for 8 resource files with keep-alive disabled.

  • css.example.com (x 1 time)
  • js.example.com (x 1 time)
  • images.example.com (x 3 times)
  • www.example-2.com (x 3 times)

When keep-alive is enabled for web browsers, fewer DNS lookups will be required. In this case, only 4 DNS lookups are required for 8 resource files with keep-alive enabled.

  • css.example.com (x 1 time)
  • js.example.com (x 1 time)
  • images.example.com (x 1 time)
  • www.example-2.com (x 1 time)

Enabling keep-alive can reduce the number of DNS lookups that are required for downloading resource files, and will improve page load speed.

Keep-alive is web server specific. Depending on the web server your mobile website is on, you will have to set up different instructions when enabling keep-alive on Apache and Nginx.

Enable Keep-alive on Apache

To enable keep-alive on Apache, add the code below to the .htaccess file.

<ifModule mod_headers.c> 
Header set Connection keep-alive 
</ifModule>

Enable Keep-alive on Nginx

To enable keep-alive on Nginx for all web browsers, use the HttpCoreModule and make sure the “keepalive_disable” directive is assigned to “none”. For example:

keepalive_disable none; # allow all web browsers to use keepalive

Request from Fewer Hostnames

In the previous example of page m.example.com/page-xyz.html, 4 hostnames have been used for storing resource files.

  • css.example.com
  • js.example.com
  • images.example.com
  • www.example-2.com

While keep-alive is turned on, you can relocate all the resource files to all under one single hostname resources.example.com. This setup will reduce to 1 DNS lookup.

Below is the web page's code after changing to store resource files all under one hostname.

<head>
<link rel="stylesheet" href="http://resources.example.com/style.css" />
<link rel="stylesheet" href="http://resources.example.com/style2.css" />
<script src="http://resources.example.com/script.js"></script>
<script src="http://resources.example.com/script2.js"></script>
</head>
<body>
<!-- Page Content -->
<div><img src="http://resources.example.com/image-1.png"></div>
<div><img src="http://resources.example.com/image-2.png"></div>
<div><img src="http://resources.example.com/image-3.png"></div>
<div><img src="http://resources.example.com/image-4.png"></div>
<!-- Some More Page Content -->
</body>

Another Example

For example, the loading of a mobile web page (m.yhd.com) requires 2 DNS lookups, each from a distinct hostname:

DNS Lookups

  • Hostname 1: m.yhd.com
  • Hostname 2: image.yihaodian.com

Each DNS lookup takes up certain amount of time before the web browser can start downloading the actual resource file.



Gordon Choi's Mobile Website Book has been available since November 2016.







Content on Gordon Choi's Mobile Website Book is licensed under the CC Attribution-Noncommercial 4.0 International license.

Gordon Choi's Mobile Website Book

Gordon Choi’s Other Websites:
SEO Expert in Hong Kong (Gordon Choi’s Blog)
Analytics Book