Advice: How to lazy load background images with WP-Rocket

Some advice below for setting up WP-Rocket with Enfold.

Wp-Rocket’s lazy load feature also applied to background images but only if the tags are in the html. The new Post CSS generator for Enfold stops background images from lazy loading because it stores the background URLs in the CSS file instead of the HTML. You can make them lazy load by doing the following:

You can turn off post CSS file generation with the following code in your functions.php file.

// stop postcss generating
add_filter('avf_post_css_create_file', '__return_false', 1, 1);

This is also advised for CDN usage. A CDN cannot serve the background image from CDN if it isnt in the html file unless the specific CDN you use re-processes your CSS files to change the URL of the background image.