Lazyload Page Builder element background images

[toan-tam]

Hi Magefan team,

Thank you for providing this amazing module! I'm currently using it and very happy with the features it offers. However, I've encountered an issue with Page Builder using row/column background images. The extension doesn’t lazy load them. Here’s a screenshot for reference: https://share.cleanshot.com/DlbpNpgf.

I’m aware of the workaround mentioned here: https://magefan.com/blog/lazy-load-css-background-images, but using a plain HTML markup element from the Page Builder would limit non-technical admins from easily updating background images.

Is there a better way to lazy load background images in Page Builder elements without affecting ease of use for non-technical admins?

Looking forward to your advice!

Thanks,
Toan

[VikaTarnavska]

Hello Toan,

Thank you for reaching out. We're glad to know the extension is working well!

To enable image lazy load for Magento 2 CMS Blocks / Pages, you should add a new row at the bottom of our content and insert this HTML comment:
<!-- MAGEFAN_LAZY_LOAD -->

It is important to use a new row at the bottom of the content, since if you add the command at the top of the existing block, it will be deleted.

Could you please give this a try and let us know how it goes?

Best,
Viktoriia
Customer Support Manager at Magefan

[toan-tam]

Hi Viktoriia,

Your suggestion doesn't work with the background images from the Page Builder Row/Column element. It would only work with the Page Builder Image element. Could you please recheck the below?

I've encountered an issue with Page Builder using row/column background images. The extension doesn’t lazy load them. Here’s a screenshot for reference: https://share.cleanshot.com/DlbpNpgf.

I’m aware of the workaround mentioned here: https://magefan.com/blog/lazy-load-css-background-images, but using a plain HTML markup element from the Page Builder would limit non-technical admins from easily updating background images.

Is there a better way to lazy load background images in Page Builder elements without affecting ease of use for non-technical admins?

Thanks,
Toan

[VikaTarnavska]

Hi Toan,

Thank you for your comment.

Please refer to the following screencast https://github.com/user-attachments/assets/477f7ad2-41bf-4735-848d-e7984c6707a6

We tested the functionality on our demo https://opt.demo.magefan.top/test-lazy-laod. Everything appears to work well. Please note that all changes added to the demo will be rolled back at the end of the day.

Could you please try to reproduce the issue on our demo and let us know how it goes? You could also share a link to the page where you're facing difficulties so that we can check it out.

Looking forward to your reply.

Best,
Viktoriia
Customer Support Manager at Magefan

[toan-tam]

Hi Viktoriia,

Thanks for the demo link. After further investigation, I confirmed that the background images in the Page Builder Row/Column elements only work when using the "Non-jQuery JavaScript Library (Requires Advanced Configuration)" method. They don't load correctly with the "Native Browser Lazy Loading" method. See the following screenshot showing where the setting is - https://share.cleanshot.com/rL2TCs7y

We switched to the "Native Browser Lazy Loading" method due to a previous SEO issue where images were not being indexed/crawled by search engines.

Would it be possible to configure the Page Builder's background images to lazy load while using the "Native Browser Lazy Loading" method?

Thanks,
Toan

[VikaTarnavska]

Hello Toan,

Thank you for sharing your findings.

At the moment, the extension doesn't work with the "Native Browser Lazy Loading" method. However, we decided that it'd be useful to implement this functionality.

We are now working on this and will let you know once it's ready.

Thank you for your time and for bringing this to our attention.

Best,
Viktoriia
Customer Support Manager at Magefan