Justin Downey

This plugin adds the <code>loading</code> attribute to IMG tags found when filtering <code>the_content()</code> to support native image lazy loading.
For more information about lazy loading images using this new native browser image attribute, check out this article: <a href="https://addyosmani.com/blog/lazy-loading/" rel="nofollow ugc">https://addyosmani.com/blog/lazy-loading/</a> and for a little more depth into what we’re doing here, check out our <a href="https://jdmdig.it/30nXp7h" rel="nofollow ugc">explainer post</a>.
Historically, to limit the impact offscreen images have on page load times, developers have needed to use a JavaScript library (like <a href="https://github.com/aFarkas/lazysizes" rel="nofollow ugc">LazySizes</a> or <a href="https://www.andreaverlicchi.eu/lazyload/" rel="nofollow ugc">Vanilla-LazyLoad</a>) in order to defer fetching these images until a user scrolls near them. What if the browser could avoid loading these offscreen images for you?
The <code>loading</code> attribute instructs a browser to defer loading offscreen images until users scroll near them. It comes in three flavors: eager, auto, and lazy. Install this plugin and you can set the first image’s loading attribute and the loading attribute for all the subsequent images sent through <code>the_content()</code> in the plugin’s settings page.
Simple is Beautiful
There is no JavaScript or CSS included in the plugin. It just works in browsers that support the new <code>loading</code> image attribute.
For browsers that don’t support this new image loading attribute, that’s ok. You can still use whatever JavaScript-based image lazy loader you want as a fallback until browser support becomes a little more mainstream.

Native Image Lazy Loading

Automatically add the new loading attribute to images within your content to support native image lazy loading.

Proloy Bhaduri

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.
<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> </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>
add_filter(‘lazyload_inline_bg_excludes’,function($exclude_keywords){ 
 $exclude_keywords = [ 
 ‘bg-image.jpg’, 
 ‘class-name’, 
 ‘id’, 
 ‘or any unique keyword that the element with background image has’ 
 ]; 
 },10,1);
Note: Add the above code to the <code>functions.php</code> file of your active theme/child theme or using a code snippets plugin.

LazyLoad Background Images

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

Native Image Lazy Loading vs LazyLoad Background Images