: Should tag be placed as high as possible in website? I'm implementing the new dns-prefetch tag for my web application and I wonder where I should place it in the <head> tag? Should
I'm implementing the new dns-prefetch tag for my web application and I wonder where I should place it in the <head> tag?
Should I place it as the first tag in <head> so that browser immediately starts prefetching DNS?
<html>
<head>
<link rel="dns-prefetch" href="//ajax.googleapis.com">
... other tags ...
</head>
<body>
</body>
</html>
I can't find a good guide about this tag.
More posts by @Radia820
2 Comments
Sorted by latest first Latest Oldest Best
Dns-prefetch is a hint telling your web browser that you are probably going to use that domain at some point so go ahead and set up the connection in advance to save some time.
The main point is that it's a hint for a future page. So your browser will only use it if it's not busy doing something else. When a page is first loaded it has lots more important resources to load which have a much higher priority than a hint so even if you hint is the very first thing on the page most browsers will likely ignore it until later. Which makes sense as why would you waste time on something you might use later, when you have resources on this page that you know you need now.
It also important to note that, because of that, there is no benefit to prefetch any resource on your current page - though there is if a stylesheet you reference has a resource in it that requires a dns lookup as that is not directly on your page.
Finally dns-prefetch only saves a very small bit of time (the DNS lookup). If you're that certain you'll need something from that domain then why not use pre-connect instead and do both the DNS lookup, TCP connection and any HTTPS handshake? See here for more details: www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/
So, to answer your question, no it doesn't matter how high you put it up because the browser will most likely ignore it until it's handled the rest of your page.
I'd suggest inserting a tag that defines the character set of the page before any other tag, especially if you want older versions of Internet Explorer to properly parse your page.
On webpagetest.org during a URL test, I noticed this:
Make sure your charset is defined at the top of your head or in HTTP headers, otherwise IE may have to restart page parsing (resulting in canceled requests).
More: MSDN Blog - Best Practice: Get your HEAD in order
Here's a good source for prefetching: developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ
It states that (for mozilla browsers) the URL defined for the prefetch will only be checked during the browser's idle time, meaning when it's not scanning a page. For this reason, using the link tag for dns-prefetching can be placed anywhere between <head> and </head> of your HTML document subject to the restrictions in my 1st paragraph.
As an alternative, you can use an HTTP header to define the URL to be prefetched. Details for that are also shown in the link prefetching FAQ.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.