Historically, to limit the impact offscreen images have on page load times, developers have needed to use a JavaScript library 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? Well, I’m happy to share that this will soon be possible with the new loading attribute for images due to be released in Chrome 75.
The Loading Attribute
The loading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them–without the need for additional JavaScript.
For the curious, here’s a sneak preview of the new image lazy loading syntax in action:
<img src="celebration.jpg" loading="lazy" alt="..." />
Ok. Easy enough to add to your static HTML site, but how about WordPress? Well, that’s even easier.
JDM Native Lazy Loading
JDM Digital is proud to announce we’ve just released a new WordPress plugin which automatically adds the loading="lazy" attribute to IMG tags found when filtering the_content() to support native image lazy loading.
All you do is download the plugin from GitHub or WordPress, upload, and activate it.
That’s it. Simple is sexy.
Special Thanks
Special thanks to a few people. First off, thanks to Addy Osmani, from the Chrome Dev team, for his in-depth explanation of this new feature. Also, hats off to Andrea Verlicchi, for his cleaver idea about Hybrid Lazy Loading on Smashing Magazine.