2021 Update: since writing this article there is a new HTML attribute loading="lazy" that you can add to your <img> tag which replaces the old JavaScript method below. HubSpot is also adding lazy loading options across their entire platform so that you don’t have to manually edit the markup. 🎉
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/vanilla-lazyload@8.17.0/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.
