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.

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.

Native Lazyload + Polyfill vs Native Image Lazy Loading