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.