Offscreen Images

Why They Matter

• They slow down initial page load. Images are typically the heaviest assets on a page. Downloading twenty images at once when only three are visible wastes bandwidth that could be used for critical resources like CSS and above-the-fold content.
• They delay Largest Contentful Paint. The browser's network is shared across all downloads. Offscreen images compete with the hero image and other critical content for bandwidth, potentially delaying the moment when the most important content becomes visible.
• They waste mobile data. Users on limited data plans pay for every byte downloaded. Loading images they may never scroll to is wasting their data — and on slow connections, it makes the entire page feel sluggish.
• The fix is incredibly easy. Native lazy loading requires adding a single attribute to your image tags. The performance benefit relative to the effort involved is one of the best returns on investment in web optimization.

How to Fix It

1. Add loading="lazy" to offscreen images. The loading="lazy" attribute tells the browser to defer downloading the image until it is close to the viewport. This is native browser behavior — no JavaScript library required.
2. Do not lazy-load above-the-fold images. Your hero image, logo, and any images visible on initial load should load immediately. Adding loading="lazy" to above-the-fold images can actually delay their display and hurt performance.
3. Set width and height on lazy images. Providing explicit dimensions lets the browser reserve the correct space before the image loads, preventing layout shifts when the image finally appears.
4. Lazy-load iframes too. Embedded videos, maps, and social media widgets are often offscreen and heavy. The loading="lazy" attribute works on iframes as well, deferring their download until needed.
5. Test scrolling behavior. After implementing lazy loading, scroll through your pages to ensure images appear smoothly as you approach them. If images pop in too late or cause visible blanking, the browser's default threshold is usually handling it well, but verify on slower connections.

Common Mistakes

• Lazy-loading the hero image. The main visual element at the top of the page should load as fast as possible. Adding loading="lazy" to it delays its appearance and worsens Largest Contentful Paint.
• Forgetting width and height attributes. Without explicit dimensions, a lazy-loaded image causes layout shift when it finally loads and pushes surrounding content around. Always set width and height to reserve the space.
• Using JavaScript lazy loading when native is sufficient. A JavaScript Intersection Observer approach was necessary before native lazy loading existed. Now, loading="lazy" handles the vast majority of cases without extra code or dependencies.
• Not lazy-loading at all on long pages. Pages with many images — product listings, galleries, blog feeds — benefit enormously from lazy loading. Even a few dozen deferred images can save megabytes of initial bandwidth.