This Lazyload Elements plugin allows you to improve your website’s performance by lazy loading specific sections or elements. To use this feature, simply add the CSS class lazy-section to any section or element. For dynamic content generated by shortcodes, use the data-lazy-shortcode attribute.

How to Use

1. 1. Edit Your Page, for example with Elementor:
      • Navigate to the page you want to edit in your WordPress dashboard.
      • Click on Edit with Elementor to open the Elementor editor.
   2. Static Content:
      • Select the Section or Element:
        • Click on the section or element you wish to lazy load.
      • Add the CSS Class:
        • In the Elementor panel, go to the Advanced tab.
        • Locate the CSS Classes field.
        • Enter the class name lazy-section.
   3. Dynamic Content (Shortcodes):
      • Create a Section:
        • Add a new section in Elementor where you want the dynamic content to appear.
      • Add HTML Widget:
        • Add an HTML widget to the section.
      • Add Lazy Load HTML:
        • In the HTML widget, add the following code, replacing [your-shortcode] with your actual shortcode:
        <div class="lazy-section" data-lazy-shortcode='[your-shortcode]'></div>
   4. YouTube Videos:
      • For YouTube videos added via the Elementor video module, the plugin will automatically convert the src attribute to data-src.
      • Add the lazy-section class to the section containing the video.
   5. Save and Preview:
      • Save your changes.
      • Preview the page to ensure that the lazy loading effect is working as expected.
   ExamplesExample 1: Lazy Loading an Image Section
   1. Edit the Section:
      • Click on the image section in Elementor.
   2. Add the CSS Class:
      • Go to the Advanced tab.
      • In the CSS Classes field, add lazy-section.
   3. Save and Preview:
      • Save your changes and preview the page.
      • The image will now load only when it comes into the viewport.
   Example 2: Lazy Loading an Instagram Feed
   1. Create a Section:
      • Add a new section in Elementor.
   2. Add HTML Widget:
      • Add an HTML widget to the section.
   3. Add Lazy Load HTML:
      • In the HTML widget, add the following code:
      <div class="lazy-section" data-lazy-shortcode='[instagram-feed]'></div>
   4. Save and Preview:
      • Save your changes and preview the page.
      • The Instagram feed will load only when the section comes into the viewport.
   Example 3: Lazy Loading a YouTube Video
   1. Edit the Section:
      • Click on the section containing the YouTube video in Elementor.
   2. Add the CSS Class:
      • Go to the Advanced tab.
      • In the CSS Classes field, add lazy-section.
   3. Save and Preview:
      • Save your changes and preview the page.
      • The YouTube video will load only when the section comes into the viewport or when the user interacts with the placeholder.

Additional Information

Lazyload Elements uses modern JavaScript techniques, including the Intersection Observer API, to detect when elements are in the viewport. For browsers that do not support Intersection Observer, a fallback ensures that the elements are still loaded properly.

This plugin requires no additional configuration. Simply add the lazy-section class to any Elementor section or element, and the plugin handles the rest.

Here you can download the plugin.

For more detailed information and examples contact me at [email protected]