Deferring Offscreen Images & Lazy Loading Backgrounds in WordPress

Enabling lazy load in WordPress is simple, but background images often trigger “defer offscreen images” warnings in PageSpeed Insights. These errors can persist even with native or plugin-based lazy loading.

Different optimization plugins handle background image lazy loading differently. WP Rocket requires inline HTML markup, FlyingPress uses a CSS class, and Optimole needs CSS selectors. Below is a comprehensive guide to address defer offscreen images and lazy load background images across common tools.

Steps Overview

• View your defer offscreen images report
• Add a “lazy-bg” CSS class
• Use the lazy-bg class in FlyingPress
• Inline HTML for background images in WP Rocket
• Lazy load via CSS selectors (Optimole)
• Other plugins for background lazy loading
• JS-based lazy loading vs. native WordPress
• Self-host YouTube placeholder images
• Exclude above-the-fold images from lazy load

View Your Defer Offscreen Images Report

Start by testing your important pages in Google PageSpeed Insights to identify which images trigger defer offscreen errors.

Add a “lazy-bg” CSS Class

Manually lazy load background images by adding JavaScript that observes elements with the .lazy-bg class and swaps the background image when they enter the viewport:

document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-bg"));
  if ("IntersectionObserver" in window) {
    let observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          observer.unobserve(entry.target);
        }
      });
    });
    lazyBackgrounds.forEach(function(el) {
      observer.observe(el);
    });
  }
});

Enqueue this script via functions.php:

wp_enqueue_script('bg-lazy-loading', get_stylesheet_directory_uri().'/js/bg-lazy-loading.js', array(), '1.0.0', true);

Then add the lazy-bg class to your element and move the background-image to CSS:

.bg-visible {
  background-image: url('/your-image.jpg');
}

Use the lazy-bg Class in FlyingPress

If you’re using FlyingPress, simply add lazy-bg to the element’s additional CSS classes. FlyingPress will handle the rest.

Inline HTML for Background Images in WP Rocket

WP Rocket only lazy loads background images added via inline HTML. Wrap the element in a supported tag and include the style attribute:

<div style="background-image: url('image.jpg')">...</div>

For SVGs, include explicit dimensions:

<img src="https://example.com/image.svg" alt="Description" style="width:100%; height:100%; object-fit: contain;">

Lazy Load via CSS Selectors (Optimole)

Optimole can lazy load background images by targeting CSS selectors:

Step 1: Inspect the background image in Chrome DevTools and copy the CSS selector.

Step 2: In Optimole settings, enable background lazy load and paste the selector.

Other Plugins for Background Lazy Loading

Consider these plugins:

• Lazy Loader – lazy loads inline background images using the .lazyload class.
• Lazy Load Elementor Background Images – adds scripts and CSS to delay background image loading in Elementor sections.
• Lazy Optimization – integrates with Autoptimize to lazy load background images.

JS-Based Lazy Loading vs. Native WordPress

Native lazy loading uses the loading="lazy" attribute but may not cover all browsers or background images. JS-based solutions can be more flexible but add a small JS file.

Self-Host YouTube Placeholder Images

Replace external YouTube thumbnail requests with locally hosted placeholders using FlyingPress or similar plugins.

Exclude Above-the-Fold Images from Lazy Load

Ensure your above-the-fold images are excluded from lazy loading and preloaded. Most plugins allow specifying files or a number of images to exclude.

By following these steps, you can eliminate defer offscreen image warnings and improve your WordPress performance.

Author: Tom Dupuis