DNS Prefetch is a way of resolving the DNS of a specific domain. Sometimes we used external image/js/CSS etc.. link in our site and it's effect on our web page loading time. By using DNS Prefetch, we can reduce the external link loading time. In this tutorial, we will learn how to add DNS Prefetch in our blogger site to speed up our site.
According to W3C, "The DNS-prefetch link relation type is used to indicate an origin that will be used to fetch the required resources, and that the user agent should resolve as early as possible."
How to Add DNS-prefetch to Blogger
- Login to your blogger account
- Go to Theme>Edit HTML
- Click anywhere inside the code area
- Press CTRL+F from a keyboard
- Search following code
- Paste following code below of <head> tags
<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='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/> <link href='//fonts.googleapis.com' rel='dns-prefetch'/> <link href='//use.fontawesome.com' rel='dns-prefetch'/> <link href='//ajax.googleapis.com' rel='dns-prefetch'/> <link href='//resources.blogblog.com' rel='dns-prefetch'/> <link href='//www.facebook.com' rel='dns-prefetch'/> <link href='//plus.google.com' rel='dns-prefetch'/> <link href='//twitter.com' rel='dns-prefetch'/> <link href='//www.youtube.com' rel='dns-prefetch'/> <link href='//feedburner.google.com' rel='dns-prefetch'/> <link href='//www.pinterest.com' rel='dns-prefetch'/> <link href='//www.linkedin.com' rel='dns-prefetch'/> <link href='//feeds.feedburner.com' rel='dns-prefetch'/> <link href='//github.com' rel='dns-prefetch'/> <link href='//player.vimeo.com' rel='dns-prefetch'/> <link href='//platform.twitter.com' rel='dns-prefetch'/> <link href='//apis.google.com' rel='dns-prefetch'/> <link href='//connect.facebook.net' rel='dns-prefetch'/> <link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/> <link href='//www.google-analytics.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='//syndication.twitter.com' rel='dns-prefetch'/>Note: I have included all of the DNS-prefetch code.
- Click on Save template
That's it. Now see your site and it's loading faster than before.
