Lazy-loads media using the native browser feature.

Native Lazyload

<p>Lazy-loads media using the native browser feature. <a href="https://web.dev/native-lazy-loading" rel="nofollow ugc">Learn more about the new <code>loading</code> attribute</a> or <a href="https://core.trac.wordpress.org/ticket/44427" rel="nofollow ugc">view the WordPress core ticket</a> where inclusion of a similar implementation in WordPress core itself is being discussed.</p>
<p>If the <code>loading</code> attribute is not supported by the browser, the plugin falls back to a JavaScript solution based on <code>IntersectionObserver</code>. For the case that JavaScript is disabled, but the <code>loading</code> attribute <em>is</em> supported by the browser, a <code>noscript</code> variant of the respective element will be added that also includes the <code>loading</code> attribute without any further changes.</p>
<h4>&#8220;Native&#8221; means &#8220;Fast&#8221;</h4>
<p>If you have found your way over here, you are probably aware of how crucial performance is for a website&#8217;s user experience and success. You might also know that lazy-loading is a key feature to improve said performance. However, the solutions for lazy-loading so far still added a bit of overhead themselves, since they relied on loading, parsing and running custom JavaScript logic, that may be more or less heavy on performance.</p>
<p>This plugin largely does away with this pattern. It relies on the new <a href="https://github.com/whatwg/html/pull/3752" rel="nofollow ugc"><code>loading</code></a> attribute, which makes lazy-loading a native browser functionality. The attribute is already supported by Chrome, and will be rolled out to other browsers over time. The solution being &#8220;native&#8221; means that it does not rely on custom JavaScript logic, and thus is more lightweight. And &#8220;more lightweight&#8221; means &#8220;faster&#8221;.</p>
<p>Last but not least, a neat thing to keep in mind is that this plugin will essentially improve itself over time, as more browsers roll out support for the <code>loading</code> attribute.</p>
<h4>Usage</h4>
<p>Just activate the plugin, and all your images and iframes in post content will be loaded lazily.</p>
<h3>Credit</h3>
<p>This plugin is partly based on logic from <a href="https://github.com/wprig/wprig/blob/v2.0/inc/Lazyload/Component.php" rel="nofollow ugc">WP Rig</a> as well as recommendations from <a href="https://web.dev/native-lazy-loading" rel="nofollow ugc">web.dev</a> and <a href="https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/" rel="nofollow ugc">developers.google.com</a>.</p>


Alternative Plugins for

Discover the Lists with Native Lazyload

Web Performance Plugins

More Web Performance Plugins

More Web Performance Plugins