HubSpot How To: Lazy Load Images in Rich Text Modules
By Stefen Phelps on Feb 23, 2019 5:46:52 PM
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:
<code><script src="<a class="" href="https://cdn.jsdelivr.net/npm/vanilla-lazyload@8.17.0/dist/lazyload.min.js">https://cdn.jsdelivr.net/npm/vanilla-lazyload@8.17.0/dist/lazyload.min.js</a>"></script></code><br><code><script></code><br><code> var myLazyLoad = new LazyLoad({</code><br><code> elements_selector: "img[data-src]"</code><br><code> });</code><br><code></script></code>
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.
