Steps to speed up blogger and wordress site speed

Steps to speed up blogger and wordress site speed with DNS Prefetch

DNS Prefetch is a way to 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 required resources, and that the user agent should resolve as early as possible." ^[1]

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 keyboard
Search following code

<head>

Paste the following code below of <head> tags

<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:

Click on Save template

That's it. Now see your site and it's loading faster than before.

Also Read: Complete Blogger SEO Tricks

How to Add dns-prefetch to Wordpress

From dashboard go to appearance > edit

Now locate function.php file or child theme's function.php from the right column and instantly
function.php file will open in edito'

Paste the following code below:

//* 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);

Finally click update file

or to add more markup from below add the following code:

<!-- 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">

Steps to speed up blogger and wordress site speed

How to Add dns-prefetch to Blogger

Also Read: Complete Blogger SEO Tricks

How to Add dns-prefetch to Wordpress