Make the likely largest image easy to discover and quick to render.
Find the actual LCP element
First measure the page. The largest contentful paint element may be text on one viewport and an image on another. If the hero image is the LCP element, place its URL in discoverable HTML and avoid hiding it behind a late JavaScript fetch or CSS background when a normal image works.
Give it the right priority
Supply a properly sized responsive source, intrinsic dimensions, and an appropriate fetch priority where supported. Do not lazy-load an image that appears immediately in the viewport. Compressing the image helps only one part of LCP; render delay and late discovery can dominate.
Check under realistic conditions
Measure cold-cache mobile loading and inspect the network waterfall. Compare transfer size, request start, decode, and final render. A faster local Wi-Fi screenshot does not prove an improvement for a user on a slower connection.
A concrete acceptance test
Measure a cold mobile load and identify the actual LCP element. Change only the hero delivery rule, then compare request start time, transferred bytes, and render delay. Run this test with a realistic asset and record the observed state, output URL, and failure reason.
Implementation check
- Measure the real LCP element at each viewport.
- Make the hero URL discoverable in HTML.
- Compare request start and render delay after the change.
Related guides
Primary reference: Official documentation.