Image Lazy Loading Checker
Check which images defer loading, whether the first one should not, and which reserve no space.
About this tool
Lists every image on a page with its loading attribute and its declared dimensions, and flags the two mistakes that actually cost something.
**Lazy-loading the first image.** The image at the top of a page is usually the element that decides Largest Contentful Paint. Marking it `loading="lazy"` tells the browser not to even begin the request until layout has run, which reliably makes the score worse. Applying lazy loading site-wide with a plugin is how this happens, and it happens constantly.
**Images with no width and height.** Without them the browser reserves no space, so the text below jumps down when the image arrives. That is a layout shift, it is measured, and the fix is two attributes.
The two combine badly: a lazy-loaded image with no dimensions shifts the page at the moment the reader has started reading.
Common questions
Should I lazy load every image?
No. Everything below the fold, yes. The first image — the one visible without scrolling — should load eagerly, because it is usually what Largest Contentful Paint measures and deferring it makes that measurement worse.
What should the first image use instead?
Either no loading attribute, or loading="eager". Adding fetchpriority="high" tells the browser it matters more than the other images, which helps on pages with many.
Why do width and height matter if my CSS resizes the image?
Because the browser uses the ratio of the two attributes to reserve space before the file arrives. CSS can still resize it afterwards — modern browsers combine the two correctly. Without them there is nothing to reserve.
How does this decide which images are above the fold?
It does not know. It treats the first few images in the document as likely candidates, which is a good guess and sometimes wrong — a header logo may come first in the source and not be the largest element. Check the ones it flags.