Web performance
How to optimize an LCP hero image without making it look worse
The LCP image is often blamed for every slow hero, but file size is only one part of the delay. The browser must receive the document, discover the right resource, assign enough priority, download it, decode it, and paint it inside a stable layout.
Break LCP into the delivery path
Measure time to first byte, resource load delay, resource load duration, and render delay. This shows whether the fix belongs in the server, HTML discovery, request priority, image bytes, CSS, or main-thread work. Compressing an already-small image cannot solve a late discovery problem.
1. Identify the real LCP element and delay
Use field attribution when available, then reproduce the representative page in a lab trace. Confirm which element becomes LCP at the relevant viewport; desktop and mobile may select different images or even text. Review the request waterfall and the moment the browser discovers the resource.
- Measure several comparable runs and keep cache, device, network, consent, and viewport conditions explicit.
- Separate server delay, discovery delay, download time, and render delay before choosing a remedy.
- Check the real responsive candidate selected by the browser rather than assuming the src URL is downloaded.
2. Make the resource discoverable and important
Put the image in the initial HTML with a normal src or srcset whenever possible. Do not lazy-load an in-viewport LCP image. Use fetchpriority=high only for the likely LCP candidate, and preload when the resource would otherwise be hidden behind CSS, JavaScript, or a delayed client-rendering boundary.
- Avoid data-src patterns or script-inserted hero markup that prevents the preload scanner from discovering the image.
- Do not preload every responsive candidate or every hero asset; excessive high-priority requests compete with CSS, fonts, and each other.
- When preloading a responsive image, keep imagesrcset, imagesizes, type, and cross-origin behavior consistent with the eventual element.
3. Deliver the right pixels and bytes
Use srcset and sizes so small screens do not download desktop dimensions. Choose AVIF or WebP when supported by the visual requirements and delivery stack, but compare real output: format names do not guarantee better quality per byte. Set intrinsic width and height to preserve the layout while the image loads.
- Crop for the component’s aspect ratio instead of sending a large source and hiding most of it with CSS.
- Tune compression against visual inspection at common high-density displays, not only an arbitrary quality number.
- Cache immutable variants for a long time and change their fingerprint when content changes.
4. Remove the work that delays the paint
A completed image request can still wait behind render-blocking CSS, fonts, animation setup, overlays, or long JavaScript tasks. Keep the hero’s critical styling small and available, avoid hiding the final element until hydration, and verify that consent or personalization code does not replace it after load.
- Inspect the interval between image download completion and the LCP timestamp for avoidable render delay.
- Prefer a server-rendered stable hero over a carousel or animation that changes the candidate during startup.
- Retest visual quality, CLS, accessibility, conversion behavior, and field LCP after deployment.
LCP image optimization checklist
- 01 Identify the actual mobile and desktop LCP elements and their four timing subparts.
- 02 Place the likely LCP image in initial HTML and remove lazy loading from it.
- 03 Use fetchpriority or preload selectively only when the trace shows a discovery or priority delay.
- 04 Serve responsive dimensions, an appropriate encoding, intrinsic size, and a stable aspect ratio.
- 05 Reduce server, CSS, font, hydration, and main-thread delays that postpone the final paint.
- 06 Compare multiple lab runs, a physical device, and later field data while preserving visual and conversion quality.
Optimize the critical path, not merely the file
The winning change lets the browser discover the correct hero early, gives it proportional priority, transfers no more pixels than needed, and paints it without waiting for unnecessary work. Use the trace to find the longest avoidable part, then prove the result beyond one Lighthouse run.
Primary references
Continue with a related guide
These checks influence one another. Follow the next guide to verify the surrounding signals, not only one tag or score.