Preloading Critical Resources

April 4, 2026

Advanced

Medium

Telling the Browser What to Fetch First

Resource hints — preload, prefetch, and preconnect — are HTML directives that let you influence the browser’s resource loading priorities. By default, the browser discovers resources as it parses HTML and CSS: it finds an image in CSS, a font referenced by a stylesheet, or a script tag in the body. Resource hints let you move critical discoveries earlier, so the browser can start fetching important files sooner.

When used correctly, preloading can measurably improve Largest Contentful Paint by ensuring the LCP resource (often a hero image or web font) starts downloading before the browser would naturally discover it. When used incorrectly, preloading wastes bandwidth and can actually hurt performance by competing with resources the browser was already prioritizing.

Preload: Fetch This Now

<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>

Preload tells the browser: “You will need this resource for the current page — start downloading it immediately at high priority.” The browser begins the download as soon as it encounters the <link> tag, even before it has parsed the CSS or JavaScript that would normally trigger the request.

The as attribute is required — it tells the browser what type of resource to expect, which determines the request priority and caching behavior. Common values: font, image, style, script, fetch.

Good candidates for preload:

LCP images — Hero images referenced in CSS background-image rules are discovered late because the browser must download and parse the CSS first. Preloading jumps the queue. See Hero Images and LCP.
Web fonts — Fonts referenced in @font-face rules are not discovered until the browser parses the stylesheet and determines that the font is actually needed. Preloading eliminates this delay. See Web Font Loading and Performance.
Critical above-the-fold resources — Any resource needed for the first render that the browser discovers late in the parsing process.

Prefetch: Fetch This for Later

<link rel="prefetch" href="/next-page-bundle.js">

Prefetch is a low-priority hint that tells the browser: “The user might navigate to another page that needs this resource — download it when you have idle time.” Prefetched resources are stored in the cache for future navigation.

Prefetch is useful for multi-page flows (like a checkout process) where you can predict the next page. It has minimal impact on current page performance because the browser only acts on it during idle time.

Preconnect: Establish the Connection Early

<link rel="preconnect" href="https://fonts.googleapis.com">

Preconnect tells the browser to perform DNS lookup, TCP handshake, and TLS negotiation with a domain before any resource from that domain is requested. This saves 100-300ms when the browser later needs to fetch a file from that domain.

Preconnect is most valuable for third-party domains that you know the page will need — font services, CDNs, analytics endpoints. It is lightweight (no data transfer) and low-risk.

When Preloading Hurts Performance

Preloading too many resources is a common mistake. Each preloaded resource competes for bandwidth with other downloads. If you preload five fonts, three images, and two scripts, you have told the browser that everything is high priority — which effectively means nothing is.

The browser’s default resource prioritization is sophisticated. It already prioritizes render-blocking CSS, visible images, and critical scripts. Preload should override this only when the browser’s default discovery is genuinely too late — typically for resources hidden behind CSS or dynamically loaded by JavaScript.

Signs of over-preloading:

Chrome DevTools console warnings: “The resource was preloaded using link preload but not used within a few seconds”
Preloaded resources that compete with the LCP resource for bandwidth, actually increasing LCP
Multiple preload tags for resources the browser would have discovered quickly on its own

Preloading in WordPress

WordPress 6.1 added automatic preloading for images that are likely to be the LCP element, using the fetchpriority="high" attribute on <img> tags. Many caching and performance plugins also add preload hints for fonts and critical CSS. Check that multiple plugins are not adding redundant preload hints for the same resources.