Say your page has 20 images, but a visitor only sees the first 2 right away. Why should the browser download all 20 at once? That's exactly the problem lazy loading solves.
What happens without lazy loading?
The browser downloads every image as soon as the page loads. Including the photos at the bottom that the visitor may never see. The result:
- Slow initial loading (the visitor waits for everything)
- Wasted mobile data (images that were never seen)
- A poor PageSpeed score
What does lazy loading do?
With lazy loading, the browser only loads the images that are visible (or about to come into view). As soon as the visitor scrolls down, the next images load 'just in time'.
Benefits:
- Faster initial loading, because there's less to download
- Less data usage for mobile visitors
- Better PageSpeed and LCP scores
- If a visitor stops scrolling halfway: even less data wasted
When NOT to lazy load?
Important: NEVER lazy load the hero image at the top of the page. It needs to load immediately, because it's usually your LCP element (Largest Contentful Paint, the largest visible element on screen). If you lazy load it, your LCP score actually gets worse.
Rule of thumb: the first 1-2 images 'eager' (straight away), everything else 'lazy'.
How do you turn on lazy loading?
Since 2020 there's a native HTML attribute: loading="lazy". Your web developer adds it to the image tag:
<img src="foto.jpg" alt="..." loading="lazy">
In WordPress: since version 5.5 (2020), lazy loading is on by default. New images automatically get the loading="lazy" attribute. For sites from before 2020, you can use a plugin such as a3 Lazy Load or WP Rocket.
How do you check whether it's on?
Right-click an image on your page (not the hero image), click 'inspect', and look in the code to see whether that img tag has loading="lazy". If so: perfect. If not: get in touch with your web developer.