Lazy loading delays the download of resources that aren't visible in the viewport until the visitor scrolls close to them. For images, it's as simple as adding loading="lazy" to your <img> tags. The browser handles the rest — no JavaScript library needed. On a long landing page with 15 images, lazy loading means the initial page load only downloads the 2-3 images visible above the fold.
The performance impact can be dramatic. I've seen landing pages drop from 8MB to 2MB initial page weight just by lazy-loading below-the-fold images. That's a 3-4 second improvement on mobile connections. Native browser lazy loading (the loading attribute) is supported in all modern browsers and requires zero JavaScript.
The one thing you must NOT lazy-load
Your hero image. This is the most common lazy-loading mistake on landing pages. If your LCP element is the hero image and it has loading="lazy", the browser deliberately delays downloading it until it determines the image is in the viewport — adding 100-300ms to your LCP. Your above-the-fold images should always load eagerly. Add loading="eager" (or just omit the attribute) for your hero, and loading="lazy" for everything below the fold.
Also consider lazy-loading iframes (YouTube embeds, maps, chat widgets). A single YouTube embed adds 500KB+ of resources. If it's below the fold, lazy-load it with loading="lazy" on the iframe element.