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 at 15:50
  • Just one: cdn.jsdelivr.net Jun 2 at 17:09
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/

2
  • 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 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 at 16:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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