Skip to main content

Preload Resources

Preloading is a way to tell the browser "you will need this soon" so it can start the download earlier than it normally would. Used well, preload reduces late-discovery delays for the LCP element and key fonts. Used poorly, it competes with more important requests and slows the page down.

What Preload Does​

When the browser sees a preload hint, it starts fetching that resource early:

preload-font.html
<link
  rel="preload"
  href="/fonts/brand-sans.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

What to Preload (Usually)​

Preload is best for a very small set of assets:

  • The LCP image (hero image) when it is discovered late
  • One font file used for above-the-fold text (ideally self-hosted WOFF2)
  • Occasionally a small, critical CSS file in setups that split CSS
caution

Preloading large lists of assets is a common mistake. Start with 1-2 preloads, measure, and only add more if you can prove benefit.

How to Pick Candidates​

  1. Identify the LCP element in PageSpeed Insights (or DevTools Performance).
  2. Open DevTools -> Network and reload with cache disabled.
  3. If the LCP image/font is requested late (after CSS discovery or late JS), consider a preload.
  4. Re-test and confirm the resource moves earlier in the waterfall.

Implementing in Perfmatters​

Perfmatters location:

WP Admin -> Perfmatters -> Assets -> Preloading

Guidelines:

  • Prefer self-hosted fonts.
  • Use crossorigin for fonts when required.
  • Avoid preloading assets that are already preloaded by your theme/cache plugin.

Manual Examples​

Preload LCP image:

preload-hero-image.html
<link rel="preload" as="image" href="/images/hero.webp" />

Preload a self-hosted font:

preload-font-woff2.html
<link rel="preload" as="font" href="/fonts/inter.woff2" type="font/woff2" crossorigin />

Common Mistakes​

MistakeWhy It HurtsFix
Preloading too many filesCompetes with critical requestsKeep the list very small
Preloading fonts that are not used above the foldWasted bandwidthPreload only fonts that affect first render
Missing crossorigin on font preloadFetch may be duplicated or blockedAdd crossorigin when needed
Preloading an asset that is already inlined/preloadedRedundant workInspect the <head> output and Network waterfall

Quick Validation Checklist​

  • The preloaded resource appears earlier in the waterfall
  • No duplicate downloads of the same font/image
  • LCP element timing improves (or at least does not regress)
  • No new CLS issues introduced by font swaps

What's Next​