HubSpot How To: Lazy Load Images in Rich Text Modules

Lazy loading images on HubSpot can be tricky when it comes to images that are added in Rich Text Modules. Since there isn’t a way for a developer to control the markup those images output onto the page, it requires a bit of HTML tweaking inside the rich text editor itself.

Personally, I recommend avoiding adding images to rich text modules all-together and, instead, use a well designed template/custom module combo that can accommodate your site’s design and have lazy loading built-in. However, if you don’t have the time or budget to hire a developer, here’s the quick n’ dirty way to lazy load images inside of rich text modules:

Step 1: Add JavaScript

Add the following to the “Footer HTML” in your page’s advanced settings:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>
<script>
  var myLazyLoad = new LazyLoad({
  elements_selector: "img[data-src]"
  });
</script>

The first script of this snippet adds a lazy loading image plugin to your page and the second script initializes it.

Step 2: Modify Your <img> tags

Inside each of your rich text areas with images in them, click on the “Source Code” button—the icon that looks like this: </>—and find each image tag’s src attribute and change it to data-src. For example, an image that looks like this: <img src=‘example.jpg'> needs to change to this: <img data-src='example.jpg’>

Like I said before, I don’t recommend doing things this way as it’s a bit tedious and can easily be broken. But, if you don’t have the time or resources to develop a template or a custom module that supports lazy loading and just need a quick page speed boost to your existing pages with minimum effort, this will do it for ya you crazy devil, you.

Comments

Chad P says

You can do a replace filter on the content so all `src=”` get replaced with a ‘data-src=”`

Stefen Phelps says

That’s a great idea. Although, it does require that their page is using a coded template.

Chad P says

Not in a blog it doesn’t. Those are always coded.

Ken Mafli says

This was really helpful! I have a page where I use a few GIFs and it was killing my pagespeed. This trick raised the pages score over 20 points in Googles page speed test. Thanks!

Add a comment