Lazy Loading.

Lazy loading is a performance technique that defers resources not needed straight away. Instead of downloading every image and video at once on page load, including the ones far down the page that may never be seen at all, the browser fetches them only as the user scrolls close to them. That cuts the initial load considerably, and the effect grows with the length of the page. On a long article carrying forty images, the difference is anything but subtle.

The benefit is twofold. The page becomes interactive sooner, because less data has to be transferred and processed at the start, and no bandwidth is wasted on content the visitor never looks at. On image-heavy pages, and for mobile users on limited connections, lazy loading noticeably improves perceived speed, which is the part of performance people actually judge you on. It also lowers the load on the server, which matters on modest hosting plans.

Technically, lazy loading for images and iframes can now be implemented natively with the attribute loading=«lazy», with no JavaScript at all. Drawing the line correctly is what matters: content above the fold, and the LCP image in particular, must NOT be lazy-loaded, because that delays the Largest Contentful Paint and worsens your Core Web Vitals. Lazy loading belongs on resources below the fold, and the exception for the first visible image has to be made deliberately.

An example. A travel blog with long, image-rich articles loads only the first, immediately visible images directly and defers everything else. The article appears quickly, and images further down are fetched as the reader approaches them, so loading time and data consumption both drop without the user noticing any downside. Frameworks that handle this automatically usually get the boundary right, but it is worth verifying once for the hero image on your most important page.