Make the LCP image discoverable
React chapter 149 · Web Perf · LCP · preload, fetchPriority, responsive images, lazy loading · source: Todd H. Gardner, Fundamentals of Web Performance, Part 2 slides 92–118 (LCP discovery, eager loading, and responsive images)
The problem
The hero is a 1.6 MB CSS background discovered late, then the team adds loading="lazy" to “optimize images.” The browser cannot request the LCP resource early, and a phone downloads desktop pixels it never displays.
The pattern that fixes it
Put the hero in the initial HTML when possible, keep it eager, give it fetchPriority="high", and serve a responsive candidate. Preload only when the critical image would otherwise be discovered late, and lazy-load the images below it.
In plain words
The browser cannot download an image it has not found. Help it find the one important image early, let it choose a file close to the displayed size, and postpone the images the user cannot see yet.
Tell the kitchen about the main course when the order arrives, not after the cutlery is laid. Bring one plate that fits the table; do not cook every dessert first.
Terms
- resource load delay
- Time from the first HTML byte until the browser starts fetching the LCP resource.
- fetch priority
- A hint that helps the browser choose which already-discovered request deserves bandwidth first.
- responsive image
- srcSet + sizes (or <picture>) lets the browser choose an image candidate for the layout and device.
- preload
- A <link rel="preload"> in the document head starts a known critical request before normal discovery would.
Going deeper
Discovery and priority are different levers
fetchPriority="high" cannot help before the browser discovers the image. A preload advances discovery; priority helps scheduling. An ordinary <img> in the initial HTML is already easy to discover, so measure before adding a redundant preload.
Never lazy-load the LCP candidate
loading="lazy" is valuable for offscreen gallery images because it removes them from the critical path. On the likely LCP image it deliberately delays the request. Keep the hero eager and reserve its dimensions so the image fix does not create CLS.
The preload must match the eventual request
Match the URL, destination, CORS mode, and responsive candidate. If the preload fetches one file and <img> chooses another, the browser may download both. Responsive preloads can use imagesrcset and imagesizes; verify the Network panel shows one image request.
Format is only half the image budget
AVIF or WebP can reduce bytes, but a 2800 px asset is still wasteful in a 390 px slot. Encode useful widths, describe the rendered size accurately, and inspect the chosen candidate and transferred bytes in DevTools.
Keep learning
- Previous: Field data picks the fire
- Next: Break the render-blocking chain
- Related: lazy + preload
- Related: Request waterfalls
- Related: Yield to main
- Related: CSR blank vs SSR
- Related: React Compiler
- Related: Where LCP time goes
More courses
- Jobs, linked to lessons — Browse jobs where every requirement links to the chapter that teaches it. See how ready you are, how long the gap takes to close, and which listings look stale.
- Match a job post to courses — Paste a job post. Each skill is matched to a track here and put in learning order, foundations first.
- Database in depth — How a query becomes work. Indexes, isolation, locks, and the plans that explain why a page is slow — not an ORM tour.
- System Design — Eight interview case studies, from a flash sale and Tatkal to a live final and a chat model, plus JWT in separate chapters.
- Microservices — Microservice patterns one diagram at a time: how to split a monolith, how services talk, and how data stays consistent without distributed transactions.
- Kafka — A beginner-to-senior path through event logs, reliable delivery, production operations, and disaster recovery.
- Frontend system design — How a UI is sliced when it is a product, not a page: ownership of state, cache, routes, and what happens when the network lies.
- CSS in depth — See the box, then the page. Visual chapters from the box model through Flexbox surprises, Grid, selectors, and units, then backgrounds, shapes, and visual effects, each with a playground.
- Accessibility — HTML labs first, then a full pass of WAI-ARIA 1.3: naming, every state, widget and structure roles, live regions, ariaNotify, and relationships.
- Docker — What an image is, why layers cache, and how containers find each other on a network.
- Redis — Fifteen Redis patterns, one picture each: cache, session, lock, counter, rate limiter, queue, and when Redis is the wrong tool.