<b>Lazy-loading too aggressively cost 40% of users a blank hero</b>

<b>Lazy-loading too aggressively cost 40% of users a blank hero</b>
Native <code>loading="lazy"</code> uses a viewport margin; set it wrong and above-the-fold images defer.
— Applied <code>lazy</code> site-wide including images 200px below the fold
— On tall mobile viewports those images were actually in-view at load: they fetched late, LCP +600ms for that cohort
— Browsers use a distance-from-viewport threshold (~1250px on fast connections, less on slow) — slow users get a smaller margin and suffer more
— Rule: never lazy-load anything in the first viewport; eager-load the LCP candidate explicitly
Takeaway: lazy-load below-fold only — first-viewport lazy = +600ms LCP.