A New Native Solution for Lazy-Loading Images in WordPress

Want to improve your site speed? One of the finest ways to improve your site performance is to lazy load your images. There sure are many WP plugins you can use for lazy-loading images in WordPress. However, the developers now have introduced a new native solution for lazy-loading images. If everything works well and the proposed solution gets positive responses, we might soon see it in the core features.

The solution they have introduced is a new loading HTML attribute. The new attribute loading on img tags will help you quickly lazy load images while providing a standardized user experience without content shifting. Prior to this new solution, lazy loading images compulsorily required a custom JavaScript-based approach.

The loading attribute indicates how the browser should load the image; either eager or lazy. When you go for eager, your images will load immediately, even it is not visible on the viewport. Whereas, the lazy value in the loading attribute will automatically lazy load all images. The implementation will enable lazy-loading images by default with lazy value on the loading attribute under the img tag.

Note: The attribute, loading=”lazy” will only be added if the respective tag does not yet include a loading attribute. In other words, to prevent an image from being lazy-loaded, it is recommended to specify loading=”eager”.

According to the team, the HTML specification for the loading attribute is near completion. Several browsers like Chrome, Opera, and Edge supports the new function.

Lazy Loading Feature Plugin – For Lazy-loading Images in WordPress

The developers have introduced a new free Lazy Loading Feature Plugin for testing. The plugin intends to automatically add the loading HTML attribute to all images and other elements that support it. After activating the plugin, it will automatically add loading=”lazy” attributes to all images in all new and existing posts, pages, and comments on the front-end.

You can use browsers like Chrome, Opera or Edge and visit your site to see the plugin in action. Click here to check out which browsers support this implementation.

If the tests are successful and the implementation gets positive responses, this functionality will be a part of WordPress core. The function will ship out along with WordPress 5.4.

Customization for Developers

While the images will lazy load by default, developers will be able to override this behavior both globally and on a per-image basis.

A new filter wp_lazy_loading_enabled will allow turning the feature on and off. For example, one could disable lazy-loading entirely with the following snippet:

 add_filter( 'wp_lazy_loading_enabled', '__return_false' );

This filter also passes a secondary parameter $tag_name, which is a specific tag name to enable or disable lazy-loading for, and $context, which typically is the name of the current filter being run. Currently, img is the only supported value, but since adding loading support to additional tags is on the horizon (e.g. some browsers already support the loading attribute on iframe tags), this parameter exists for future compatibility. For example, if you want to be more specific and disable lazy-loading only for images (so that future supported tags would by default have it enabled), you could use the following snippet:

add_filter(
'wp_lazy_loading_enabled',
function( $result, $tag_name ) {
if ( 'img' === $tag_name ) {
return false;
}
return $result;
},
10,
2
);

There is also another filter wp_set_image_loading_attr that filters the value of the loading attribute for individual control per image. The filter passes the full img tag markup including all attributes as the second parameter, the full content blob that the image is part of, and the context, which typically is the current filter being run. wp_set_image_loading_attr can, for example, be used for interoperability by plugins that currently use alternative mechanisms to lazy-load, for example, a class or a data attribute. It is recommended to only do this as a transition though and in the long run update such plugins to specify loading=”eager”, in which case core will leave that in place as it is, as mentioned before.

Read the original announcement post here.