Lazy Loading

Lazy loading is a performance technique that delays fetching a resource until the moment a visitor actually needs it, rather than downloading everything the instant a page opens. In practice this most often applies to images, videos, and iframes that sit far down the page. When someone lands on a long article, the browser only requests the pictures near the top. The images buried below the fold stay unloaded until the person scrolls close enough to reveal them, at which point the browser quietly fetches each one just in time.

The mechanics rely on the browser knowing where each element sits relative to the visible viewport. Modern browsers support a native attribute, loading equals lazy, that you add directly to an image or iframe tag, and the browser handles the timing automatically. Before that attribute existed, developers achieved the same effect with JavaScript, typically using the Intersection Observer API, which watches elements and fires a callback when one approaches the screen. The script then swaps a placeholder for the real source. Either way, the goal is identical: defer the network request until the resource is about to become visible, and spend the visitor's bandwidth only on what they will actually see.

The name comes straight from the everyday sense of lazy, meaning something put off until it becomes necessary, joined to loading. It sits within a broader family of deferred, or lazy, computing patterns in software where work is postponed until the result is genuinely required. The phrase became common in web development as pages grew heavier with high resolution imagery and media, making it wasteful to download every asset up front.

For a business, the practical stakes are speed and cost. A page that only loads what a visitor sees renders faster, feels lighter, and consumes less data, which matters a great deal on mobile connections. Faster initial rendering improves the metrics that search engines and analytics tools track, including the Core Web Vitals that measure loading, interactivity, and visual stability. A quicker first paint tends to reduce bounce rates and hold attention longer, and it lowers the bandwidth bill for image heavy sites like catalogs, portfolios, and publications. In short, lazy loading lets a rich, image dense design load with the responsiveness of a much lighter page.

The most common mistake is applying lazy loading too aggressively. Deferring images that appear immediately above the fold, especially a hero image or the largest visible element, can delay the very content a visitor is waiting for and actually hurt perceived speed. The main image in view should load eagerly, and only off screen assets should be deferred. Another pitfall is failing to reserve space for a deferred image, which causes the layout to jump as pictures pop in, damaging visual stability. Reserving width and height, or using an aspect ratio placeholder, prevents that shift. Lazy loading also pairs naturally with related techniques such as minification, which trims code size, and thoughtful bandwidth management, so the assets you do load arrive as small and quickly as possible. Used with judgment, it is one of the simplest ways to keep a heavy page fast.