Lazy Loading Checker Free Online Tool 2026

Last updated March 22, 2026

Checking a Blog Archive Page

A blog archive page with 20 post thumbnails is analyzed. The checker scans all image elements and reports:

Found 20 images on this page
Above the fold (load immediately): 3 images
Below the fold (lazy load candidates): 17 images

Issues found:
- 17 images missing loading="lazy" attribute
- 4 images missing width and height attributes (CLS risk)
- 0 images using JavaScript-based lazy loading

Recommended fix for each below-the-fold image:

<!-- Before -->
<img src="/images/post-thumbnail-4.jpg" alt="Post title">

<!-- After -->
<img src="/images/post-thumbnail-4.jpg" alt="Post title"
     loading="lazy" width="400" height="250">

Fixing Missing Dimensions (CLS Prevention)

The checker flags images without explicit dimensions as Cumulative Layout Shift risks:

CLS Risk — Missing dimensions:
<img src="/hero-banner.jpg" loading="lazy">

Fix: Add width and height attributes to reserve space:
<img src="/hero-banner.jpg" loading="lazy" width="1200" height="400">

Without dimensions, the browser doesn't know how much space to reserve. When the image loads, it pushes content down, causing a layout shift that hurts your CLS score. Adding width and height lets the browser reserve the correct space before the image loads.

Analyzing a Product Listing Page

An e-commerce category page with 48 product images is checked:

Page Analysis Summary:
Total images: 48
Above fold: 6 (should load eagerly)
Below fold: 42 (should be lazy loaded)

Lazy loading status:
- With loading="lazy": 0
- With Intersection Observer: 0
- Eager loading (no lazy): 48

Estimated savings from lazy loading:
- Reduced initial requests: 42 fewer image requests
- Estimated bandwidth saved on initial load: ~8.4 MB
- Estimated LCP improvement: significant

Adding loading="lazy" to the 42 below-fold product images would dramatically reduce initial page load time.

Checking Third-Party Iframes

A page with embedded YouTube videos and a Twitter feed is analyzed:

Iframes found: 4

iframe[1]: YouTube embed — youtube.com/embed/abc123
  Status: NOT lazy loaded
  Fix: Add loading="lazy"

iframe[2]: YouTube embed — youtube.com/embed/xyz789
  Status: NOT lazy loaded
  Fix: Add loading="lazy"

iframe[3]: Twitter timeline widget
  Status: NOT lazy loaded
  Fix: Add loading="lazy"

iframe[4]: Google Maps embed
  Status: Above fold — load eagerly (correct)

Corrected iframe code:

<!-- Before -->
<iframe src="https://www.youtube.com/embed/abc123"
        width="560" height="315"></iframe>

<!-- After -->
<iframe src="https://www.youtube.com/embed/abc123"
        width="560" height="315"
        loading="lazy"></iframe>

Checking the LCP Element Priority

The checker identifies the Largest Contentful Paint element and verifies it has the correct fetch priority:

LCP Element Detected:
<img src="/hero-image.jpg" alt="Hero banner" loading="lazy">

Issues:
1. LCP element should NOT have loading="lazy" — this delays the most important image
2. LCP element should have fetchpriority="high"

Recommended fix:
<img src="/hero-image.jpg" alt="Hero banner"
     fetchpriority="high" width="1200" height="600">

The hero image is above the fold and is the LCP element — it should never be lazy loaded. Adding fetchpriority="high" tells the browser to prioritize this image over other resources.

JavaScript-Based Lazy Loading Detection

The checker also detects Intersection Observer-based lazy loading implementations:

JavaScript lazy loading detected:
- Library: lazysizes (data-src pattern found)
- Images using data-src: 15
- Images using loading="lazy": 3
- Images with no lazy loading: 8

Recommendation: Migrate from lazysizes to native loading="lazy"
Native lazy loading is supported in all modern browsers and
requires no JavaScript, reducing bundle size and complexity.

Images to update:
<!-- lazysizes pattern -->
<img data-src="/image.jpg" class="lazyload" alt="...">

<!-- Native equivalent -->
<img src="/image.jpg" loading="lazy" alt="...">

Full Page Audit Report

After running the checker on a content-heavy landing page, the full report shows:

Lazy Loading Audit Report
─────────────────────────
Page: https://example.com/landing-page

Images: 24 total
  ✓ 4 above fold — loading eagerly (correct)
  ✗ 18 below fold — missing loading="lazy"
  ✓ 2 below fold — already lazy loaded

Iframes: 3 total
  ✗ 2 missing loading="lazy"
  ✓ 1 already lazy loaded

CLS Risks: 6 images missing width/height attributes

LCP Element: /hero-banner.jpg
  ✗ Has loading="lazy" — REMOVE this attribute
  ✗ Missing fetchpriority="high" — ADD this attribute

Estimated Impact:
  Initial page weight reduction: ~12 MB
  Fewer initial HTTP requests: 20
  Projected LCP improvement: 1.2s faster

Implementing Lazy Loading for Background Images

The checker also flags CSS background images that could benefit from lazy loading via Intersection Observer:

CSS background images detected (cannot use loading="lazy"):
.hero-section { background-image: url('/large-bg.jpg'); }
.testimonial-bg { background-image: url('/pattern.jpg'); }

Recommendation: Use Intersection Observer for CSS backgrounds:

// JavaScript implementation
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('loaded');
      observer.unobserve(entry.target);
    }
  });
});

document.querySelectorAll('.lazy-bg').forEach(el => observer.observe(el));

/* CSS */
.testimonial-bg { background-image: none; }
.testimonial-bg.loaded { background-image: url('/pattern.jpg'); }