preloads

Preloads are a web performance technique that informs the browser to begin fetching a resource before it is actually required for rendering or interaction. The goal is to reduce latency by overlapping network fetches with parsing and execution, so that when the resource is needed it is already available in cache. The most common implementation is a link element in the head of the document with rel="preload". A preload declares high priority for an upcoming resource and uses the as attribute to indicate the resource type, such as as="font", as="style", as="script", or as="image". If the resource requires credentials or a cross-origin request, the crossorigin attribute may be used.

Typical targets are fonts, critical CSS, important JavaScript modules, and hero images that contribute to above-the-fold content. Preloading fonts with as="font" and crossOrigin can prevent late font swaps, while preloading a stylesheet with as="style" can move a render-blocking request earlier. However, preload should be used selectively; overusing it can waste bandwidth or block parallel fetches, potentially delaying other resources.

Preloads are one of several resource hints. Prefetch (rel="prefetch") fetches resources with lower priority to be used in the future, preconnect establishes early connections, and prerender can render a whole page in the background. These mechanisms differ in timing, priority, and effect on user experience, so they should be chosen to match the page's workload.

Browser support is broad on modern engines, but behavior may vary by platform. When implemented, preloads should be tested with performance tooling such as Lighthouse or the browser's devtools to verify improvements and avoid regressions. Best practices include measuring actual impact, keeping the number of preloads small, and placing preload hints in the document head.