Module 14: Metadata, SEO, and Resource Loading
Resource Hints: preload, preconnect, and dns-prefetch
Use resource hints only when you can identify a critical resource or connection that benefits from early discovery.
Resource hints let a page communicate likely network needs before the browser discovers every resource through normal parsing.
preconnect starts a connection to an important origin. dns-prefetch asks the browser to resolve a host name early. preload fetches a specific resource that the current page will need soon.
<link rel="preconnect" href="https://fonts.example.com" crossorigin>
<link rel="preload" href="/fonts/site.woff2" as="font" type="font/woff2" crossorigin>
Preloading the wrong resource can compete with images, scripts, or styles that matter more. A preload should match the resource the page actually requests, including relevant type and cross-origin settings. If the resource is not used, the browser may have wasted bandwidth.
Browsers already discover many resources efficiently. Add hints only after performance measurement identifies an important resource that is discovered late or a third-party origin that is consistently needed. Correct image dimensions, appropriate image sizes, efficient CSS, and sensible script loading often matter more than a large collection of speculative hints.