How to Lazy Load Background Images in WordPress for Faster Performance

What Is Lazy Loading?

Lazy loading is a technique that defers the loading of images (or other assets) until they’re needed — usually when they enter the viewport. This improves:

• Page load time
• Initial Time to Interactive (TTI)
• Core Web Vitals (especially Largest Contentful Paint)

Most WordPress themes now lazy load inline <img> tags by default (or via native browser support), but background images set using CSS are not lazy-loaded out of the box.

Why Background Images Are a Problem

If your hero section or banners use large background images, they load immediately — even if the user never scrolls to them. This can drastically slow down your site, especially on mobile.

💡 Good to know: Lazy loading background images requires a mix of HTML, CSS, and JavaScript — WordPress won’t do it automatically.

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

Step 1: Use a Placeholder Container

Instead of applying the background image directly in CSS, create a container with a placeholder class:

<div class="lazy-bg" data-bg="https://yourdomain.com/wp-content/uploads/image.jpg"></div>

Step 2: Style the Container with CSS

.lazy-bg {
  min-height: 400px;
  background-color: #f3f3f3; /* fallback */
  background-size: cover;
  background-position: center;
}

Step 3: Add Lazy Load Script

This JavaScript snippet watches for the element entering the viewport and then loads the image:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const lazyBackgrounds = document.querySelectorAll(".lazy-bg");

  const lazyLoad = (element) => {
    const bg = element.getAttribute("data-bg");
    element.style.backgroundImage = `url('${bg}')`;
    element.classList.add("loaded");
  };

  const observer = new IntersectionObserver((entries, obs) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        lazyLoad(entry.target);
        obs.unobserve(entry.target);
      }
    });
  });

  lazyBackgrounds.forEach(el => observer.observe(el));
});
</script>

📌 Pro Tip: Wrap the script in a wp_footer hook if you’re adding it via functions.php or enqueue it as an external JS file.

Bonus: Add Fade-in Animation

Enhance UX with a simple transition effect:

.lazy-bg {
  transition: background-image 0.5s ease-in-out;
}

Can You Use a Plugin Instead?

Most lazy load plugins (like a3 Lazy Load) do not support background images without modification. If you’re using a page builder like Elementor or WPBakery, some offer native support for lazy loading background sections — check the widget settings.

Conclusion

Lazy loading background images in WordPress is a simple but effective performance tweak. By combining a lightweight script with smart HTML/CSS structure, you’ll reduce load times and improve user experience — especially on slower connections.

Try this technique on hero sections, full-width banners, or any large visuals outside the initial viewport. Your Lighthouse scores will thank you!