If you know what is lazy loading (and you most certainly do) then you must have landed on this page because it doesn't work as expected. When you configure our Lazy Load extension in Magento, you need to specify lazy load blocks for images to be lazy loaded.
Nevertheless, sometimes this doesn't work for content that has been added via page builder: CMS pages or blocks. So, in this guide, you'll learn how to lazy load images added via page builder in Magento.
To lazy load images added via page builder:
1. Navigate to the CMS block or page you want to lazy load images for.
2. Add a new row at the bottom of the content, and insert an HTML code from Elements.
3. Add the following comment to the HMTL row.
<!-- MAGEFAN_LAZY_LOAD -->
Note: 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.
4. Don't forget to Save the block, and then the CMS page (or block) and check the content on the frontend.
Check out our quick guide on how to test lazy loaded images to do it quicker.
Note: you won't be able to find this comment on the frontend since it's a comment, it shouldn't be visible in the source code.
Lazy loading images will help you to avoid the overload, and help to load your pages faster. Still, images added via page builder are not the only obstacles you might face. You will still need to lazy load background images.
That being said, check out the guide on how to lazy load CSS background images to do it faster.
