How to lazy-load images
Lazy loading stops images below the fold from slowing the first view.
Why it matters
Without lazy loading, the browser downloads every image on the page at once, even ones the visitor never scrolls to. That slows the first view and wastes mobile data.
Steps
- Add loading="lazy" to images that are not visible on first load.
- Do not lazy-load the main banner image.
- Set width and height on each image so layout does not jump.
For your developer
<img src="photo.jpg" loading="lazy" width="800" height="600" alt="...">
Check it worked
In developer tools, open the Network tab filtered to images and reload. Lower images should only appear in the list as you scroll down.
Not sure if this affects your site?
Run a free scan to see exactly which of these your website needs.