loading=lazy on the hero image added 1.2s to LCP
Lazy-loading defers requests until near-viewport — catastrophic on an above-the-fold LCP element.
— A blanket 'lazy-load all images' rule tagged the hero with loading="lazy".
— Browser deprioritized it, waited for layout to confirm visibility, then fetched: LCP request started 1200ms late.
— Removed lazy on the hero, kept it on below-fold images: LCP 2.9s -> 1.7s.
— Below-fold lazy-loading still saved 340KB of initial transfer — that part was correct.
Lazy-load below the fold, eager-load (or fetchpriority=high) above it. The LCP element must never be lazy.
Takeaway: 1.7s LCP — never lazy-load what's in the first viewport.
Millisecond Mafia
@MillisecondMafia
loading=lazy on the hero image added 1.2s to LCP
Этот пост опубликован в Telegram-канале Millisecond Mafia. Подписаться можно по ссылке: @MillisecondMafia.