Answer
Preload, preconnect, and dns-prefetch are different resource hints. • Preload fetches a known current-page resource early. • Preconnect prepares DNS, TCP, and secure connection work for an origin. • dns-prefetch performs only an early DNS lookup for a likely origin.
💡 Simple Example
<head><link rel="preload" href="/styles/critical.css" as="style"><link rel="preconnect" href="https://cdn.example.com"><link rel="dns-prefetch" href="//images.example.com"></head>
⚡ Quick Revision
Preload fetches a resource; preconnect prepares a connection; dns-prefetch resolves a hostname.