What is Preloading for Assets?

What is preloading for assets?

Preloading means telling the browser, with <link rel="preload"> or a matching Link header, that the current page will need a specific file soon. The browser then fetches it early and at higher priority instead of waiting to discover it. It suits resources found late, such as a font named in CSS or a hero image set as a CSS background.

How preload works

A preload needs an href and an as value that says what the file is: fetch, font, image, script, style or track. The as value lets the browser set the right priority and match the preload to the later request. A preloaded script is downloaded and cached but not executed. For JavaScript modules, use modulepreload instead.

• Fonts and fetch requests need crossorigin, even when the file is on your own origin. Fonts always use anonymous CORS, so without it the preload is not reused and the file downloads twice.
• type lets the browser skip a format it does not support, for example type="font/woff2".
• media makes a preload conditional, so a narrow screen can preload a different image than a wide one.

Example

A landing page shows a hero image set in CSS and a web font. The browser only learns about both after it downloads and parses the stylesheet, which delays the Largest Contentful Paint. Two lines in the <head> move that discovery to the start:

<link rel="preload" href="/hero.webp" as="image" type="image/webp" fetchpriority="high">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

Preload, prefetch and preconnect

These hints solve different problems. Preload is for something the current page needs soon. Prefetch is for something a later navigation may need, at low priority. Preconnect only opens the connection to another origin, which helps with the network connections a page makes to third parties. Do not use preload for next-page files, and do not use prefetch for anything the page needs now.

Common mistakes

• Preloading too much. Preloads compete with each other and with files the browser would fetch first anyway. Keep to the one or two that gate rendering.
• Preloading several formats of one image. MDN notes that each preloaded variant is downloaded even though only one is used. Preload the format most visitors get.
• A wrong as value or a missing crossorigin. The preload is then not matched to the real request, and the file is fetched twice.
• Preloading a resource the page never uses. It spends bandwidth for nothing and can delay files that matter.
• Preloading something that is meant to be lazy. It cancels the gain of lazy loading. Preload only what is visible on first paint.

How it relates to performance testing and monitoring

A preload changes what the browser does, so measure it. Compare the waterfall and LCP with and without the hint, on a throttled connection as well as a fast one. The free Core Web Vitals checker shows whether real Chrome users already pass LCP, INP and CLS, and LoadFocus page speed monitoring runs scheduled Lighthouse audits from 25 cloud regions, so you can see whether a change helped everywhere or only near your server. The wider list of frontend fixes is in the 10-step guide to improving website speed.

FAQ: preloading for assets

What is the difference between preload and prefetch?

Preload fetches a file the current page needs soon, at higher priority. Prefetch fetches a file a later page may need, at low priority.

Which assets should I preload?

Only the few that are found late and block the first render: the LCP image, a key web font, or a critical script or stylesheet. Check in a waterfall that each one really is discovered late.

Why does my font download twice?

Font preloads must carry the crossorigin attribute, even for same-origin files. Without it the preloaded copy is not reused for the real font request.

Does preload execute my script?

No. A preloaded script is downloaded and cached, then runs only when the page includes it with a script tag.

Can preload slow a page down?

Yes. Too many preloads compete for bandwidth with files that matter more. Measure LCP before and after each one.