Connection failed. Please try again.

Skip to content
SEO Tools
Help and documentation
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

  1. 1Preload the LCP image (the main above-the-fold visual).
  2. 2Preload key fonts and add font-display: swap.
  3. 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.

Related topics