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:
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.
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.