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.

codesupplyco

<p>We’ve been developing <a href="https://codesupply.co" rel="nofollow ugc">premium WordPress themes</a> for a few years and have always been lacking essentials things in the WordPress core.</p>
<p>There’re numerous plugins in the WordPress repository, however if you install them all, there’s inconsistency in their backend and frontend styles and possible plugin conflicts.</p>
<p>That’s why we created Powerkit, essentials components for every WordPress blog or magazine.</p>
<p>Components have modular structure and can be enabled or disabled with a single click. They have been thoroughly tested and play well together.</p>
<h3>Social Integrations</h3>
<ul>
<li>Share Buttons</li>
<li>Social Links</li>
<li>Facebook Integration</li>
<li>Pinterest Integration</li>
<li>Twitter Integration</li>
<li>Instagram Integration</li>
</ul>
<h3>Marketing</h3>
<ul>
<li>Opt-In Forms</li>
</ul>
<h3>Content Presentation</h3>
<ul>
<li>Basic Shortcodes</li>
<li>Justified Gallery</li>
<li>Slider Gallery</li>
<li>Lightbox</li>
<li>Typekit Fonts</li>
<li>Custom Fonts</li>
</ul>
<h3>Image Optimization</h3>
<ul>
<li>Retina Images</li>
<li>Lazyload</li>
</ul>
<h3>Utilities</h3>
<ul>
<li>Contributors Widget</li>
<li>Author Widget</li>
<li>Featured Posts Widget</li>
<li>Scroll To Top Button</li>
</ul>


Powerkit – Supercharge your WordPress Site

Essential components for every WordPress site: share buttons, social links, social media integrations, galleries, lazyload, custom widgets, and more.

Native Image Lazy Loading vs Powerkit – Supercharge your WordPress Site