HubSpot How To by Kelp: Lazy Load Images in Rich Text Modules : NatureCoaster.com accessibility restaurant explore domain room_service shopping_basket arrow-circle-right search instagram linkedin yelp twitter youtube star facebook Trip Advisor

HubSpot How To by Kelp: Lazy Load Images in Rich Text Modules

By Stefen Phelps Posted on March 2, 2019

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

Add comment

Your comment will be revised by the site if needed.

Stay Connected
Subscribe