link preload Tag
Build <link rel="preload"> with as= directive.
Link preload: the performance hint that browsers always honor
The <link rel="preload"> tag is a resource hint that tells the browser to start downloading a critical asset as soon as it parses the <head>, without waiting for the CSS or JavaScript that would normally request it. Unlike prefetch (a low-priority hint for the next navigation) or preconnect (which only opens a TCP/TLS handshake), preload actually downloads the bytes and parks them in the memory cache. Used surgically on the right assets, it shaves hundreds of milliseconds off Largest Contentful Paint (LCP); used carelessly it wastes bandwidth and triggers console warnings.
Syntax, required attributes and the famous "as" gotcha
The as attribute is mandatory and tells the browser which CSP policy to enforce, which Accept header to send, and what content-type to expect. Valid values are font, script, style, image, fetch, video, audio, document, track and worker. For fonts, the crossorigin attribute is also mandatory — fonts are always fetched with anonymous CORS, and a preload without crossorigin downloads the file twice (once for the hint, once for the actual usage). For images and modern formats, add type so the browser can skip the preload when the format is unsupported.
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/js/app.js" as="script">
<link rel="preload" href="/img/hero.avif" as="image" type="image/avif" fetchpriority="high">
<link rel="modulepreload" href="/js/main.mjs">Preload vs prefetch vs preconnect vs prerender
These four hints are often confused but solve different problems. Preload means "I will use this on the current page, start downloading now"; the browser treats it as a high-priority fetch. Prefetch means "I will probably use this on the next navigation"; the browser fetches with the lowest priority during idle time. Preconnect means "I know I will need this origin, do the DNS, TCP and TLS now"; it does not download anything, just opens the connection. Prerender (and its replacement, the Speculation Rules API) renders the entire next page in the background. Use preload for the hero image and the critical font; preconnect for third-party origins like Google Fonts or your CDN; prefetch for the most likely next page; prerender (cautiously) for sites with predictable navigation.
Modulepreload for ES modules and their imports
Regular preload with as="script" does not parse JavaScript, so any import chain inside the file still triggers a sequential download cascade. The <link rel="modulepreload"> variant tells the browser to download the module AND resolve its static imports in parallel, which is exactly what you want for modern bundleless ESM. Browsers also store the parsed module in the module map, so the eventual import statement consumes nothing but cycles.
<link rel="modulepreload" href="/js/router.mjs">
<link rel="modulepreload" href="/js/store.mjs">
<link rel="modulepreload" href="/js/components/Hero.mjs">103 Early Hints, fetchpriority and Core Web Vitals
Two recent additions amplify what preload can do. The HTTP 103 Early Hints status lets the server send Link: ...; rel=preload headers before the final 200 response, giving the browser a head start while the server is still building the page. The fetchpriority attribute (Chrome 102+) overrides the default priority: fetchpriority="high" on the LCP image typically saves 100 to 300 ms; fetchpriority="low" on below-the-fold images frees bandwidth for above-the-fold content. Use Lighthouse, WebPageTest or the Chrome Performance panel to confirm the preload is actually being honored — sometimes the browser ignores it because the resource is already discovered by the preloader scanner.
Common mistakes and the "preloaded but not used" warning
- Preloading everything — the more you preload, the less critical each preload becomes. Reserve it for the 2-4 truly blocking resources.
- Missing
crossoriginon fonts — the font downloads twice, doubling the LCP delay it was supposed to fix. - Wrong
asvalue — the browser ignores the preload silently and you waste a request. - Preloading hashed bundles whose URL changes per build without updating the HTML — every deploy issues a stale preload.
- "Preloaded but not used within a few seconds" console warning — usually means the asset is not actually needed on this page, or its real consumer was lazy-loaded and the preload fired too early.
FAQ
Should I preload every CSS and JS file? No. Only resources that block rendering and that the browser would otherwise discover late. Preloading everything inverts cause and effect — nothing gets prioritized.
How much does preload help LCP? Realistic numbers from public case studies: 100 to 300 ms on a fast 4G connection for a single critical font or hero image, sometimes 500 ms+ on slow connections.
Does preload work cross-origin? Yes, but you must specify crossorigin matching the CORS configuration of the responding server, otherwise the preload is discarded.
What size of asset benefits most? Counter-intuitively, smaller critical assets benefit the most because they finish downloading before the parser would otherwise discover them. Hero images of 50-200 KB and font subsets of 20-40 KB are the sweet spot.
Why is the browser ignoring my preload? Usually one of: wrong as, missing crossorigin, CSP blocking the origin, or the preload scanner already found the asset earlier in the HTML.
Related Tools
Handwriting Generator
Convert typed text into an image with handwriting appearance. Useful for adding a personal touch to digital work.
Resume Generator
Fill a simple printable A4 CV from a form with personal data, education and experience.
Favicon Generator
Generate a favicon from text/emoji in all common sizes (16, 32, 48, 64, 192, 512). PNG download.