Back to glossary

Term

Preload / Preconnect / DNS-Prefetch

Resource hints in the HTML head that tell the browser to fetch resources earlier, set up connections in advance, or accelerate DNS lookups.

Preload / Preconnect / DNS-Prefetch — explained in more detail

Three related <link rel="…"> directives with different levels of intervention: dns-prefetch only resolves a domain’s DNS name in advance (cheapest variant). preconnect goes one step further and additionally establishes a TCP plus TLS connection. preload fetches a concrete resource (font, image, stylesheet) in parallel with the parser, before the browser would discover it on its own.

The effect: critical resources such as web fonts or the LCP image are available earlier, so rendering doesn’t have to wait for the slower discovery path.

Example / practical use

<link rel="preload" href="/hero.avif" as="image" fetchpriority="high"> in the head ensures the LCP image starts in parallel with the HTML download — a typical 200–600 ms LCP improvement.

Preloadprefetch: preload is for resources of this page (high priority); prefetch (rel="prefetch") is for resources of future navigations (low priority). Using preload everywhere crowds out other important requests and worsens LCP.

Entdecke mehr