Preload & Preconnect (Resource Hints)
Preload and preconnect are HTML resource hints with which developers tell the browser about important loading steps in advance. `<link rel="preload">` fetches a specific, known critical resource (a font or hero image, for example) early and at high priority; `<link rel="preconnect">` sets up DNS resolution, TCP connection and TLS handshake to an external domain ahead of the actual request.
In practice
In practice, preload is used selectively for resources that decide the Largest Contentful Paint, such as the hero image or a custom font, often combined with fetchpriority="high". Font preloads must carry the crossorigin attribute, otherwise the browser downloads the file a second time. Preconnect suits critical third-party domains such as an image CDN or an analytics service whose resources are certain to be needed soon – according to web.dev, an early connection saves roughly 100 to 500 milliseconds. Important: use both hints sparingly, because too many parallel preloads or preconnects compete for bandwidth and processing time and can even delay the loading of more important resources; the browser also drops unused preconnect connections after 10 seconds.