Ben Dunkle

<p>Lazy Fade is a simple plugin to enhance the presentation of your site. As the user scrolls, content will slightly fade and animate into view, adding a more natural look and feel to the experience. Furthermore, images “below the fold” will only load when they come into view, saving download time and optimizing your site.</p>


Lazy Fade

Lazy Fade is a simple plugin to enhance the presentation of your site. As the user scrolls, content will slightly fade and animate into view, adding a …

Proloy Bhaduri

<p>This plugin will delay the loading of  background images in your website and thus helps boosting the website loading time by reducing total number of HTTP requests.</p>
<h3>Quick Notes & Links</h3>
<ol>
<li>Do not lazyload background images which are peresent above the fold because this will increase time to First Contentful Paint(FCP)  metric and affect the speed of your website . </li>
<li>Background images that are added using inline CSS e.g, <code><p style=" background-image: url( path/to/background-img.jpg )" > </p></code> are lazyloaded by this plugin by default . </li>
<li>No dependencies required  for this plugin  to work. </li>
<li>No extra HTTP request </li>
<li>Add the selectors of the elements that have background images in the plugin settings page  or add <code>lazyload-bg</code> class to the element .</li>
<li><a href="https://proloybhaduri.com/" title="WordPress Tips and Tricks by Proloy Bhaduri" rel="nofollow ugc">WordPress Tips and Tricks By Proloy Bhaduri</a></li>
<li><a href="https://www.buymeacoffee.com/proloybhaduri/" title="Support Proloy Bhaduri" rel="nofollow ugc">Buy me a Coffee</a></li>
</ol>
<h4>Works smoothly with almost every page builders</h4>
<h3>Exclude certain inline background images from lazy loading using filter hook <code>lazyload_inline_bg_excludes</code></h3>
<p>add_filter(‘lazyload_inline_bg_excludes’,function($exclude_keywords){<br />
    $exclude_keywords = [<br />
        ‘bg-image.jpg’,<br />
        ‘class-name’,<br />
        ‘id’,<br />
        ‘or any unique keyword that the element with background image has’<br />
    ];<br />
 },10,1);</p>
<p>Note: Add the above code to the <code>functions.php</code> file of your active theme/child theme or using a code snippets plugin.</p>


LazyLoad Background Images

Helps deferring offscreen background images and improves website speed by reducing HTTP requests .

Lazy Fade vs LazyLoad Background Images