Lazy Loading
Lazy loading is a technique that delays the loading of non-critical resources, like images below the fold, until they are actually needed, improving initial page load speed.
Lazy loading is a performance optimization strategy that defers the loading of resources until they're needed. Instead of loading every image, video, and script when a page first opens, lazy loading only loads the resources visible in the initial viewport and fetches the rest as the user scrolls down. The most common application is image lazy loading.
Without lazy loading, the browser downloads all 50 images immediately, wasting bandwidth and slowing down the initial render. With lazy loading, only the visible images load first, and the rest load as the user scrolls to them. Modern browsers natively support lazy loading with the loading="lazy" attribute on img and iframe elements.
In practice
- A photography portfolio with 200 images per page reduced initial load time from 12 seconds to 1.8 seconds by lazy loading all images below the first three rows
- An e-commerce category page with 60 product images implemented native lazy loading, reducing initial page weight from 8MB to 800KB
- A news site lazy loads embedded YouTube videos, replacing them with lightweight thumbnails until the user clicks to play, saving 1.5MB of JavaScript per video
- A long-form article page lazy loads related article widgets and comment sections at the bottom, prioritizing the article content for the fastest possible initial render
Not sure how this applies to you?
A senior engineer walks your site, your search presence and the way enquiries reach you, then writes down the three things worth fixing first. You keep the document either way.