Michael, following up after doing some reading. It looks like this is a problem with background images period; not just Beaver Builder’s implementation? I am not familiar with any techniques to lazy load bg images, unfortunately.
You are correct it is not specifically related to Beaver Builder’s implementation. The trouble is that I have chosen to use the Hope BB theme as a base for the front page since it reduced the number of HTTP requests (compared to using a slider). I have added a couple more row’s with background images however and that’s when I noticed the need to lazy load CSS BG images to reduce the page size.
I am now experimenting with JCH Optimize (https://www.jch-optimize.net) to minify/optimize delivery of JS / CSS and lazy loading images. Incidentally the author of that plugin use the jQuery lazy load plugin (as mentioned above) to load in normal page images. I have suggested that he should extend his plugin to include lazy load of CSS BG images using the implementation mentioned above.
I can also recommend the above mentioned plugin in the Pro version btw. Using that plugin I have been able to further reduce the number of HTTP requests from 59 to 15 without breaking my website which is quite impressive to say the least.
This is very interesting topic I think also need special attention from BB developers simply its correlated with many thing like [Page Speed - Minify css html js - reduced HTTP requests] I try many plugins my self to tune wordpress sites and I have very good result with:
Beaver Builder surely need to be tune and optimize for page speed and minified setting with reduced http requests for example let’s see the test result for http://forum.wpbeaverbuilder.com :
I agree - Design and Optimal delivery must go hand in hand.
Anyway I already got a reply back from the author of JCH Optimize on lazy loading CSS BG images. He says that it is indeed possible under these circumstances:
Lazy load for background images can still be implemented but it would only work for background images declared in inline styles or styles attributes on elements, not in external css files.
Hi guys! Thanks so much for the responses and the information. We’re very interested in optimizing Beaver Builder and ensuring that it generates efficient/optimal code. A few of these suggestions we prefer to leave up to caching plugins.
If either of you guys have a second, please feel free to add or vote up any of these suggestions on our User Voice page.
Also, if you’re interested in contributing we’d love to hear from you. We’re also hiring developers
I hear what you are saying and I am personally using:
JCH Optimize Pro (https://www.jch-optimize.net/) for optimal delivery of CSS and JS. This plugin also significantly reduces the number of HTTP requests.
But more recently I have started using Lazy Load XT (https://wordpress.org/plugins/lazy-load-xt/)
which also supports lazy loading of background images (if the page is properly configured for it - more details below). This is often overseen and I have noticed that elements on a fluid/responsive BeaverBuilder page often utilize background elements such as images. Unfortunately BB pages are currently not correctly configured for lazy loading of such elements.
Citing the author of Lazy Load XT the following syntax needs to be added to BB pages to ensure lazy loading of background images:
‘‘You must add the attribute “data-bg” with a value of path to the image to elements with a background image.
E.g. “<div data-bg=”/path/to/image.png">…</div>"’’
This seems to confirm the previous research that I have done on this matter (see previous posts above). I hope that this information is of some use to BB developers.
