Lazy loading checker

Lazy-loading defers downloading an image until the user scrolls near it. On a page with many images, that means the browser only fetches what's actually visible — which cuts transferred bytes, speeds up First Contentful Paint, and reduces mobile data consumption. Since 2019, browsers support this natively via <img loading="lazy"> — no JavaScript library required, ~95% browser coverage in 2026. Iframes (embedded videos, maps, widgets) also support loading="lazy" since 2020. Used correctly, lazy-loading is one of the cheapest wins for Core Web Vitals; used wrongly (on the hero image), it delays LCP and hurts the same metrics.

What this tool checks

• loading="lazy" on below-the-fold images — should be present
• Above-the-fold images — first couple of images should NOT be lazy (they'd delay LCP)
• JS-based lazy-loading — data-src / data-srcset pattern recognized and flagged as legacy (suggest migration)
• Iframes — embedded content should have loading="lazy" too
• Tracker pixels — analytics images excluded from the check

How lazy-loading works

• Native — <img src="..." loading="lazy">. The preferred approach: zero JS, supported in all major browsers since 2019-2020, reliable crawl behavior, passes HTML validation.
• JS-based (legacy) — data-src + IntersectionObserver or libraries like lazysizes/lozad.js. Pre-2019 workaround; still works but unnecessary on modern stacks.
• Above the fold rule — images visible on initial load should NOT be lazy, otherwise LCP gets delayed (the opposite of what you want).
• Iframes — same attribute: <iframe src="..." loading="lazy">. Critical for pages embedding YouTube, Google Maps, Twitter widgets — these are often heavier than images.

Good vs bad examples

Good — hero image eager (default), below-fold images lazy:

<img src="/hero.webp" alt="Hero">  <!-- above fold, eager -->
<img src="/below.webp" alt="..." loading="lazy">  <!-- below fold -->

Good — iframe lazy-loaded:

<iframe src="https://www.youtube.com/embed/..." loading="lazy"></iframe>

Bad — loading="lazy" on the LCP/hero image (delays FCP, hurts Core Web Vitals):

<img src="/hero.webp" alt="Hero" loading="lazy">

Bad — below-fold images without any lazy-loading:

<!-- 20 images on a long article, all eager -->
<img src="/img1.jpg">
<img src="/img2.jpg">
<img src="/img3.jpg">
...

Common mistakes

• loading="lazy" on the hero image — the single most-harmful lazy-loading mistake. Delays the LCP element, hurts ranking signal.
• Forgetting iframes — embedded videos and maps are often the heaviest assets on the page. Easy to add loading="lazy", big impact.
• JS-based pattern in 2026 — native support is 95%+. The data-src workaround is technically invalid HTML and adds a JS dependency for something the browser now does for free.
• Missing lazy on long-scroll pages — blog posts, gallery pages, product listings with 20+ images loaded eagerly waste user bandwidth.