How To Defer OffScreen Images In WordPress + Lazy Load Background Images

Defer offscreen images wordpress

Enabling lazy load is easy, but how do you lazy load background images?

Even when lazy load is on (via cache plugin or WordPress native lazy load), you may see PSI recommendations to defer offscreen images which are usually caused by background images.

WP Rocket wants you to use inline HTML. FlyingPress wants you to add the lazy-bg CSS class. Optimole requires copying CSS selectors in Chrome Dev Tools and adding it to their settings. I have no clue which plugins you’re using, so I listed the most common ones below. I also added a few extra tips related to lazy load, YouTube placeholders, etc. Hope this helps improve scores.

 

1. View Your Defer Offscreen Images Report

The first step is to view which images are showing errors in PageSpeed Insights. PSI only shows unoptimized images for the single page you test, so be sure you test your most important pages.

Defer offscreen images pagespeed insights

 

2. Add A “lazy-bg” CSS Class

Step 1: Add the JavaScript to your site and enqueue it with funtions.php, or use Code Snippets.

document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-bg"));

  if ("IntersectionObserver" in window) {
    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  }
});

To enqueue it in your functions.php file, add the following code:

wp_enqueue_script( 'bg-lazy-loading', '/path-to-js/bg-lazy-loading.js’, array( 'jquery' ), ‘1.0.0’, true );

Step 2: Edit the element where the image is loaded, then add lazy-bg to the CSS class.

Elementor lazy bg css class

In Gutenberg, it would look like this:

Lazy load background images flyingpress

Step 3: Move the image to the CSS class.

Elementor custom css background image

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

 

3. Use The lazy-bg CSS Class In FlyingPress

If you’re already using FlyingPress, all you have to do is add the lazy-bg CSS class to your additional CSS class(es) and FlyingPress will do the rest, as explained in their documentation.

Lazy load background images flyingpress

 

4. Add Background Images To Inline HTML In WP Rocket

WP Rocket doesn’t lazy load most background images.

This includes background images in Elementor, separate CSS files, and they also disable it in many cases for “compatibility” reasons. Instead,  WP Rocket only lazy loads background images if you add background images to inline HTML using div wrappers or other supported elements.

Supported Elements:

  • div
  • span
  • section
  • li
  • figure
  • a

divs are probably the easiest and shown in their documentation, so we’ll stick with that. All you have to do is follow the same markup used in WP Rocket’s documentation, which looks like this:

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

If you use SVGs, image dimensions should be visible on the frontend:

<img style="height: 100%; width: 100%; object-fit: contain" src="https:/example.com/wp-content/uploads/background-image.svg" alt="Some alt text">

 

5. Lazy Load CSS Selectors

Optimole can also lazy load background images using CSS selectors.

Not only can it defer offscreen images, but it has more image optimization settings than WP Rocket (and even many image optimization plugins) like lazy load without jQuery WebP, and a free image CDN. It has a 4.8/5 star rating on WordPress for a reason and I suggest trying it out.

Step 1: Right click the background image and click “Inspect.”

Inspect background image in chrome dev tools

Step 2: Right click the highlighted area where the image is. Then go to Copy → Copy selector.

Background image css selector

Step 3: Enable lazyload for background images in Optimole, then paste the CSS selector.

Lazyload background images optimole

 

6. Use Other Plugins To Lazy Load Background Images

There are only a handful of other plugins that lazy load background images.

Lazy Loader – lazy loads inline background images (Settings → Media → Lazy Loader). They describe how it works: “This feature needs the unveilhooks plugin and will automatically load it, regardless of the option to load the unveilhooks plugin is enabled or not. It is possible that this setting causes issues, because: To also support multiple background images and to provide a fallback for disabled JavaScript, the plugin removes the background rules from the element and adds a style element instead. The CSS selector is .unique-class.lazyloaded for the JS case, .unique-class.lazyload for [when] JS is disabled. If you have CSS background rules with a higher specificity that match the element, they overwrite the rules that were extracted by Lazy Loader.” To Include lazysizes unveilhooks plugin, they say you will need to manually modify the markup.

Lazy Load Elementor Background Images – doesn’t seem to be maintained well, so use this plugin at your own risk. It injects a small CSS file which forces CSS to hide background images on non-animated sections/columns. It also injects a JS file to detect scrolling, then only loads background images when they’re close to sections and columns using Elementor’s WayPoints.

Lazy Optimization – this plugin depends on Autoptimize. As shown in the video, you’ll go to your Autoptimize settings → Exclude CSS from Autoptimize, then remove “wp-content/cache/, wp-content/uploads/,” from the excluded CSS. Then install the Lazy Optimizer plugin and you’re done. Not sure how well this works but I included it here in case no other option worked for you.

Exclude css from autoptimize

 

7. JS-Based Lazy Load vs. Native WordPress

There are arguments on both sides why one is better than the other, but I think Perfmatters does a nice job explaining it.

JS-based lazy loading sounds slower because it uses JavaScript, but the JS file in Perfmatters (for example) is only 2.5KB in size. The native lazy loading built-in to WordPress 5.5 relies on browsers for  lazy loading which isn’t always a good thing (unsupported browsers, not as many images will be lazy loaded, etc). So like all things, test them both and check your Waterfall chart.

Also, try to avoid lazy loading with jQuery.

 

8. Self-host YouTube Placeholder Images

If you embed YouTube videos, chances are you’ve seen requests from i.ytimg.com.

This is caused by the YouTube thumbnail since it’s hosted on an external website. FlyingPress can use placeholder images for YouTuber iFrames which eliminates the third-party request and instead, hosts thumbnails locally on your server. If you embed lots of videos, you should do this.

Flyingpress iframe settings

 

9. Exclude Above The Fold Images From Lazy Load

Just a friendly reminder that your above the fold images should be excluded from lazy load and should be preloaded. Since they’re needed immediately, lazy loading them is counterintuitive. Double check your cache/image optimization plugins (and documentation) to see how they handle this. Some have you set a number (often 2-3) while others have you add the image files.

Exclude images from lazyload optimole

I hope this was helpful. Drop me a line if you have questions.

Cheers,
Tom

You Might Also Like:

Leave a Comment