Skip to main content

Lazy Load Images

Lazy loading defers image downloads until they're about to enter the viewport, dramatically speeding up initial page load and reducing bandwidth.

How Lazy Loading Works​

Traditional loading:

  1. User visits page
  2. Browser downloads ALL images on page (even those below the fold)
  3. Page render completes after all images downloaded
  4. User sees slow page load

Lazy loading:

  1. User visits page
  2. Browser downloads only images in viewport
  3. Page renders immediately
  4. As user scrolls, images load just before entering view
  5. Perceived performance is much faster

Performance Impact​

Typical improvements from lazy loading:

MetricImprovement
Initial load time30-60% faster
First Contentful Paint (FCP)20-40% improvement
Largest Contentful Paint (LCP)15-30% improvement
Total bandwidth10-40% reduced
Page speed score5-15 points higher

Especially effective on:

  • Home pages with many images
  • Blog/portfolio pages
  • Image galleries
  • WooCommerce product pages
  • Long scrolling websites

Enabling Lazy Loading​

  1. Go to Performance Toolkit → Media Optimization
  2. Check Lazy load images
  3. Click Save changes
  4. Test your site

That's it! The plugin automatically:

  • Adds native lazy loading to all <img> tags
  • Applies to images in posts, pages, and widgets
  • Works across themes and plugins
  • Falls back gracefully in older browsers

How it Works​

The plugin adds the loading="lazy" attribute to images:

<!-- Before -->
<img src="image.jpg" alt="Description">

<!-- After -->
<img src="image.jpg" alt="Description" loading="lazy">

Modern browsers handle the rest automatically using native lazy loading APIs.

Browser Support​

Native lazy loading (loading="lazy") is supported in:

  • ✅ Chrome/Chromium (76+)
  • ✅ Firefox (75+)
  • ✅ Safari (15.1+)
  • ✅ Edge (79+)
  • ✅ Opera (63+)

In older browsers, the loading attribute is simply ignored and images load normally—no breaking.

What Gets Lazy Loaded​

The plugin applies lazy loading to:

  • ✅ Images in posts and pages
  • ✅ Images in text widgets
  • ✅ WooCommerce product images
  • ✅ Gallery embeds
  • ✅ Most image sources

Typically not lazy loaded (avoided to prevent breaking):

  • ✅ Hero images above the fold
  • ✅ Critical images in theme headers
  • ✅ Images in plugin exclusion list

Fine-tuning Lazy Loading​

Excluding Images​

If certain images shouldn't be lazy loaded (critical hero images, etc.), you can exclude them.

Add these CSS classes to images that shouldn't lazy load:

  • no-lazy
  • skip-lazy
  • excluded

Or in post HTML:

<img src="hero.jpg" class="no-lazy" alt="Hero">
<img src="below-fold.jpg" alt="Regular image"> <!-- lazy loaded -->

Iframe Lazy Loading​

The plugin can also lazy load iframes (YouTube embeds, etc.):

Enable in Media Optimization settings if available.

Testing Lazy Loading​

  1. Open DevTools — Right-click → Inspect
  2. Go to Network tab
  3. Reload page
  4. Watch images load — only images in viewport load initially
  5. Scroll down — more images load as they approach viewport

Expected behavior:

  • Initial load: 2-3 images (or zero if page is below fold)
  • As you scroll: more images load on demand
  • Performance: each image loads when needed, not before

Combining with Other Optimizations​

Lazy loading works great with:

  • Page caching — cache static HTML with lazy attributes
  • Image optimization — compress images for even faster load
  • CDN — serve images from edge locations
  • Minification — reduce HTML size
  • Defer scripts — scripts load after visible content

Real-World Example​

Before optimization:

  • Product page loads 50 images
  • Page load time: 8 seconds
  • Bandwidth: 15 MB

With lazy loading enabled:

  • Initial load: 3 images (above fold)
  • Page load time: 2 seconds (75% faster!)
  • Bandwidth on first load: 1 MB
  • Additional images load as user scrolls

Troubleshooting​

Images not showing​

  • Check browser console for errors
  • Confirm loading="lazy" attribute is present (inspect element)
  • Test in different browser
  • Temporarily disable to confirm it's lazy load causing issue

Images loading too late​

  • Feeling is normal — lazy loading defers until image is about to enter view
  • Can adjust with JavaScript if needed (advanced)
  • Most users find experience better (page loads sooner)

Doesn't work in older browser​

  • Older browsers ignore loading attribute and load normally
  • No javascript fallback needed; graceful degradation
  • Users with modern browsers get benefits

Plugin compatibility issues​

  • Most plugins are compatible
  • If specific plugin images aren't lazy loading, may need exclusion
  • Check plugin documentation

Best Practices​

  • ✅ Enable by default on all sites
  • ✅ Test on product/gallery pages especially
  • ✅ Combine with image compression for best results
  • ✅ Monitor Core Web Vitals after enabling
  • ✅ Use with page caching for maximum benefit

When NOT to Use​

Rarely, you might want to disable lazy loading if:

  • Very image-heavy immediately above-fold (unusual)
  • Old browser compatibility critical (most have modern browsers)
  • Static images never scroll to (use different approach)

In almost all cases, lazy loading provides clear benefits with no downsides.

On this page