How to see dns-prefetch advantages?

500 Views Asked by At

I'm doing some performance tests for my web application and I actually don't know how to understand the webpage test results for dns-prefetch in the links.

For the links where I've added link rel="dns-prefetch" I see the green part at the beginning of the first request for each link. But my expectations were to see the dns-handshake at the beginning of the diagram (where the arrow is trying to point in the attached image) I mean, I believed the browsers actually forced a request for the links with dns-prefetch at the start even also the link were used.

Is that the expected behaviour? Because I've been testing without prefetching dns, and the diagrama is really similar.

webpagetest screenshot results

1

There are 1 best solutions below

0
On

As far as I can tell in your diagram, there's a long waiting period of idle time while the document is waiting to be transferred. dns-prefetch hints (and other resource hints) don't take effect until the browser discovers them. Moreover, the impact of these hints will vary based on their proximity to other resource references in the document. For example, if you have a dns-prefetch hint in a <link> tag in the head to an external resource that's also referenced in the head, you're not likely to see much benefit. However, if the resource is in the footer, or part of a high-latency critical request chain, the benefits may be more pronounced.

Here's a concrete example of what I'm talking about: when you look at the waterfall (or even the connection view) of this webpagetest report you can see that I've issued a dns-prefetch hint for a JavaScript resource on polyfill.io. The dns-prefetch hint is specified in the head, but the JavaScript resource is placed in the footer.