The Case for Telling the Browser What Matters

When a browser loads a page, it doesn't see the whole picture at once. It parses the HTML, and requests external resources only as it discovers references to them. Stylesheets, fonts, and background images defined in CSS are found even later, only after those stylesheets have been downloaded and parsed.

You, however, already know which resources are critical. The <link rel="preload"> hint lets you use that knowledge to start essential downloads earlier than the browser's natural discovery process would. This is most effective for resources that sit at the end of the critical request chain—the prioritized sequence of fetches the browser completes before rendering. The Lighthouse "Preload key requests" audit identifies assets on the third level of this chain that are late-discovered.

How Preload Differs From Other Hints

Adding a preload hint in the document head tells the browser: fetch this now, because it is important for this page.

<link rel="preload" as="script" href="critical.js">

The browser caches what it fetches, making it available instantly when needed. It does not execute scripts or apply stylesheets during the preload itself. This makes the mechanic distinct from resource hints like preconnect and prefetch, which the browser may handle at its discretion. Preload, in contrast, is a mandatory directive.

Because modern browsers have robust resource prioritization, preload is not a tool for everything. It is a tool for the few, most critical items. Overusing it can trigger Console warnings in Chrome roughly three seconds after the load event for any unused preloads.

The Best Candidates for Preloading

CSS Dependencies

Assets referenced inside stylesheets—web fonts loaded via @font-face rules, or background images—are invisible to the browser until the CSS file is fetched and parsed. Preloading them breaks that dependency, starting their download sooner. The critical CSS technique splits styling into inlined above-the-fold rules and a separate, JavaScript-loaded file for the rest. Preloading that secondary CSS file can prevent rendering delays when users scroll.

JavaScript Chunks

Since a preload does not execute the code it fetches, it cleanly separates download time from execution time. This separation can improve metrics like Time to Interactive. The benefit is strongest when bundles are split aggressively through code splitting and only the truly critical chunks are preloaded.

Correct Implementation

The most direct implementation is a <link> tag in the <head>.

<link rel="preload" as="style" href="/css/style.css">

The as attribute is required. Its value (script, style, font, image, and others) tells the browser how to set the request priority, which headers to use, and how to check the cache. A missing or incorrect as can degrade the benefit.

Some resource types need additional attributes. Because fonts are fetched in anonymous mode, a preload for a font requires the crossorigin attribute:

<link rel="preload" as="font" crossorigin href="/fonts/my-font.woff2">

The type attribute is also useful. When included, the browser preloads the resource only if it supports that MIME type; otherwise, the hint is ignored entirely.

The Link HTTP header offers an alternative delivery mechanism:

Link: </css/style.css>; rel="preload"; as="style"

Setting the header avoids the need for the browser to parse the document before discovering the resource, which offers a small edge in some cases.

Module Bundlers

If your build pipeline generates the HTML, you need to ensure it can inject preload tags. webpack version 4.6.0 and later supports preloading directly via magic comments inside import():

import(/* webpackPreload: true */ "CriticalComponent");

Older webpack versions will need a plugin like preload-webpack-plugin.

Preload and Core Web Vitals

Preloading shifts the loading timeline, and that has consequences for the metrics that matter.

Largest Contentful Paint (LCP)

The LCP element is usually either a large image or a block of text. If a hero image or a text-heavy section relies on a web font, preloading that asset can deliver it measurably faster. For fonts, serve WOFF 2.0. Its excellent browser support means older formats like WOFF 1.0 or TTF are an unnecessary weight that will delay a text-based LCP.

Keep the number of preloads low. Prioritizing many resources effectively prioritizes none, and bandwidth contention is most visible on slower networks.

If your experience renders markup entirely with JavaScript, the browser's preload scanner cannot discover eagerly-fetched resources. Stepping in with preload hints for blocks that only become referenceable post-execution is a way to recover some of that lost discovery.

Cumulative Layout Shift (CLS)

The font-display CSS property determines how text is shown before the web font arrives, and its value dictates how preload affects layout.

  • block with a preload. The invisibility period is risky for user experience, but it eliminates font-related layout shift. If the font is crucial, pairing a short blocking strategy with a fast preload can be a deliberate compromise.
  • fallback with a preload. A short blocking period and a better compromise between control and layout stability.
  • optional without a preload. If an alternative system font is perfectly acceptable, optional shows it immediately in bad network state, caches the webfont, and uses it on the next page load without shifting layout.

Font loading is delicate. Measure what you change in the lab, but defer to field data to see what is actually happening for users.

Interaction to Next Paint (INP)

INP measures responsiveness to user input. Since most interactivity runs through JavaScript, preloading the code that powers a critical interaction can keep INP low. Preloading every chunk will backfire due to startup bandwidth contention.

Consider the user's path. If an interaction will soon require a code-split chunk—opening a form and needing its validation logic—inject a preload hint for that chunk just before the interaction begins. Focus events are a natural trigger for such a preload.

A Deliberate, Not Default, Choice

Preload is a precise instrument for shaving latency off of late-discovered resources. It is not a global speed switch. A few considered hints for high-value content, validated against real-world metrics, will outperform a broad application of the declaration.