Lazy Loading

Lazy loading is a technique that defers loading images, videos, or content sections until they are about to become visible in the viewport — improving initial page load performance.

How lazy loading works

Without lazy loading, a browser downloads every image, video, and resource on a page as soon as the HTML is parsed — even if those resources are far below the fold and may never be seen. On a long page with dozens of images, this wastes bandwidth and delays the time until the page becomes interactive.

Lazy loading changes this behavior by deferring resource loading until the element is near the viewport. The two most common implementations are:

Native lazy loading uses the loading="lazy" attribute on <img> and <iframe> elements. The browser handles the timing internally — it begins fetching the resource when it calculates that the element is approaching the visible area. No JavaScript is required.

Intersection Observer API provides programmatic control. A JavaScript observer watches target elements and fires a callback when they enter or approach the viewport. The callback then sets the actual src attribute (replacing a placeholder or data attribute), triggering the download. This approach allows custom thresholds, animation triggers, and more granular control over when loading begins.

Both approaches achieve the same goal: the page loads faster because only above-the-fold content is fetched immediately, and remaining resources load on demand as the user scrolls.

Lazy loading and screenshots

Lazy loading creates a specific challenge for screenshot capture. When a tool requests a full-page screenshot, it typically renders the page at the top of the viewport and captures the entire document height in a single pass. Lazy-loaded elements below the fold have not been triggered, so they appear as empty containers, placeholder images, or low-resolution thumbnails.

The solution is to scroll the page programmatically before capturing. A headless browser script can scroll from top to bottom in increments, pausing at each step to let the Intersection Observer callbacks fire and images load. After reaching the bottom, the script scrolls back to the top and captures the now-fully-loaded page.

Some screenshot tools handle this automatically — detecting lazy-loaded elements and scrolling through the page as part of the capture pipeline. This produces clean full-page screenshots without manual intervention.

Detecting lazy-loaded content

Identifying whether a page uses lazy loading helps you decide how to capture it. Look for these indicators:

• loading="lazy" attributes on <img> and <iframe> tags — the native browser implementation.
• data-src or data-lazy attributes — a common pattern where the actual image URL is stored in a data attribute and swapped into src by JavaScript when the element enters the viewport.
• Placeholder images — small, blurred, or solid-color images that are replaced with the full image on scroll.
• Intersection Observer usage — check the page's JavaScript for IntersectionObserver instances watching image or content elements.
• Framework-specific components — React's lazy(), Next.js Image component, and similar framework utilities implement lazy loading by default.

Common mistakes

• Not scrolling before capturing. The most common screenshot issue with lazy-loaded pages. If the capture tool does not scroll through the page first, below-the-fold images will be missing from the output.
• Setting the loading threshold too high. If lazy loading triggers only when an element is already visible, users see a flash of empty space before the image appears. Set the threshold to begin loading slightly before the element enters the viewport.
• Lazy loading above-the-fold content. Images and content visible on initial page load should never be lazy loaded — it delays what users see first and hurts Largest Contentful Paint scores. Only defer resources below the fold.
• Forgetting fallbacks for JavaScript-disabled environments. If lazy loading relies entirely on JavaScript, users and crawlers with JavaScript disabled will see no images at all. Use <noscript> fallbacks or native loading="lazy" as a baseline.