Lazy Load Images in the Rich Text Editor module

Highlighted
Advisor

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
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
Reply
0 Upvotes
1 Reply 1
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


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes