Justin Downey

<p>This plugin adds the <code>loading</code> attribute to IMG tags found when filtering <code>the_content()</code> to support native image lazy loading.</p>
<p>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>.</p>
<p>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?</p>
<p>The <code>loading</code> attribute instructs a browser to defer loading offscreen images until users scroll near them. It comes in three flavors: <strong>eager</strong>, <strong>auto</strong>, and <strong>lazy</strong>.  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.</p>
<p><strong>Simple is Beautiful</strong></p>
<p>There is no JavaScript or CSS included in the plugin.  It just works in browsers that support the new <code>loading</code> image attribute.</p>
<p>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.</p>


Native Image Lazy Loading

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

fayne

<p>Enhance your website’s user experience and seo ranking by lazy loading images.</p>
<h3>What is lazy loading?</h3>
<p><em>«Lazy loading is a technique that defers loading of non-critical resources at page load time. Instead, these non-critical resources are loaded at the moment of need.»</em><br />
– Jeremy Wagner, Google Developer</p>
<p>In other words:<br />
Lazy loading images makes them being loaded asynchronously which makes it possible to load them conditionally (e.g. when they are within the visitors’s viewport). In doing so, you will prevent your visitors from downloading images they would never see anyway.</p>
<h3>What are the advantages?</h3>
<p>The main advantages for your visitors are:</p>
<h4>1. Reduced page load time</h4>
<p>Having to initially load less resources, naturally reduces the loading duration. This will be more noticeable the more images you have on your website and may have a critical impact on your visitors’s experience as well as your SEO ranking.</p>
<h4>2. Smaller page size</h4>
<p>It’s possible that your visitors will not scroll down to the very bottom of the page and therefore not load all images. Having to load a few images less might not be relevant on unlimited connections. For visitors browsing your website on limited plans however, you’ll prevent them from wasting their data allowances. Again, this is a factor influencing your SEO ranking.</p>
<h3>Browser support</h3>
<p>Be Lazy uses a polyfill for browsers not supporting the IntersectionObserver API by default. As a result, pretty much any browser is supported.</p>
<p>✔ Google Chrome<br />
✔ Mozilla Firefox<br />
✔ Opera<br />
✔ Microsoft Edge<br />
✔ Microsoft Internet Explorer (7+)<br />
✔ Safari (6+)<br />
✔ Android Browser (4.4+)</p>


Be Lazy

Enhance your website's user experience and seo ranking by lazy loading images.

Native Image Lazy Loading vs Be Lazy