Preload Critical Assets
Tell the browser about critical resources early so it fetches them in parallel with HTML parsing.
Metrics
This technique can move up to 100% of LCP's share of the Lighthouse score.
This technique does not move TBT.
This technique can move up to 33% of CLS's share of the Lighthouse score.
This technique can move up to 67% of FCP's share of the Lighthouse score.
This technique can move up to 67% of SI's share of the Lighthouse score.
This technique does not move TTFB.
Overview
<link rel="preload"> is a resource hint that instructs the browser to fetch a specific asset at high priority, early in the page load — before the HTML parser would normally discover it. Fonts declared in CSS, hero images referenced in stylesheets, and render-critical JavaScript are typically discovered late in the waterfall. Preloading them closes the gap between when the browser starts parsing and when these resources start downloading, directly accelerating First Contentful Paint and Largest Contentful Paint.
Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: TBT, TTFB.
The Problem
The browser discovers most page resources late in the waterfall. CSS is fetched after HTML; fonts inside that CSS are discovered only after the stylesheet is parsed — adding a full round-trip of latency before a single glyph can render. A hero image referenced in a CSS background-image rule is similarly invisible to the preload scanner. This cascade of late discovery means the page cannot fully render until these chains of dependent requests complete, inflating FCP and LCP by hundreds of milliseconds.
Performance Impact
LCP
100–500ms
hero images and LCP-font files arrive sooner when preloaded in the document head
CLS
Indirect
fonts that load sooner reduce the fallback-to-web-font layout shift window
FCP
100–400ms
fonts and render-critical CSS start downloading earlier, reducing text render block
SI
Moderate
earlier resource availability means the viewport fills with styled content sooner
Risk: Medium
preloading unused resources wastes bandwidth; limit to 2–4 truly critical assets per page
How it works
01
Preload fonts to eliminate late discovery
Fonts referenced inside CSS stylesheets are not discovered until the stylesheet is downloaded and parsed. A
<link rel="preload" href="https://adame.io/fonts/inter.woff2" as="font" crossorigin>tag in the<head>starts the font download immediately, in parallel with the stylesheet — removing a full waterfall step.02
Preload the LCP image
Background images and images loaded via JavaScript are invisible to the browser’s preload scanner. Use
<link rel="preload" href="https://adame.io/hero.webp" as="image" fetchpriority="high">for the above-fold hero image, and addfetchpriority="high"directly on the<img>tag itself.03
Preload render-critical CSS or JS
If your theme loads a secondary stylesheet (e.g., a Google Font CSS or a component library) that blocks rendering, preload it with
as="style". For a deferred JS bundle that must execute quickly after DOM ready, preload withas="script"to start downloading immediately while the script tag’s execution is still deferred.04
WordPress integration
Add preload hints via
wp_headaction or usewp_enqueue_stylewith the optional'preload'media argument available in WP 6.1+. For fonts, use thestyle_loader_tagfilter or add a dedicatedwp_resource_hintscallback.