Lazy Loading
A technique that defers loading of off-screen images until the user scrolls near them, significantly improving initial page load speed.
Lazy loading defers downloading images outside the viewport until the user scrolls near them, directly improving first-paint speed and LCP (Largest Contentful Paint) metrics.
Adding loading="lazy" to <img> tags enables native browser lazy loading. The Intersection Observer API provides finer control over loading trigger thresholds.
Images within the initial viewport (hero images, logos) should not be lazy-loaded. These require loading="eager" or fetchpriority="high" for priority loading. Combined with image optimization, lazy loading minimizes initial transfer even on image-heavy pages. Pairing with responsive images delivers appropriately sized images only when needed.