Preload LCP Image
Hint the browser to fetch the hero image early — before it discovers it in CSS or late markup.
Metrics
This technique can move up to 100% of LCP's share of the Lighthouse score.
This technique does not move TBT.
This technique does not move CLS.
This technique can move up to 67% of FCP's share of the Lighthouse score.
This technique can move up to 33% of SI's share of the Lighthouse score.
This technique does not move TTFB.
Each ring is a metric this technique moves.
Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: TBT, CLS, TTFB.
The Problem
The browser’s preload scanner reads ahead in the HTML stream to discover resources early, but it cannot parse CSS. Any image referenced only in CSS (background-image, gradient, content) is invisible to the scanner until the stylesheet downloads and parses. On a page with 50–100 KB of render-blocking CSS this delay can exceed 600 ms on a 4G connection — entirely wasted time during which the LCP image has not yet started downloading.
Performance Impact
LCP
300–900ms
image fetch starts at navigation start rather than after CSS parse
FCP
100–400ms
if the preloaded image is also the first contentful element
SI
LCP image is already in flight before the parser reaches it; hero content paints sooner, advancing the visual completion curve
Risk: Low
over-preloading unrelated resources can hurt bandwidth; keep to 1–2 resources
How it works
01
Identify the LCP element
Run Lighthouse or open Chrome DevTools → Performance, record a page load, and look for the LCP marker. The LCP element is highlighted in the filmstrip. Note whether it is an
<img>, a CSS background, or a text node.02
Add a preload link in
Place
<link rel="preload" as="image">as early as possible in<head>— ideally in the first 1 KB of HTML so the preload scanner finds it on the first TCP packet. Usefetchpriority="high"to boost it above other preloads.03
Include srcset for responsive images
If the image has responsive variants, add
imagesrcsetandimagesizesattributes to the preload tag. The browser selects and preloads the same variant it will later display, avoiding a wasted fetch.04
Remove fetchpriority="high" from other images
Only the LCP image should have high fetch priority. Setting it on multiple images competes for bandwidth. All other above-fold images should default to
loading="eager"without an explicit priority boost.
Limitations
- Preloading the wrong image (not the actual LCP element) wastes bandwidth and can delay the real LCP by competing for bandwidth.
- Over-preloading — more than 2–3 resources — congests the connection during the critical load window and can hurt LCP rather than help it.
- If the LCP element changes per device (different hero on mobile vs desktop), use media queries on the preload link or serve page-specific markup.
Common Mistakes
Preloading the LCP image but leaving fetchpriority=”high” on other images
Multiple high-priority resources compete for the same bandwidth. Audit all tags above the fold and remove fetchpriority=”high” from everything except the LCP candidate.
Adding the preload tag at the bottom of or after stylesheets
The preload tag must appear before render-blocking stylesheets to have any benefit. The browser processes sequentially — a preload placed after a large stylesheet does not fire until the stylesheet is requested.
Need help applying this to your site?
Targeted fixes, not guesswork. We identify which techniques move the needle for your specific WordPress stack.
Start an Engagement