Lazy loading defers the network request for off-screen resources until the user scrolls them close to the viewport. The browser's native API is <img loading="lazy"> and <iframe loading="lazy"> -- supported in every modern browser, no JavaScript required.
The benefit: pages with many images (product grids, long-form articles) cut their initial bandwidth + parse time + LCP by skipping resources the user might never see. Sites with extensive image content typically see 30-50% reduction in initial bytes shipped with no perceptible UX difference.
Critical exception: never lazy-load the LCP element (the largest above-the-fold image). The loading="lazy" hint on the LCP image actively hurts LCP because the browser delays the request, then has to fetch + decode + paint. Set loading="eager" (or just omit the attribute) on the hero image and add fetchpriority="high" to escalate it.