Lazy Loading Images Checker

What is lazy loading?

Lazy loading means an image is downloaded only when the visitor scrolls close to it. Add loading="lazy" to an <img> or <iframe> and the browser handles the rest, with no script. Images a visitor never scrolls to are never downloaded, which saves data and leaves the connection free for what is on screen first.

Before browsers supported this natively, sites used JavaScript libraries that kept the real address in a data-src attribute. Those still work but depend on a script running, and crawlers that do not execute it may never see the image.

What should not be lazy-loaded

The image at the top of the page. Lazy loading tells the browser to wait, and if that image is the largest thing on screen, waiting delays Largest Contentful Paint. This is one of the most common causes of a poor LCP, and it usually happens when a plugin adds loading="lazy" to every image without exception.

The hero image should load normally and can be marked fetchpriority="high". Everything below the first screen should be lazy. Every lazy image also needs width and height, so the browser reserves its space and the page does not jump when it arrives. Measure the effect with the Core Web Vitals Checker.

How to use the Lazy Loading Images Checker

1. Enter the address of the page you want to check. You can leave out https://.
2. Press Check images. The page is fetched from our servers, the way a search engine crawler would fetch it.
3. Read the findings from top to bottom: problems first, then warnings. Each one says what to change.

Common problems and how to fix them