How to Lazy Load Images in WordPress (Step-by-Step)

Lazy loading is one of the easiest ways to improve your WordPress site’s performance and reduce its carbon impact. This guide walks you through how to lazy load images in WordPress using built-in features or plugins, no coding required.

What is lazy loading in WordPress and why it helps

Lazy loading means images aren’t loaded until they enter (or are about to enter) the browser’s viewport. This reduces initial page load time and bandwidth usage, which in turn improves user experience and helps reduce CO₂ emissions.

WordPress added native lazy loading starting in version 5.5. Since then, the default behaviour is to add loading="lazy" to all image and iframe tags that have width and height set.

Why it matters:

• Speeds up Largest Contentful Paint (LCP)
• Reduces total page weight
• Saves energy by loading fewer resources
• Helps pages meet Core Web Vitals standards

Ready for Faster, Greener Hosting?

We recommend Krystal - fast, reliable, powered by 100% renewable energy. It's a host we trust and a smart move for a cleaner web.

Switch to Green Hosting or see why we recommend it →

How to check if lazy loading is already enabled

Before installing anything, make sure your site isn’t already using lazy loading:

1. Check your WordPress version: Go to Dashboard → Updates. Lazy loading is native from 5.5+, improved in 5.7 and again in 5.9.
2. Inspect an image: Right-click any image and select Inspect. If it includes loading="lazy", it’s working.
3. Test manually: Scroll down a page slowly while watching the Network tab in DevTools. If images only appear when they scroll into view, lazy loading is active.
4. Theme/plugin conflicts: Some themes override native lazy loading. Plugins that control media or performance can also disable it.

Choose the right lazy loading method for your site

You have three options:

1. Use core WordPress (already active)

If you’re on WP 5.5 or later and images are loading lazily, you don’t need to do anything.

2. Use a plugin (for control and extras)

Plugins offer more control, placeholder effects, or support for background images:

• Lazy Load by WP Rocket (lightweight, reliable)
• a3 Lazy Load (customisable thresholds)
• Smush (adds image compression + lazy loading)
• Optimole (CDN + smart lazy loading)
• Jetpack Boost (includes lazy loading + performance tweaks)
• Lazy Load for Videos (great for iframe embeds)

Plugin comparison table

Here’s a quick comparison of popular lazy loading plugins and what they offer:

3. Use code snippets (for fine-tuning)

If you want to customise how and where lazy loading applies, WordPress offers filters. You can disable lazy loading for specific image types:

// Disable lazy loading for the first image only
add_filter( 'wp_img_tag_add_loading_attr', function( $value, $image ) {
    static $image_count = 0;
    $image_count++;
    return ( $image_count === 1 ) ? false : $value;
}, 10, 2 );

Set up lazy loading step-by-step

Using WP Rocket or a similar plugin:

1. Install and activate the plugin
2. Go to its settings (e.g. Settings → Media → Lazy load)
3. Enable image lazy loading
4. Optionally, enable for iframes and videos
5. Save changes

For background images, check if your plugin includes support, a3 Lazy Load and Optimole do.

With Smush:

1. Install Smush from Plugins
2. Navigate to Smush → Lazy Load & Preload
3. Toggle “Enable Lazy Loading”
4. Choose whether to include iframes and specific post types

Optional plugin-based exclusions

You can often exclude above-the-fold images via plugin settings:

<img src="example.jpg" data-no-lazy="1" alt="Hero image" />

Or exclude by class:

function exclude_lazy_class( $classes ) {
    $classes[] = 'no-lazy';
    return $classes;
}
add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Test your image loading and page speed

Once it’s active, test your site to verify lazy loading is working:

• Scroll test: Reload your page and scroll slowly. Images should load just before they appear.
• Use Lighthouse performance audit
• Check with GTmetrix
• Run WebPageTest
• Measure CO₂ impact: Use Website Carbon Calculator to assess environmental impact.

Handle background images, sliders and special case

Not all images are covered by default lazy loading.

Lazy load background images

These require CSS support or plugin help:

• Use Optimole or a3 Lazy Load
• For custom themes, inline background-image styles can be replaced with data-bg + JS

Example:

<div class="lazy-bg" data-bg="example.jpg"></div>

// JS to replace data-bg
const lazyBgs = document.querySelectorAll('.lazy-bg');
lazyBgs.forEach(el => {
  const bg = el.getAttribute('data-bg');
  if (bg) el.style.backgroundImage = `url('${bg}')`;
});

Lazy load sliders and embeds

• Some slider plugins load all images at once. Look for a lazy load toggle in their settings.
• Use Lazy Load for Videos to handle iframes or YouTube embeds.

The Quick Fix for a Slow, Heavy Site

We optimise your site for speed, efficiency and sustainability. No rebuild. No delays. Just better performance and a lighter footprint.

Get Tuned Up or discover DIY improvements →

Final checks and next steps

That’s it! You’ve now got lazy loading working sitewide. Want to go further?

• Use our website audit guide to spot more easy wins
• Re-run your Lighthouse scores monthly to keep track of improvements
• Consider adding image formats like WebP or AVIF for further gains

Lazy loading is a quick win, but it’s even more powerful when paired with lean image formats and smart design choices.