Preconnect, preload and other resource hints

Telling the browser what is coming

A browser discovers resources as it parses a page: the HTML references a stylesheet, the stylesheet references a font, a script requests an API. Each discovery happens only after the previous step completes. Resource hints let you announce important resources earlier, so the browser can start work in parallel.

dns-prefetch

The lightest hint. It resolves a domain name in advance, saving one DNS lookup. Useful for third-party origins that will be contacted later but are not critical.

preconnect

Goes further: resolves DNS, opens the TCP connection, and completes the TLS handshake. When the request finally happens, the connection is ready. On a high-latency mobile link, this can save several hundred milliseconds.

Use it for the two or three origins most critical to the initial render, such as a font host, an image CDN, or the API the page calls immediately. Preconnecting to many origins wastes effort, because unused connections are closed after a few seconds.

preload

Tells the browser to fetch a specific resource right away, at high priority, because it will be needed soon. Ideal for resources that are discovered late:

• A font referenced from CSS.
• A hero image set as a CSS background.
• A script loaded by another script.

Preload must include the as attribute so the browser knows the resource type and priority. A preloaded resource that is not used within a few seconds triggers a console warning, which is a helpful signal that the hint is wrong.

prefetch

A low-priority hint for resources likely needed on the next page. The browser fetches them when idle and stores them in the cache. Good for the next step in a clear flow, such as the checkout script on a cart page.

fetchpriority

Not a link hint but closely related. The fetchpriority attribute on images, scripts and fetch calls adjusts the priority of resources the browser already knows about. Raising the priority of the main image and lowering it for below-the-fold carousels often improves largest contentful paint.

Early hints

The 103 Early Hints status lets a server send preload and preconnect headers before the final response is ready. While the server is still rendering the page, the browser starts fetching critical assets. For pages with significant server think time, this can recover much of that time.

Use them sparingly

Every hint competes for bandwidth and connection slots. A page that preloads twenty resources has effectively preloaded none of them. Pick the few that matter most for the first render, measure the effect, and remove any that do not help.