Lazy loading

How lazy loading works

Instead of downloading every image when the page loads, lazy loading fetches them as visitors scroll. An image 3,000 pixels down the page doesn't download until the visitor scrolls near it. If they never scroll there, it never downloads—saving bandwidth and improving initial load times.

Modern browsers support native lazy loading via the loading="lazy" attribute. No JavaScript required—add the attribute to images and the browser handles everything. This simple addition can dramatically improve page speed on image-heavy pages.

Performance benefits

Lazy loading improves Largest Contentful Paint by prioritising above-the-fold content. The browser doesn't waste time downloading images visitors might never see, focusing resources on visible content first.

On mobile connections, this matters enormously. A portfolio page with 50 images might need to download 20MB without lazy loading. With lazy loading, initial load drops to 2-3MB—only the visible images plus a few ahead. Visitors see content 5-10x faster.

When not to lazy load

Never lazy load images above the fold. The hero image needs to load immediately—it's likely your LCP element. Lazy loading it delays visibility and hurts performance metrics.

Similarly, avoid lazy loading the first few images on any page. Browsers need time to detect scrolling and fetch images. Eagerly loading the first 2-3 images prevents visible loading spinners as users begin scrolling.

SEO considerations

Search engines handle native lazy loading well—they know to load all images during crawling. Older JavaScript-based lazy loading techniques sometimes prevented indexing of lazy-loaded images. Stick with the native browser implementation.

Implementation in Fernside sites

We apply lazy loading strategically: hero and immediately visible images load eagerly, everything below the fold loads lazily. Combined with image optimisation, this delivers fast initial loads and smooth scrolling experiences.