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.

shinsenter

⚡️ Experience lightning-fast load times with our native, blazingly quick lazy loader. ✅ Backward compatible with legacy browsers (IE9+). 💯 SEO-optimized. 🧩 Lazy-load everything.
This plugin empowers you to optimize a wide range of elements, including images, videos, audio, iframes, stylesheets, and JavaScript, for a seamless user experience.
Leveraging tips from seasoned web experts and harnessing the latest web technologies for resource lazy-loading, this plugin ensures your website operates at peak efficiency, providing your visitors with a lightning-fast browsing experience.
If you find this plugin valuable, please consider leaving a <a href="https://wordpress.org/support/plugin/shins-pageload-magic/reviews/?filter=5#new-post" rel="ugc">5-star review (⭐️⭐️⭐️⭐️⭐️)</a> to support my efforts.
<h3>What People Love</h3>
<ul>
<li>⚡️ Native API, blazingly fast performance</li>
<li>👍 Support for legacy browsers (IE9+)</li>
<li>🥇 SEO-friendly optimization</li>
<li>✅ Incredibly easy to use</li>
<li>💯 No dependencies, no jQuery required</li>
<li>🤝 Works seamlessly with your favorite frameworks</li>
<li>🧩 Utilizes <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" rel="nofollow ugc">IntersectionObserver API</a> for optimized CPU usage</li>
<li>🏞 Supports responsive images with <code>srcset</code> and <code>sizes</code> attributes</li>
</ul>
💡 Tip: For optimal results, consider disabling optimization features from other plugins (e.g., lazy-loading, HTML minification, JS minification).
We recommend using this plugin alongside another page-caching solution for best performance.

<h3>Browser support</h3>
This plugin also works perfectly on popular browsers, including Internet Explorer 9 and later.
<ul>
<li>🖥 IE9+ / Microsoft EDGE</li>
<li>🖥 Firefox 4+</li>
<li>🖥 Safari 3+</li>
<li>🖥 Chrome</li>
<li>🖥 Opera</li>
<li>📱 Android 4+</li>
<li>📱 iOS 3.2+</li>
</ul>
<h3>Powered by defer.js, defer.php</h3>
<a href="https://code.shin.company/defer.js" rel="nofollow ugc">defer.js</a> 
🥇 A super small, super efficient library that helps you lazy load almost everything like images, video, audio, iframes as well as stylesheets, and JavaScript.
<a href="https://code.shin.company/defer.php" rel="nofollow ugc">defer.php</a> 
🚀 A PHP library that focuses on minimizing payload size of HTML document and optimizing processing on the browser when rendering the web page.
<h4>Key features</h4>
<ul>
<li>[x] Embed <a href="https://code.shin.company/defer.js" rel="nofollow ugc">defer.js</a> plugin</li>
<li>[x] Normalize DOM elements</li>
<li>[x] Fix missing meta tags</li>
<li>[x] Fix missing media attributes</li>
<li>[x] Preconnect to required origins</li>
<li>[x] Preload key requests</li>
<li>[x] Prefetch key requests</li>
<li>[x] Browser-level image lazy-loading for the web</li>
<li>[x] Lazy-load offscreen and hidden iframes</li>
<li>[x] Lazy-load offscreen and hidden videos</li>
<li>[x] Lazy-load offscreen and hidden images</li>
<li>[x] Lazy-load CSS background images</li>
<li>[x] Reduce the impact of JavaScript</li>
<li>[x] Defer non-critical CSS requests</li>
<li>[x] Defer third-party assets</li>
<li>[x] Add fallback <code><noscript></code> tags for lazy-loaded objects</li>
<li>[x] Add custom HTML while browser is rendering the page (splashscreen)</li>
<li>[x] Attribute to ignore optimizing the element</li>
<li>[x] Attribute to ignore lazyloading the element</li>
<li>[x] Optimize AMP document</li>
<li>[x] Minify HTML output</li>
</ul>
<h3>Support my activities</h3>
Keep up-to-date with new releases: 
<a href="https://wordpress.org/plugins/shins-pageload-magic/" rel="ugc">https://wordpress.org/plugins/shins-pageload-magic/</a>
<a href="https://www.paypal.me/shinsenter" rel="nofollow ugc">Donate via Paypal</a> 
<a href="https://www.patreon.com/appseeds" rel="nofollow ugc">Become a sponsor</a> 
<a href="https://code.shin.company/defer-wordpress/stargazers" rel="nofollow ugc">Become a stargazer</a> 
<a href="https://code.shin.company/defer-wordpress/issues/new" rel="nofollow ugc">Report an issue</a>
Released under the GNU General Public License v2 license. 
<a href="https://code.shin.company/defer-wordpress/blob/master/LICENSE" rel="nofollow ugc">https://code.shin.company/defer-wordpress/blob/master/LICENSE</a>
Copyright (c) 2024 Mai Nhut Tan <<a href="mailto:shin@shin.company" rel="nofollow ugc">shin@shin.company</a>>

A faster website! (aka defer.js)

🚀 Unleash the power of cutting edge WordPress optimization tech. 💯 SEO-Optimized and 🎯 Effortlessly User-Friendly!

Native Image Lazy Loading vs A faster website! (aka defer.js)