How to Increase Web page Speed by DNS Prefetch and Preconnect?

How to speed up your Blogger, WordPress, or website by using DNS Prefetch (rel="dns-prefetch") and Preconnect (rel="preconnect")to resolve domain name

A web page that loads quickly is always popular with the audience. Delay loading web pages that take longer to load are always skipped by visitors because there are thousands of other websites with relevant material. As a result, we are inadvertently losing a large number of leads and ad revenue.

There are numerous factors that go into making a webpage load faster, but Domain Name Server (DNS) hostname resolution is one of the most important. It takes time to translate a domain name to an IP address, and if this takes time, your website will take longer to load.

Fortunately, we've discovered a solution in the HTML5 feature that allows your browser to use DNS Prefetching and Preconnect to speed up cross-domain loading. Your site's performance will improve once you use the DNS Prefetch and Preconnect markup and syntax.

Increase Web page Speed

What is DNS Prefetch?

DNS Prefetch or Prefetching alerts the web browser to the existence of online assets such as data files, images, or audio files that will be required at a later time from a specific URL. As a result, the DNS (Domain Name Server) can be resolved as rapidly as feasible by the browser.

If the browser can resolve DNS during the loading process, then when a user clicks on a link on the web page, the browser does not need to perform additional DNS queries to figure out which IP address to contact for that specific link. Because the browser resolves the DNS during the loading process.

Doest DNS Prefetch works on all browsers?

While DNS Prefetch does increase the speed with which our webpages load, it does not operate with older browser versions. It is now in use.

  • Google Chrome
  • Safari 5+
  • Firefox 3.5 and higher version
  • IE 9 and higher version

Whatever the case may be, it appears to work in all major browsers. Furthermore, most recent browsers resolve DNS by default, but if you add any HTML script for restriction, it may cease operating. As a result, we can add this to make our website speedier than it was previously.

What is Preconnect?

Preconnect is similar to DNS prefetch, except it also resolves DNS and performs DNS lookups, TLS negotiations, and optional TCP handshakes. Before sending HTTP queries to the server, preconnect allows the browser to establish early connections.

As a result, the user's request path may be free of roundtrips. A preconnect like the one shown below can be used.


<link href=' http://bloggerspice.com ' rel=' preconnect '/>

or


<link rel='preconnect' href='http://bloggerspice.com'>

Preconnecting works in a similar way as DNS prefetching. All you have to do now is modify the rel-tag. You must use 'preconnect' instead of 'DNS-prefetch.'

Establishing connections often involves significant time in slow networks, particularly when it comes to secure connections, as it may involve DNS lookups, redirects, and several round trips to the final server that handles the user's request. web.dev

How to use Preconnect in Blogger and WordPress?

This is a rather simple task. Preconnect can be used immediately after the header section has been opened. simply add code below <head>.

How to add DNS Prefetch in Blogger Site?

The Blogger site is always loaded with a slew of Google default resources, which slows it down. So that DNS can resolve the issue as the site loads, you can utilize DNS prefetch to optimize site performance.

#1: Log in to your Blogger Account and go to Dashboard

#2: From vertical options click on Template then Edit HTML

#3: Now locate the opening head <head>.

#4: and add the specific 'dns-prefetch' after opening the head.


<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//28.2bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//feeds.feedburner.com' rel='dns-prefetch'/>

#5: at the end click Save template button.

latest DNS Prefetch Markup for Blogger

You can use a variety of 'dns-prefetch' markup in your Blogger template. For social media, I've included a detailed list with 'dns-prefetch' markup. So, depending on your needs, use the real markup.


