3

In my web page I load around 12 resources from jsdelivr (CSS and JS).

Should I optimize it with one (or both) of following techniques? If yes, should I put the tags right before loading tags or at the beginning of the page?

  • DNS prefetch
  • DNS preconnect

Thanks.

2
  • How many unique domains your resources are from?
    – Kannan
    Jun 2, 2021 at 15:50
  • Just one: cdn.jsdelivr.net Jun 2, 2021 at 17:09

1 Answer 1

3

No doubt that resource hints like preconnect and prefetch improve performance. The only pitfall could be preconnecting too many domains. Based on an old StackOverflow thread (https://stackoverflow.com/questions/55445293/is-there-a-limit-to-how-many-domains-we-should-dns-prefetch-preconnect-with-ch) preconnecting more than 4-6 domains could consume resources on the client-side and generally not recommended (subject to testing in real-world scenario). But since you are speaking about a single domain, you should be able to preconnect without adverse effects.

A good practice is to issue a preconnect followed by a prefetch as fallback. The thread I had mentioned has the following example

<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">

Regarding implementation, you should be fine by adding these within head tags.

For preconnect hint specifically, another implementation method (may be more effective) is via a http header. (In this case, I would recommend issuing preconnect via http header and prefetch from within the html document.) The below URL discusses both the implementation methods.

https://web.dev/preconnect-and-dns-prefetch/

3
  • 1
    Thanks. For CSS resources, I have tags to load them from CDN within <head> tag, but for JS resources they are at the end of the HTML file right before </body> tag. Now how to position preconnect and dns-prefetch tags to get the most out of them? Jun 3, 2021 at 15:52
  • 2
    Since all the js and css files are from the same CDN domain, add the following within head tags <link rel="preconnect" href="//cdn.jsdelivr.net" /> <link href="//cdn.jsdelivr.net" rel="dns-prefetch">
    – Kannan
    Jun 3, 2021 at 16:32
  • preconnect also does a dns-prefetch. So preconnect should be sufficient. May 8, 2022 at 21:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.