Lazy Load Control For Elementor

Overview

Lazy Load Control For Elementor allows users to control the lazy loading of images and background images.

Installation

  1. Download the zip of Lazy Load Control For Elementor.
  2. From your WordPress dashboard, choose Plugins > Add New.
  3. Click Upload Plugin at the top of the page.
  4. Click Choose File, locate the plugin .zip file, then click Install Now.
  5. If you already have the free version, delete it.
  6. After the installation is complete, click Activate Plugin.
  7. From your WordPress dashboard, go to Elementor > Lazy Load Control License.
  8. Add your license key.
  9. Click on Activate License.
  10. Click on Save Changes.

Compatibility

  • Requires: Elementor Free or Pro.
  • Tested on: WordPress 5.8+ and Elementor 3.0+.
  • Compatible with: Caching plugins, WP Rocket, Autoptimize, Perfmatters, Cloudflare, and many other optimization tools.

Image Elements

Normally, the images that you load via the image widgets are lazy loaded. This is good for the images that don’t appear on the viewport during the first loading, but it kills the performance for the images that are the Large Contentful Paint.

Fortunately, after activating this plugin you can decide which images should be lazy loaded.

Features for image elements

  • Adds a dropdown under Image > Content to enable or disable lazy loading.
  • Uses the native browser load parameter to load images only when they enter the viewport.

Usage Guide

  1. Edit an Image Widget in Elementor.
  2. Find the “Lazy Loading” dropdown.
  3. Select “Do not lazy load” to disable lazy loading for that image.
  4. Save & Preview the page.

Background Images

By default, Elementor does not lazy load background images, but this plugin provides an option to defer loading until the section enters the viewport.

Features for background images

  • Adds a toggle control under Section > Advanced to enable lazy loading for background images.
  • Automatically applies lazy loading only to sections where the user enables it.
  • Adds a data-url attribute to sections containing the background image URL.
  • Uses Intersection Observer API to load images only when they enter the viewport.

Usage Guide

  1. Edit a Section in Elementor.
  2. Go to the “Advanced” Tab.
  3. Find the “Lazy Load for Background” Option.
  4. Toggle it ON to enable lazy loading for that section.
  5. Save & Preview the page.
  6. Check the HTML to confirm the section has a data-url attribute.
Lazy Load Control For Elementor Background Images