<!-- Google Blogger -->
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//28.2bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<!-- Bootstrap CDN -->
<link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
<!-- Google Fonts -->
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<!-- Font Awesome -->
<link href='//use.fontawesome.com' rel='dns-prefetch'/>
<!-- Google CDN -->
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//feeds.feedburner.com' rel='dns-prefetch'/>
<!-- Microsoft CDN -->
<link href='//ajax.microsoft.com ' rel='dns-prefetch'/>
<link href='//ajax.aspnetcdn.com ' rel='dns-prefetch'/>
<!-- Github -->
<link href='//github.com' rel='dns-prefetch'/>
<!-- CDN JS -->
<link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>
<!-- Google Analytics -->
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<!-- Google Services -->
<link href='//themes.googleusercontent.com ' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='preconnect'/>
<link href='//www.googletagservices.com' rel='dns-prefetch'/>
<link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
<link href='//apis.google.com' rel='dns-prefetch'/>
<!-- Facebook -->
<link href='//www.facebook.com' rel='dns-prefetch'/>
<link href='//connect.facebook.net' rel='dns-prefetch'/>
<!-- Google Plus -->
<link href='//plus.google.com' rel='dns-prefetch'/>
<!-- Twitter -->
<link href='//twitter.com' rel='dns-prefetch'/>
<link href='//platform.twitter.com' rel='dns-prefetch'/>
<link href='//syndication.twitter.com' rel='dns-prefetch'/>
<link href='//r.twimg.com ' rel='dns-prefetch'/>
<link href=' http://p.twitter.com ' rel='dns-prefetch'/>
<link href=' http://cdn.api.twitter.com ' rel='dns-prefetch'/>
<!-- YouTube -->
<link href='//www.youtube.com' rel='dns-prefetch'/>
<!-- Pinterest-->
<link href='//www.pinterest.com' rel='dns-prefetch'/>
<!-- Linkedin -->
<link href='//www.linkedin.com' rel='dns-prefetch'/>
<!-- Vimeo -->
<link href='//player.vimeo.com' rel='dns-prefetch'/>
<!-- Amazon S3 -->
<link href='//s3.amazonaws.com ' rel='dns-prefetch'/>
<!-- BuySellads -->
<link href='//s3.buysellads.com ' rel='dns-prefetch'/>
<link href='//stats.buysellads.com ' rel='dns-prefetch'/>
<link href='//cdn.adpacks ' rel='dns-prefetch'/>

Keep in mind that you don't need to use all of the 'dns-prefetch' markup. If you don't have any Vimeo links on your website, you won't need to use the Vimeo markup. However, you should utilize the 'dns-prefetch' markup in all Google and Blogger services.

Read also: best 22 plugin to speed up wordpress site (get GTmetrix 100%)

How to Apply DNS Prefetch in WordPress?

Simply paste this code into your function.php file, and always use a child theme so that when your main theme is updated, it doesn't mess up your customizations.

#1: Log in to your WordPress account then go to Dashboard

#2: From Dashboard click on "Appearance" then "Editor"

#3: Now locate function.php or Child Theme’s function.php file from the right column and instantly function.php file will open in Editor

#4: Now add the following DNS prefetching Markup.



//* Adding DNS Prefetching in WordPress
function stb_dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//fonts.gstatic.com" />
<link rel="dns-prefetch" href="//0.gravatar.com/" />
<link rel="dns-prefetch" href="//2.gravatar.com/" />
<link rel="dns-prefetch" href="//1.gravatar.com/" />';
}
add_action('wp_head', 'stb_dns_prefetch', 0);

#5: at the end click "Update File"

latest DNS Prefetch Markup for WordPress

You can use the markup from the list below if you wish to add more. I've provided a list of the most important prefetching markup for WordPress sites below. You are free to use any markup that suits your needs.


<!-- WordPress.org  -->
<link rel="dns-prefetch' href='//s.w.org">
<!-- Gravatar -->
<link rel="dns-prefetch" href="//0.gravatar.com/" />
<link rel="dns-prefetch" href="//2.gravatar.com/" />
<link rel="dns-prefetch" href="//1.gravatar.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">
<!-- Amazon S3 -->
<link rel="dns-prefetch" href="//s3.amazonaws.com">
<!-- BuySellads -->
<link rel="dns-prefetch" href="//cdn.adpacks.com">
<link rel="dns-prefetch" href="//s3.buysellads.com">
<link rel="dns-prefetch" href="//stats.buysellads.com">

How can I test the list of external domain links?

You might wish to check your website performance after adding DNS prefetch and preconnect markup. Because you're not sure if the external domains on your website are working or not? It's simple to keep track of the website's performance.

Third-party tools can be used to accomplish this. You can check your performance using two web tools. The following are some of them:

You can see the detailed test result after you've tested your webpage. In the case of webpagestest.org, after completing the test, go to the "Domain" area in the top menu and you'll find a list of external domains with the number of requests.

webpage speed test

If you conduct the test on ToolsPingdom, the results will be displayed on the same page. Simply scroll down to see the outcome.

There is also the best tool for website speed test by webpage loading speed test online

Conclusion

DNS prefetch is one of HTML5's most powerful features, and it will undoubtedly speed up your website's loading time. However, you should exercise caution. We can utilize a variety of DNS prefetchers, but not every site is the same.

If you're utilizing buysellads, for example, you should use that markup; however, if you're not, you may simply skip it. Gravatar, on the other hand, is used on practically every WordPress site. As a result, you must make use of this DNS prefetch.

Similarly, Blogger platform users can make use of particular DNS prefetch markup that is required for your Blog site. Thank you very much.