Client Login
HubSpot How To: Lazy Load Images in Rich Text Modules

HubSpot How To: Lazy Load Images in Rich Text Modules

Stefen Phelps posted on in Development and HubSpot.

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.

Share via Facebook Share via Twitter Share via Email Share via LinkedIn Share via Google+

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.

Add a comment