dns-prefetch tells the browser that it should perform the resolution of a given domain name (determining the IP to connect) before that domain is used to download resources.
preconnect indicates to the browser that it should connect to a given origin before that domain is used to download resources.
One can speed up the load time by 100–500 ms by establishing early connections to important third-party origins. These numbers might seem small, but they do make a difference.

Browser support for dns-prefetch is slightly different from preconnect support, so dns-prefetch can serve as a fallback for browsers that don’t support preconnect.

Preconnect Browser Support

Prefetch Browser Support

