What is dns-prefetch
Prefetch is a type of link tag used in the themes of websites. It is used between the <head> and </head> of the theme of any website. If you think to using dns-prefetch and boost the speed of website, it is very good idea.
Why is dns-prefetch used?
Prefetch means understanding a resource in advance. When a browser starts opening or displaying a web page or website on any device, for this it first starts parsing the coding of that website from the beginning, and line by line the HTML in the theme of that website, CSS, scripts, and javascript is parsed or rendered, then the webpage is displayed accordingly. The browser first parses the coding between <head> and </head>, then the code between <body> and </body>. When the browser starts parsing the codes between <body> and </body>, that web page starts displaying on the device. The browser handles this task very quickly. As you must be aware, the resources and technology of many websites are used in the creation of any website. Like google font technology for fonts, Cloudflare javascript for theme hosting, google analytics, etc.
When the browser parses or renders line by line the HTML, CSS, and Javascript resources included in the theme of that website in order to open or display a web page or website, the CSS, scripts, and Javascript structural resources that are included in that website are other It takes a few milliseconds to seconds for the browser to understand and display the websites that are found, which reduces the speed of the website.
Therefore, the domains of the websites whose infrastructure resources are used in a website are linked between the <head> and </head> of the theme by dns-prefetch linking. Doing so has the advantage that when the browser starts to parse or render line by line the HTML, CSS, and Javascript resources included in that website’s theme to open or display a web page or website, the theme’s < Prefetch linking between head> and </head> makes it clear that these CSS and scripts, Javascript resources have been used in this website. When the browser detects this through dns-prefetch linking, the browser takes less time to retrieve resources from those sources, and thus increases the loading speed of the website to some extent.
Guidelines for using dns-prefetch
Many new website operators fill a lot of unnecessary dns-prefetch in their website when first time or due to incomplete information, which is wrong. If you’re using blogger.com and you’re using a premium or free theme, that theme may already have a lot of dns-prefetch built in.
DNS-prefetching in WordPress is done through plugins, which are automated by the RankMath or Yoast SEO plugins. But in Blogger and other CMS platforms, this work has to be done manually.
dns-prefetch should be placed between the <head> and </head> of the website’s theme only for the domains that you are currently using to structure the website. By applying too many unnecessary dns-prefetch, the speed of the website decreases instead of increasing. As per our best practice, dns-prefetch linking should be done as follows:
First of all, you should find out that apart from the domain of your website, which domain’s technology (CSS and Script, Javascript) is being used structurally. To find out, you can inspect the coding of your website or any webpage of your website by opening it in view-source:https://…..You may find that there are one or several,
https://fonts.gstatic.com/s/raleway/v19/1Ptsg8zYS_SKggPNyCg4QIFqPfE.woff2 URLs for Google Fonts or other, one or several, for Font Awesome. URLs of type
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.eot For Font Awesome stylesheet,
https://cdnjs.cloudflare.com/ajax/libs /font-awesome/5.15.2/css/fontawesome.min.css and,https://fonts.googleapis.com/css2?family=Tajawal:[email protected];500;700&display=swaptype URLs or other, and Hosted
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'/>or others are used as plugins.
Therefore, for all the URLs other than your domain, you add their domain as dns-prefetch between <head> and </head> of the theme. eg:
<link href=’//fonts.googleapis.com’ rel=’dns-prefetch’/>
If you are not fully aware, use // before the domain in dns-prefetch linking by not using https://, because some domains open with https://, some with http:// . If you can determine that those other domains open with https://, you can use https://.
Some of the most commonly used dns-prefetch are listed as follows:
<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='//feeds.feedburner.com' rel='dns-prefetch'/> <link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/> <link href='//www.google-analytics.com' rel='dns-prefetch'/> <link href='//blogger.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'/> <link href='//www.google.com' rel='dns-prefetch'/>Conclusion
We tried to give almost enough information about dns-prefetch in this article. We believe that you will learn how to use dns-prefetch through this article. If you have any problem doing this then you write in the comment box below.
Able People Encourage Us By Donating : सामर्थ्यवान व्यक्ति हमें दान देकर उत्साहित करें।
Thanks for reading: Using dns-prefetch and boost the speed of website, Please, share this article. If this article helped you, then you must write your feedback in the comment box.
