Lazy Loading Checker: Audit Image loading="lazy" on Any Page

Paste any URL and RankNibbler counts every image on the page, showing how many use native lazy loading vs. how many load eagerly. Identify pages wasting bandwidth loading below-the-fold images and tanking your Core Web Vitals scores. Free, instant, no signup.

Check a page now →

What Is Lazy Loading?

Lazy loading is a browser feature that defers loading an image until the user scrolls close enough that it is about to appear on screen. Images with loading="lazy" are skipped during the initial page load, reducing the number of HTTP requests, the amount of bandwidth used, and the time until the page becomes interactive. When the user scrolls, the browser loads each image just in time.

Native lazy loading was added to Chrome in 2019 and is now supported in every modern browser — no JavaScript library required. A single HTML attribute does the job:

<img src="photo.jpg"
     width="1200"
     height="800"
     alt="Descriptive text"
     loading="lazy">

Why Lazy Loading Matters for SEO

Faster Largest Contentful Paint

LCP is one of the three Core Web Vitals and a direct Google ranking signal. It measures when the largest above-the-fold element finishes loading. Every below-the-fold image the browser downloads during initial load competes with the above-the-fold content for bandwidth. Lazy loading removes that competition, so LCP happens sooner.

Reduced Total Blocking Time

Loading dozens of images simultaneously uses bandwidth AND main-thread time to decode them. Lazy loading reduces both, which improves Total Blocking Time and Interaction to Next Paint — two more Core Web Vitals that feed ranking.

Better Mobile Performance

Mobile connections are slower and mobile devices are more CPU-constrained. Lazy loading is more impactful on mobile because the bandwidth and processing savings are bigger. Given mobile-first indexing, any mobile-performance win is an SEO win.

Bandwidth Savings

Many users do not scroll to the end of a page. If your page has 30 images and the average user sees 10, lazy loading saves 67% of image bandwidth. That directly benefits users on metered connections and reduces server costs.

Lazy Loading Best Practices

Do NOT Lazy-Load Above-the-Fold Images

Hero images, logos, and anything visible before the user scrolls must load eagerly. Lazy-loading above-the-fold images delays LCP — exactly the opposite of what you want. Use loading="eager" (or omit the attribute) for the hero image specifically.

Combine With Explicit Dimensions

Lazy-loaded images MUST have width and height attributes (or CSS aspect-ratio). Otherwise the page layout shifts when each image eventually loads — causing Cumulative Layout Shift problems. Use the image dimensions checker to verify.

Use fetchpriority="high" on the LCP Image

In addition to loading="eager", hint the browser that this is your most important image:

<img src="hero.jpg"
     width="1920"
     height="800"
     alt="Hero"
     fetchpriority="high">

Lazy-Load Iframes Too

The loading="lazy" attribute works on <iframe> tags as well. Embedded YouTube videos, Google Maps, and social media widgets are often the heaviest resources on a page. Lazy-loading them is a massive speed win.

Don't Lazy-Load Everything Indiscriminately

Lazy loading has a small cost: each image requires a load event after scroll. For small decorative icons or images that appear immediately, the overhead can exceed the saving. Reserve lazy loading for content images below the fold.

Common Lazy Loading Mistakes

Missing on Below-the-Fold Images

The most common issue: developers remember lazy loading on some images but forget on others. CMS image fields often don't apply the attribute by default. Audit every page template.

Applied to the LCP Image

A hero image with loading="lazy" delays LCP by 100-500ms on slow connections. Fix: remove the attribute from above-the-fold images, add fetchpriority="high" instead.

JavaScript Lazy-Loading Libraries Instead of Native

Old sites still include lazysizes.js or similar libraries. Native lazy loading is better: zero JS cost, standardised browser behaviour, works without JS enabled. Remove the library and use the loading attribute.

Lazy Loading Without Placeholders

If images have no explicit dimensions, lazy loading causes layout shift as each image arrives. Always pair lazy loading with width/height attributes.

How to Audit and Fix Lazy Loading

  1. Run this checker on your key pages. Homepage, product pages, blog posts first.
  2. Identify below-the-fold images loading eagerly. Those should get loading="lazy".
  3. Confirm above-the-fold images load eagerly. Especially the hero / LCP image.
  4. Update your CMS or template. Lazy loading should be the default for image components.
  5. Re-check Core Web Vitals. Use Lighthouse or PageSpeed Insights to measure LCP improvement.
  6. Audit sitewide. Use Bulk Checker to find pages missing lazy loading.

Related Performance & Image Tools