How to Lazyload Background Images in WordPress

A fast loading website is an integral part of building websites nowadays as it may help site visitors stay and explore more. Lazy loading images is one of the techniques which may result in better performance.

One of the easy plugins to enable lazyload of background images is called Lazyload Background Images.

1. Lazyload Background Images

In the plugin settings, you can also add the selectors for elements that contain background images. By default, the plugin will lazyload background images that are contained in inline CSS.

To enable background images to lazyload, navigate to wp-admin, and get into “Lazyload Backgrounds”

2. Lazy Loader

Another plugin option for lazyloading of background images is to use the Lazy Loader plugin.

After installing the plugin, it will add a lazy load option into Settings -> Media settings as below:

If you are using the WP Rocket plugin for full page caching and minification, it will lazyload background images by default that are applied to inline HTML. If the WP Rocket plugin causes issues for specific images, you can disable it from being lazyloaded.

Being able to lazyload background images will improve the site experience for visitors.

Useful Links

• https://web.dev/lazy-loading-images/
• https://wordpress.org/plugins/lazyload-background-images/
• https://wordpress.org/plugins/lazy-loading-responsive-images/
• https://docs.wp-rocket.me/article/1141-lazyload-for-images#background-images
• https://docs.wp-rocket.me/article/15-disable-lazy-load-on-specific-images