Are you still using a site builder or a block plugin that still using CSS (file or inline) to place the CSS background image property? Not many lazy load plugins are able to lazy load background images that coming from CSS, mostly they are only able to lazy loading background image that are inlined in the HTML. But you can easily lazy load CSS Background Image using my Optimize More! – Images plugin and completely get rid of Defer Offscreen Images warnings in Google Page Speed Insight.
If you still don’t know what the difference is, check out this image from WP Speed Matters.
If your site builder or block plugin already uses the first method for its background image properties, then you don’t need to worry, there are plenty of lazy load plugins available in WordPress plugin repository that are able to do that for you.
But many of site builders or block plugins still use the second method for its background image properties.
Even my favorite builder, Generate Blocks, before its 1.5.0 updates (August 30, 2022), still uses the second method. This is actually the reason why I added the lazy-loading CSS Background Image feature in the first place.
I love Generate Blocks, and always use it as my primary ‘site builder’. But I really need to be able to lazy load my background images.
How to Lazy load CSS Background Images in WordPress using Optimize More! – Images
It’s actually easy if you want to lazy load CSS Background Image using my Optimize More! – Images plugin. There two methods available:
- Add “lazyload” class to the background image container (this is if your ‘builder’ provides a field to add an additional CSS classes), or
- Simply put the unique class or ID of the container into the field that I have provided in the plugin.
See the image below.
So it’s either you put a “lazyload” class to your background image containers, or put the unique class or ID of the container to the Lazy Load CSS BG Images include list. Easy right? 😉
Fix Defer Offscreen Images
When testing your page score in Google Page Speed Insight, and you still see “Defer Offscreen Images” warning even though you already use lazyload system in your website, mostly it’s because you have background image in your page and your site builder or block plugin is still using the second method. Using Optimize More! – Images, you can fully get rid of “Defer Offscreen Images” warnings in Google Page Speed Insight. Give it a try 😉
About Optimize More! – Images:
A lightweight yet powerful image, iframe, and video optimization plugin.
Notable Features:
- Lazy Load – Lazy loading images (img tag, inline background image, CSS background image), iframes, and videos, using Lazysizes (high performant lazy load library written by Alexander Farkas in pure JavaScripts). No jquery dependency.
- Preload Featured Images – Automatically preloading featured image from common page/post (homepage, pages except homepage, single post, and woocommerce single product pages).
- Use CDN for Images – HTML rewrite if you want to serve images from your favorite CDN.
- Add Missing Image Dimensions – Add missing width and height attributes from your images.
- Automatically exclude featured image from lazyloading if Preload Featured Images feature is enabled.