Lazy loading images checker

What the lazy loading images checker does

This tool scans a webpage, counts its images, and separates them into those using the loading="lazy" attribute and those loading normally. It reports the totals for each group, giving you a quick view of how the page handles image loading.

Lazy loading defers the loading of images that are not yet in the viewport. Instead of downloading every image when the page opens, the browser fetches them as the user scrolls near them. The native HTML attribute loading="lazy" makes this easy to apply without JavaScript.

Why lazy loading matters

Images are often the heaviest part of a page. Loading all of them immediately delays the initial render, consumes bandwidth, and can hurt performance metrics such as Largest Contentful Paint for content further down the page. Deferring offscreen images lets the browser prioritize what the user actually sees first.

Lazy loading is especially valuable on long pages with many images: category listings, galleries, and article feeds. It reduces initial data transfer and can improve perceived speed, particularly on slower connections.

How to interpret the results

The tool reports how many images use lazy loading and how many load normally. It does not judge whether the distribution is correct, because the right balance depends on the page. Images above the fold usually should load normally so the main content appears quickly. Images far down the page are good candidates for lazy loading.

Be careful not to lazy load the hero image or the most important visual at the top of the page. Deferring a visible image can delay the largest contentful paint and make the page feel slower. Also watch for images inserted by scripts: if they are created after load, the attribute must be set by the script itself.

Common lazy loading mistakes

• Lazy loading above-the-fold images. This hurts perceived performance and core metrics.
• Combining native lazy loading with JavaScript libraries. Mixing approaches can cause duplicated logic or unpredictable behavior.
• Missing width and height. Without dimensions, lazy loaded images can cause layout shifts as they load.
• Assuming all images need it. Small icons and critical branding images may load faster normally.

Practical workflow

Review the page layout and identify the first screen. Confirm that images in that area load eagerly, ideally with high priority hints where appropriate. Apply lazy loading to the rest, and always set width and height attributes to reserve space. Test on a throttled connection to see the real effect, and re-check after template changes.

Limitations

The checker reports attributes present in the HTML it receives. It does not measure actual loading behavior, and images injected by client-side scripts may not be counted if they are absent from the initial response.