What is lazy loading for images?

Lazy loading tells the browser not to download images further down the page until the visitor scrolls towards them. The top of the page appears sooner, visitors who never scroll never download the rest, and a long page with thirty photos costs no more to open than a short one.

Why it matters

Browsers normally fetch every image on a page at once, including the twenty in a gallery at the bottom that most visitors will never reach. Those downloads compete with the hero image and the text at the top, so the part of the page people are actually looking at arrives later. On mobile data it also wastes the visitor's allowance on pictures they never see.

How it works

It is a single attribute on the image tag: loading="lazy". The browser then waits until the image is near the visible part of the page before requesting it. No script is needed and every modern browser supports it.

One caution

Do not lazy load the images at the top of the page. The hero image and the logo should load immediately, because delaying them makes the page feel slower, not faster. Google's tools specifically flag a lazy-loaded hero image as a problem.

How to check

Our check counts the images on your home page and how many are marked lazy. In a browser's developer tools, look at the image tags for the loading attribute.

How to fix it

WordPress has added loading="lazy" to images automatically since 2020 and skips the first few on each page. If your theme or page builder writes its own image tags it may not, and a performance plugin can add it. On other platforms it is usually a setting, or a one-word addition to the template.

Not sure how your own site does on this? Run the free check: it takes about twenty seconds and reports on this and thirty other things.

Check my website

More guides