loading=lazy vs eager: the above-fold trap

loading=lazy vs eager: the above-fold trap
Native lazy-loading is one attribute. Misapplied it adds LCP.
—
lazy on below-fold images: defers the fetch, saves ~200-800KB on initial load. Correct use.
—
lazy on the LCP/hero image: browser waits to compute layout before fetching. Adds ~100-250ms to LCP.
—
Measured regression: a site lazy-loaded everything, LCP 2.1s -> 2.9s.
Rule: eager (default) for anything in the first viewport, lazy only below the fold.
Takeaway: never lazy-load the LCP element; it costs ~+200ms.