Lazy Loading Images: A Complete Guide for Website Owners
Lazy loading defers off-screen images so the browser only loads what visitors actually see. Here is how it works and how to implement it correctly.
What is lazy loading?
Lazy loading is a technique that defers the loading of images (and other resources) until they are needed — specifically, until they are about to enter the visitor's viewport as they scroll.
Without lazy loading, a browser downloading a long page fetches every image immediately, even those at the bottom that the visitor may never scroll to. This wastes bandwidth and slows the initial page load.
How to enable lazy loading
For most sites, enabling lazy loading requires a single HTML attribute:
```html
```
The loading="lazy" attribute is supported by all modern browsers and requires no JavaScript.
The critical exception: above-the-fold images
Never apply lazy loading to images that are visible when the page first loads — your hero image, logo, or any large above-the-fold element. These are exactly the images the browser needs to render immediately.
Lazy loading an above-the-fold image is one of the most common causes of a poor Largest Contentful Paint (LCP) score. The browser defers loading the most important image on the page, delaying LCP by 1–3 seconds.
Rule: Apply loading="lazy" to images that are below the fold. Apply fetchpriority="high" to your hero or LCP image instead.
Platform-specific implementation
WordPress: The browser handles lazy loading natively for images added through the media library. WP 5.5+ adds loading="lazy" automatically. For images in page builders, check that the builder does not override this.
Shopify: Dawn and most modern Shopify themes implement lazy loading by default. If you are on an older theme, check your theme's image rendering snippets.
Squarespace and Wix: Both platforms handle lazy loading automatically. No action needed.
Custom sites: Add loading="lazy" to every
Should you lazy load background images?
Native lazy loading only works on