Resource Hints

Resource Hints are link tags that tell the browser to prepare for resources it will likely need, so they are ready sooner when the page asks for them.

They give the browser advance knowledge it would not otherwise have until it parsed further into the page. By acting on that knowledge early, the browser can open connections and fetch files ahead of time, trimming the delays that come from discovering each resource only at the moment it is referenced. Used well, they improve loading performance and can help metrics like Largest Contentful Paint; used carelessly, they spend bandwidth on things the page never needs.

There are four common hints, each for a different job. preconnect opens an early connection to another origin, doing the DNS, TCP, and TLS handshake in advance, which suits a known third-party domain such as a font or analytics host. dns-prefetch is the lighter version, resolving only DNS. preload fetches a specific resource the current page needs soon, at high priority. prefetch fetches a resource for a likely next navigation, at low priority, for when the user moves on.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">
<link rel="prefetch" href="/next-page.html">

The skill is matching the hint to the need and using each sparingly. Preconnect to origins you will definitely use, preload only the few resources critical to the current view, and prefetch only navigations users are likely to take. Too many hints make them compete and can slow the page they were meant to speed up.

Related: Preload, Render Blocking, LCP complete guide