Speed Low impact Medium 15–30 min

Preloading key resources (preload)

Important resources can be loaded earlier via rel="preload".

What it is

rel="preload" tells the browser to download, with high priority and in advance, a resource that will soon be needed (the main above-the-fold image, a key font, critical CSS).

Why it matters

Without preload, the browser discovers some important resources late (e.g. a font referenced only from CSS), which delays their appearance. Preload speeds this up and improves LCP.

How to do it

1Preload the LCP image (the main above-the-fold visual).
2Preload key fonts and add font-display: swap.
3Don't overdo it: preloading everything dilutes priority and hurts.

Example

Correct

<link rel="preload" href="/fonts/jakarta.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/img/hero.webp" as="image">

Conclusion

Preload is a targeted tool for a few truly key resources (the LCP image, the main font). Used judiciously it improves LCP; used across the board it hurts instead. Less is more.