Lazy Load Images in the Rich Text Editor module

stefen
Key Advisor | Partner

If you're trying to improve performance on a HubSpot page and you have a lot of images in the rich text editor (a blog post, for example) then you need to lazy load those images. The problem is, we can't control the markup of those images that get output onto the page at the template level, so the task to modify the markup is left up to the editor of the page. I wrote a post about the way I recently managed to do this to document the process for editor's that are worried about page performance. It's not a perfect solution, but this is how to get the job done. See the post for the full guide: How to Lazy Load Images in Rich Text modules

 

I'd love to know if anyone has tried to do this before and if there is a better way. Personally, I'd love to see HubSpot enable a global site setting that would enable all image elements output the image URL as a `data-src` instead of the `src` so it would be easier to implement lazy loading site wide. Anyway, hope this helps somebody! 

Stefen Phelps, Community Champion, Kelp Web Developer
0 Upvotes
1 Reply 1
jennysowyrda
Community Manager

Thanks for sharing @stefen

 

@costalesja11@dhirajpandey@ramanverma2005@ravenousblue@Mattg1@BrettWright I thought you might be interested in seeing this as well! 

 

Thank you,

Jenny

0 Upvotes