Will lazy-loading hurt my SEO?

Only if you lazy-load the LCP image or critical above-the-fold content. Below-the-fold lazy-loading helps SEO by improving Core Web Vitals.

What's the difference between `loading="lazy"` and Intersection Observer?

`loading="lazy"` is native, free, and works on ` ` and ` `. Intersection Observer is JavaScript-based and required for CSS backgrounds, custom widgets, or fine-grained control over load thresholds.

Do I need a polyfill for lazy-loading?

No. Native support landed in Chrome 76, Firefox 75, and Safari 15.4. Older Safari users get the eager-loading fallback, which is fine.

How do I lazy-load a YouTube video?

Don't use a raw iframe. Use a click-to-load facade like lite-youtube-embed — it ships a static thumbnail, swaps in the real iframe on click, and saves ~800KB per embed.

Does lazy-loading work for above-the-fold images?

It loads them slightly later than eager — bad for LCP. Use `fetchpriority="high"` on above-the-fold images instead.

Free Tool

Updated 6 June 2026

Lazy Loading Checker

Find images and iframes that should be lazy-loaded. See how many requests you can defer below the fold.

By Deepak Shukla — Founder & CEO, Pearl Lemon

Enter your URL

What This Tool Checks

Images missing `loading="lazy"` below the fold
iframes loading eagerly (YouTube, maps, social embeds)
Above-the-fold images incorrectly lazy-loaded (LCP risk)
Total requests deferrable on initial load
Estimated KB savings on first paint

Why This Matters

Every below-the-fold image and iframe loaded eagerly steals bandwidth from the content the user actually wants to see. On image-heavy pages this can mean 50+ unnecessary requests blocking the LCP element.

How to Fix Issues

1.Add `loading="lazy"` to every `<img>` and `<iframe>` below the fold
2.Use `fetchpriority="high"` on the LCP image — never lazy-load it
3.Replace heavy embeds (YouTube, maps) with click-to-load facades
4.For backgrounds, use Intersection Observer to defer the CSS
5.Set explicit dimensions so lazy images don't cause CLS

Native lazy-loading is the single best one-line performance fix in the modern web. This checker scans your page for every image and iframe that could safely defer until the user scrolls, and flags the dangerous mistake of lazy-loading something above the fold.

Why `loading="lazy"` finally works

Browsers used to require JavaScript and Intersection Observer to lazy-load. As of 2020 every modern browser supports the native loading="lazy" attribute on <img> and <iframe> with zero JS, zero polyfill, and zero performance overhead. Adding it to a 50-image page can cut initial payload by 70% and bring LCP under threshold by itself.

The LCP trap

If you lazy-load the largest above-the-fold image — your hero, your product photo, your article featured image — the browser doesn't request it until layout completes. That delay shows up as a multi-second LCP regression, and Google ranks the page lower. The rule is simple: the LCP element gets fetchpriority="high" and never loading="lazy". Everything below the fold gets loading="lazy".

Embeds are the worst offenders

A YouTube embed is roughly 800KB of JavaScript and CSS that runs whether the user clicks play or not. A Google Maps iframe is 1MB+. A Twitter embed adds 200KB of CDN scripts. The loading="lazy" attribute helps, but the modern pattern is a click-to-load facade — a static thumbnail with a play button that swaps in the real embed only on click. lite-youtube-embed and similar projects deliver 99% of the experience at 1% of the cost.

Background images need Intersection Observer

CSS background-image doesn't respect loading="lazy" because it's applied via stylesheet, not markup. For below-the-fold hero sections styled with CSS backgrounds, use Intersection Observer to add the class that sets the background only when the section nears the viewport. This is the one place native lazy-loading still can't reach.

What it doesn't do

Lazy-loading is a deferral strategy, not a compression strategy. A 5MB image lazy-loaded is still 5MB when the user scrolls to it. Pair lazy-loading with image optimization (WebP/AVIF, correct dimensions, CDN delivery) to compound the win.

Methodology

We render the page in a headless browser sized to a mobile viewport, capture every <img>, <iframe>, and CSS background-image, then classify each by viewport position at first paint. Anything fully below the fold without loading="lazy" is flagged as deferrable. Anything above the fold WITH loading="lazy" is flagged as a potential LCP risk (with the hero image given an extra warning). We estimate KB savings by summing the transfer sizes of all deferrable assets. The test runs at 360×640 viewport — the mobile baseline Google uses for ranking.

Frequently Asked Questions

Monitor this continuously with LemWatch

A one-off free lazy-loading checker shows you today. LemWatch re-runs the same checks around the clock and alerts you the moment something breaks — free for up to 10 sites, no card needed.