preconnect vs dns-prefetch: Resource hints for page speed
Using dns-prefetch prompts the browser to look up a domain's IP address ahead of time, so it’s ready when resources from that domain need to be downloaded. Meanwhile, preconnect directs the browser to establish a connection to a given origin before any resources from that origin are requested. By proactively connecting to important third-party domains, you can shave off 100–500 milliseconds of load time. Although these savings might appear minor, they can meaningfully enhance the user experience. Because dns-prefetch has slightly different browser support than preconnect, it can act as a fallback in environments where preconnect isn't yet supported. Preconnect Browser Support Prefetch Browser Support Feel free to checkout the implementation on ThePetNest

Using dns-prefetch
prompts the browser to look up a domain's IP address ahead of time, so it’s ready when resources from that domain need to be downloaded.
Meanwhile, preconnect
directs the browser to establish a connection to a given origin before any resources from that origin are requested.
By proactively connecting to important third-party domains, you can shave off 100–500 milliseconds of load time.
Although these savings might appear minor, they can meaningfully enhance the user experience.
Because dns-prefetch
has slightly different browser support than preconnect
, it can act as a fallback in environments where preconnect
isn't yet supported.
Preconnect Browser Support
Prefetch Browser Support
Feel free to checkout the implementation on ThePetNest