This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

Lazy Load Elementor Background Images

Description

A major drawback to using Elementor is that the background images used for sections and columns are all loaded when the page loads. Using a plugin like WP Rocket or BJ Lazy Load will not solve this issue. This plugin fixes that.

The plugin is dead simple. No extra database tables or queries, no admin screens with difficult options to understand, and no dependencies other than that the page is designed with Elementor. It injects a little JavaScript and CSS on the front-end. The CSS hides all backgrounds on all non-animated sections and columns. The JavaScript detects the visitorโ€™s scrolling and starts loading the background images as they get close to those sections/columns using the WayPoints JS library (which is packaged with Elementor).

New

  • support has been added for the following Elementor Pro elements: Flip Box and Slider – thanks for the idea @dollhauss

Installation

  1. WP Dashboard > Plugins > Add New
  2. Search for Lazy Load Elementor Background Images
  3. Install and activate.

Prerequisites

  • You must be using the Elementor page builder. This plugin doesnโ€™t have any effect whatsoever on pages not built with Elementor.
  • WayPoints JS library โ€“ this library is currently bundled and loading on Elementor pages. Future versions of this plugin may include the WayPoints JS library so it will not be required.

FAQ

How do I know if this is working?

If your pages start loading faster, it’s probably working. That’s the non-technical version.

If you’re a developer and know how to use Google Chome Developer Console, read on …

  1. If you’re using a caching plugin, clear it.
  2. If you’re using a CDN such as Cloudflare, clear the CDN cache.
  3. Open your site in an incognito tab in Google Chrome.
  4. Open the Developer Console.
  5. Go to the Network tab.
  6. Tick the option to disable cache.
  7. Click the Img sub-tab.
  8. Reload the page.
  9. As you scroll down, ensure that the background images of sections and columns load on the fly as you approach them.
Why isn’t this plugin doing anything?

If the plugin isn’t lazy-loading your background images, then one of the following must be true:

  • the Lazy Load Elementor Background Images plugin isnโ€™t active โ€“ activate it.
  • Elementor isnโ€™t installed/activated โ€“ install and activate it.
  • the page youโ€™re checking is not an Elementor page โ€“ this plugin ONLY works on section/column backgrounds designed with Elementor.
  • the section/column with a background is also animated (motion effects) โ€ฆ I canโ€™t lazyload them because they are hidden until they are scrolled into view.
  • Waypoints JS library is not loaded โ€ฆ we can look at this together and figure out why.

If none of the issues above applied to your situation, just leave the plugin activated, open a support ticket (support link forthcoming) and weโ€™ll troubleshoot it. DO NOT leave a crappy review on the plugin, please. Iโ€™m providing it for free and support it for free. I will do my best to make it work in all situations but there are no guarantees.

Where are the settings?

There is no admin screen added by this plugin. You just activate it and it works.

This plugin killed my site!

I believe it. Itโ€™s a very new plugin that hasnโ€™t been widely tested. Rather than give it a crappy rating, please use the support forum so we can figure out what happened. (I am waiting for WordPress.org to approve my plugin so I can link to the support forum)

In the meantime, to get your site back, get into your siteโ€™s files via cPanel File Manager through your hosting platform or via FTP, go into the wp-content/plugins/ folder, and delete the lazy-load-background-images-for-elementor folder โ€“ that should immediately bring your site back to life.

On newer versions of WordPress, you may also use the recovery link that gets emailed to you when your site has a critical error.

Iโ€™m not seeing huge performance increases …
  1. Remember โ€“ this plugin is not a lazy loader for all images on the page. It only affects background images applied to sections or columns. Use a plugin like WP Rocket to apply lazy-loading to all other image resources.
  2. Background images which are visible (or close to visible) when the page loads are loaded immediately.
  3. Your background images may not really be impacting the load time on your site (In other words, maybe your background images are highly optimized and small in size). A 2K JPG lazy-loaded is not going to improve your page speed much. A 500K JPG background will.
  4. Your web server may simply be slow. Or there are other areas of optimization that need to be addressed. The best article Iโ€™ve found for tuning up everything on the site is Kinstaโ€™s How to Speed Up Your WordPress Website (Ultimate 2020 Guide).

Reviews

โ„๏ธ1๏ธโƒฃ 31, 2022
Sadly this plugin didn’t work for me. Background images on sections just dont show at all when the plugin is active…
๐Ÿ‚ 1๏ธโƒฃ1๏ธโƒฃ 18, 2021
This Plugin still works great. Good Code survives updates. I uploaded it, activated it, and wow sped up site that had a Vimeo video as the background of the header. Gained 20+ performance points on Google Page Insights. So simple, easy, and so effective. As of today, I have the current WordPress core, current Elementor Pro and I run Generate Press as a theme. I can’t see any visual effect on my webpage, the header seems to load just as fast. Thanks, great plugin.
โ˜€๏ธ 8๏ธโƒฃ 14, 2021
YES!! been trying to do this for days. Just using it on Section background images and still works a treat. Used in conjunction with LSCache image caching and lazy loading, Elementor 3.3.1/Pro 3.3.6. Nice work James!
July 9, 2021
I installed the plugin on the 9th of July 2021 and it still works. It allows lazy loading of images in elementor slideshow, and it is a life saver on mobile. It does not work for a single section background, and I do not know why. Anyway, thank you James !
โ˜€๏ธ 6๏ธโƒฃ 3, 2021
This plugin still works. See symisz’s solution for overlay background images: https://wordpress.org/support/topic/overlay-background-2/ Unfortunately, on the site I’m working with, this adds way more to the JS execution time than it’s worth. I don’t see the value in changing the plugin to fix that at the moment.
๐Ÿƒ3๏ธโƒฃ 23, 2021
This plugin does not work anymore it seems. Also the support forum is inactive, and the plugin was last updated over a year ago!
Read all 8 reviews

Contributors & Developers

“Lazy Load Elementor Background Images” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.1.2

  • fixed support for Swiper (affects Elementor Pro widget Slider) which was not loading all backgrounds in view when the Slider widget is in โ€˜infinite loopโ€™ mode. thanks for reporting it @sermalefico

1.1.1

  • removed console.log call in JS as it was only for debugging purposes

1.1.0

  • added support for Elementor Pro widget Slider – thanks for the suggestion @dollhauss
  • added support for Elementor Pro widget Flip Box – thanks for the suggestion @dollhauss
  • simplified JS code for readability and performance

1.0.0

  • initial release