Native Lazy Loading Support Coming to WordPress

It seems to be the week for dropping news of WordPress feature plugins. Felix Arntz, WordPress core committer and developer programs engineer at Google, announced a plan to push a lazy loading feature to the platform. If testing goes well, this feature could land in WordPress 5.4 in March.

The concept of lazy loading allows a webpage to render without loading certain resources until they are needed. This leads to faster page loads and saves data on the visitor’s end. Lazy loading is particularly useful when rendering images on the web.

The opposite of lazy loading is called eager loading, which loads everything in bulk. By default, this is how all images are loaded on the web. This often leads to poor performance on image-heavy webpages where many of the images are not in the site visitor’s viewport when first viewing the page.

For many years, various JavaScript libraries have handled this feature but not always to success. A native solution is slowly making its way into browsers. Native lazy loading works by adding a loading attribute to an <img> or <iframe> element. Browsers can then decide how to load a resource based on the value of the attribute. Currently, Chrome, Edge, and Opera all handle the loading attribute. Once the attribute officially makes it into the HTML specification, the feature should be a standard that all browsers support.

Adopting the new loading attribute is a great chance for WordPress to lead the way for a faster web overall.

Felix Arntz

The new Lazy Loading feature plugin is now available in the WordPress plugin directory. The plugin relies only on native browser support and does not add extra JavaScript. The implementation adds a loading attribute to images in post content, excerpts, comments, text widgets, avatars, and instances of using core WordPress image functions. By default, the plugin sets all images to load lazily rather than eagerly.

It is refreshing to see the continued work by core contributors on more robust image solutions. Along with WordPress 5.3’s large image size handling, both features will lead to a generally faster web. With more users loading high-quality images via mobile phones over the past few years, it has only exacerbated the problem of a slow web. That is why it imperative that WordPress continually push for image optimization.

“With WordPress enabling native lazy-loading by default, it would significantly impact performance and user experience for millions of sites, without requiring any technical knowledge or even awareness of lazy-loading as a concept,” wrote Arntz in the announcement post. “Adopting the new loading attribute is a great chance for WordPress to lead the way for a faster web overall.”

Arntz and a team of engineers originally released a native lazy loading plugin in September 2019. This was shortly after Google brought the “loading” attribute feature to version 76 of its Chrome browser. The Native Lazyload plugin currently has over 7,000 installations.

How This Affects Existing Plugins

Because not all web browsers support the loading attribute, users may not want to automatically drop their current plugins when the feature lands in WordPress. Users may choose to support browsers without native lazy loading for a while

The proposed code within the Lazy Loading plugin attempts to detect whether the loading attribute exists on an image before applying it. This means the code should play nicely with existing plugins and avoid conflicts in most cases.

Developers of plugins that handle lazy loading need to start testing their plugins and updating them for WordPress 5.4. Follow the Lazy Loading API ticket on core Trac to stay updated on when the feature lands and the GitHub repository for contributing to its development.