Google officially announced in April 2019 that Chrome will start supporting native lazy-loading of images and iframes.

This means that instead of developers relying on custom code to make images load lazily (as has been the case for so long), lazy-loading will now be automatically enabled at a browser-level (starting from Chrome 76).

Google has even released a WordPress plugin that allows site owners and web developers to take advantage of this new feature.

But why do you need lazy-loading in the first place?

Why Images Should Be Lazy-Loaded

Lazy-loading is also sometimes referred to as on-demand loading. It is a technique for optimizing web content with speed improvements being its major advantage.

Without lazy loading, an entire web page is loaded and the full page is rendered to the user at once. But with lazy-loading, only the sections of a web page that is immediately required by the user are loaded. The remaining sections of the web page is delayed until the user requests them by taking an action (such as scrolling down) on the page.

By loading content (images especially) lazily as described above, websites can significantly speed up their page load times which in turn could potentially improve the entire user experience. And since lazy-loaded pages are faster, they may also rank better in terms of SEO.

Lazy-Loading – Why You Should Go Native

If you don’t already have the lazy-loading feature implemented on your website, now might be a good time to consider it. But if you want lazy-loading, do you have to go with Google’s “brand new” native lazy-loading feature? Or should you instead continue using older custom code techniques?

Without getting into too much details of how lazy-loading works from a programmatic perspective, here are my thought on the matter…

Lazy-loading seeks to improve performance and reduce overhead. But traditional solutions for lazy-loading actually add some overhead themselves. This is because they rely on loading, parsing, and running custom JavaScript code – and any code execution usually has an effect on performance.

Native lazy-loading largely does away with this pattern. It uses the new loading attribute, which makes lazy-loading a native browser feature. The attribute is currently supported on Google Chrome, and over time, it will gradually be rolled out to other browsers.

Native means no reliance on JavaScript logic. No reliance on JavaScript logic means lightweight. Lightweight means fast!

If your website is built on WordPress, you should grab Google’s native lazy-loading plugin from the WordPress plugin repo.

Even though, the native lazy-loading feature is still only supported by Chrome (as of this writing on November 19, 2019), you have nothing to worry about because the plugin will revert to a JavaScript solution (using IntersectionObserver) in situations where browser support is not available.

And in rare cases where JavaScript may be disabled, but the loading attribute is supported by the browser, a noscript version of the element is added that also includes the loading attribute without any additional changes.

If you want to implement lazy-loading but don’t particularly care about native lazy-loading, check out the a3 Lazy Load plugin. I have used it myself in the past and recognize it to be pretty good at what it does.

To be fair, lazy-loading (be it native or traditional) also has a few disadvantages. I plan to touch on these in a future article.