How to Lazy Load Images for Faster Page Load Times

When a visitor loads a web page, the browser traditionally downloads all the images on the page — even images far below the fold that the user may never scroll to see. On image-heavy pages such as product catalogues, photo galleries, or long blog posts, this can mean downloading megabytes of data before the user sees anything.

Lazy loading is the practice of deferring the download of off-screen images until the user scrolls close to them. It reduces the amount of data transferred on initial page load, speeds up the time before the page becomes usable, and reduces unnecessary bandwidth consumption for users who do not scroll far. Modern browsers now support lazy loading natively, making it straightforward to implement.

How to Implement Lazy Loading

The simplest way to lazy load images in modern browsers is to add the loading="lazy" attribute to your img tags. This single attribute tells the browser to defer loading the image until it comes within a threshold distance of the viewport. No JavaScript library is required, and browser support is excellent across Chrome, Firefox, Edge, and Safari.

For background images set in CSS, native lazy loading does not apply. You can use the Intersection Observer API in JavaScript to detect when an element approaches the viewport and swap a placeholder for the real image at that point. Many modern image libraries and CMS plugins handle this automatically. WordPress has included native lazy loading by default since version 5.5.

When Not to Use Lazy Loading

Lazy loading should never be applied to above-the-fold images — those visible without scrolling when the page first loads. This is a common mistake that can significantly worsen Largest Contentful Paint scores. The LCP element, which is usually a hero image or banner, should load as fast as possible. Adding loading="lazy" to it instructs the browser to deprioritise it, doing the opposite of what you want.

As a rule of thumb, images in the first two screenful heights of a page should not be lazy loaded. Below that threshold, lazy loading is beneficial. Use the loading="eager" attribute on critical above-the-fold images, and combine it with a fetchpriority="high" attribute on the LCP image to maximise loading priority.

Combining Lazy Loading With Other Image Optimisations

Lazy loading reduces the number of images downloaded upfront but does not reduce the file size of images when they do download. Combine lazy loading with image compression, appropriate dimensions for the display size, and modern formats such as WebP or AVIF to get the full benefit. A lazy-loaded image that is still 2MB will cause a noticeable delay when it enters the viewport.

Always include explicit width and height attributes on lazy-loaded images. Without dimensions, the browser cannot reserve space for the image before it loads, which can cause layout shifts — increasing your Cumulative Layout Shift score. With correct dimensions, the browser sets aside the right amount of space and the image slots in without moving surrounding content.