DNS (or Domain Name Server) pre-fetching is an attempt to resolve domain names before a user tries to follow a link. This is done using the computer’s normal DNS resolution mechanism; no connection to Google is used. Once a domain name has been resolved, if the user does navigate to that domain, there will be no effective delay due to DNS resolution time. The most obvious example where DNS prefetching can help is when a user is looking at a page with many links to various domains, such as a search results page. When we encounter hyperlinks in pages, we extract the domain name from each one and resolving each domain to an IP address. All this work is done in parallel with the user’s reading of the page, using minimal CPU and network resources. When a user clicks on any of these pre-resolved names, they will on average save about 200 milliseconds in their navigation (assuming the user hadn’t already visited the domain recently). More importantly than the average savings, users won’t tend to experience the “worst case” delays for DNS resolution, which are regularly over 1 second.
For example the following dns-prefetch domains can be included in the <head></head> section of your site.
<!-- Amazon S3 --> <link rel="dns-prefetch" href="//s3.amazonaws.com"> <!-- Google CDN --> <link rel="dns-prefetch" href="//ajax.googleapis.com"> <!-- Microsoft CDN --> <link rel="dns-prefetch" href="//ajax.microsoft.com"> <link rel="dns-prefetch" href="//ajax.aspnetcdn.com"> <!-- CDN JS --> <link rel="dns-prefetch" href="//cdnjs.cloudflare.com"> <!-- Bootstrap CDN --> <link rel="dns-prefetch" href="//netdna.bootstrapcdn.com"> <!-- Google Tag Manager --> <link rel="dns-prefetch" href="//www.googletagmanager.com"> <!-- Google Analytics --> <link rel="dns-prefetch" href="//www.google-analytics.com"> <!-- Google Fonts --> <link rel="dns-prefetch" href="//fonts.googleapis.com"> <!-- Facebook --> <link rel="dns-prefetch" href="//connect.facebook.net"> <!-- Google+ --> <link rel="dns-prefetch" href="//apis.google.com"> <!-- Linkedin --> <link rel="dns-prefetch" href="//platform.linkedin.com"> <!-- Twitter --> <link rel="dns-prefetch" href="//platform.twitter.com">
In practice, this can look like so in an HTML5 document:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="dns-prefetch" href="//ajax.googleapis.com" /> <link rel="dns-prefetch" href="//cdnjs.cloudflare.com" /> </head> <body>
Thank you for the tips.
Thanks alot for the help
Well written and clear. Very useful Thomas.
Thanks for your comment, Thomas!