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.

Nico

Minimalistic lazyloading, loads images as they come into view. Adds native lazyloading to all images and embeds (Chrome) and adds a polyfill (1.07 KiB gzipped) to make it work in all browsers.
<ul>
<li><a href="https://nextgenthemes.com/plugins/native-lazyload-polyfill/" rel="nofollow ugc">Homepage</a></li>
<li><a href="https://gitlab.com/nnico/native-lazyload-polyfill" rel="nofollow ugc">Gitlab</a></li>
</ul>
<h3>How it works technically (if you care)</h3>
<ul>
<li>Adds <code>loading="lazy"</code> to all <code><img></code> and <code><iframe></code> inside <code>the_content</code> and other areas.</li>
<li>Also wraps <code><img></code>, <code><iframe></code> and the content of <code><pictures></code> in <code><noscript></code>.</li>
<li>Adds the <a href="https://github.com/mfranzke/loading-attribute-polyfill" rel="nofollow ugc">loading-attribute-polyfill</a> to do its magic in JavaScript.</li>
</ul>
Feedback/Help is very welcome.

Native Lazyload + Polyfill

Adds native lazyloading to all images and embeds (Chrome) and adds a polyfill to make it work in all browsers.

Native Image Lazy Loading vs Native Lazyload + Polyfill