Lazy loading

What is lazy loading?

Lazy loading is a technique that delays fetching an image, video, iframe, or piece of content until it is actually about to enter the visitor's viewport, instead of downloading everything the moment a page loads. Anything below the fold, such as images near the bottom of a long article, waits until the visitor scrolls close to it before the browser requests the file. This cuts the amount of data a page transfers on first load, which speeds up rendering and reduces bandwidth use for the visitor and hosting costs for the site owner.

The idea applies well beyond images: single-page applications lazy-load entire JavaScript chunks or routes, e-commerce catalogs lazy-load product cards as a visitor scrolls through a grid, and video players lazy-load the player itself rather than shipping its full script on every page. The common thread across all these cases is deferring cost, whether that is bytes downloaded, JavaScript parsed, or a third-party connection opened, until the browser actually needs it.

‍

How lazy loading works

Modern browsers support lazy loading natively through a single HTML attribute, no JavaScript required for the basic case:

<img src="hero-bottom.jpg" loading="lazy" alt="Product showcase" width="800" height="500">

The loading="lazy" attribute tells the browser to skip downloading that image until it is close to entering the viewport. Before native support existed (and still today for finer control), sites used a JavaScript library built on the Intersection Observer API, which watches an element and fires a callback once it crosses a defined threshold near the viewport, triggering the real image or content load at that moment. That threshold is usually set a few hundred pixels before the element becomes visible, giving the browser a head start so the content is ready by the time the visitor actually scrolls to it.

‍

What can be lazy-loaded

• Images: the most common case, supported natively via loading="lazy" on the <img> tag.
• Iframes: embedded videos, maps, or widgets, also supported via the same loading="lazy" attribute on <iframe>.
• JavaScript modules or routes: code-splitting a web app so a route's code only downloads when a visitor navigates to it.
• Third-party scripts: chat widgets, review widgets, or trackers deferred until after the page's critical content has rendered.
• Web fonts and background images: non-critical typography or decorative backgrounds loaded only once the surrounding section scrolls into view.

‍

Lazy loading vs eager loading

‍

Best practices and common pitfalls

• Never lazy-load the hero image or anything visible above the fold: doing so delays the Largest Contentful Paint metric instead of improving it, since the browser has to wait to even start the request.
• Always set explicit width and height attributes on lazy-loaded images so the browser reserves the right amount of space, avoiding layout shifts once the image finally loads.
• Pair lazy loading with responsive images (srcset) so the browser also picks the right file size for the visitor's screen, rather than lazy-loading an oversized file.
• Test on a throttled connection: an aggressively lazy-loaded page can show visible blank gaps while scrolling fast if the load threshold is too close to the viewport edge.
• Do not lazy-load content that a visitor is very likely to reach within a second or two of scrolling, such as the second section of a landing page; the marginal savings rarely justify the risk of a visible flash of empty space.

‍

Why it matters for performance and SEO

Lazy loading directly reduces the total bytes downloaded on initial page load, which improves load time, Core Web Vitals scores, and mobile data usage, all of which are ranking and user-experience factors search engines weigh directly. Search engine crawlers generally handle native loading="lazy" correctly and still index the deferred images, so used properly, lazy loading improves performance without hiding content from search results; the risk only appears when it is implemented with custom JavaScript that never fires for a crawler that does not scroll the page. This is one of the rare optimizations that improves both the technical performance score and the actual experience of visitors on slower connections at the same time, with almost no trade-off when configured correctly.

‍

Lazy loading at BeBranded

We apply lazy loading systematically on image-heavy pages, portfolios, and product catalogs we build, while keeping hero visuals and above-the-fold content eager-loaded so first paint stays fast. We audit every project against Core Web Vitals thresholds before launch, and lazy loading is one of the standard levers we tune alongside image compression and CDN caching. See our website service for how we handle performance and Core Web Vitals across the sites we build.