It's no secret -- pages that load faster rank higher in SEO, have lower bounce rates, and drive better engagement with your site visitors. One web asset that is notorious for slowing down your site are images. To help your pages load faster, Google also officially recommends lazy loading for images in their developer documentation. Lazy loading helps pages have a faster initial load time by deferring the loading of images until the page visitor scrolls to the image.
To help you abide by best practices, and improve your page speed and SEO ranking, we've made it so you can easily enable lazy loading for your images on your pages.
Here's how it works:
If you’re using the default image module, simply add the image module to a page, and select lazy loading within the 'image loading' toggle.
If you’re using a custom module that contains an image field, loading options will be shown by default, but can be hidden by a developer if they would prefer that option not be shown in the editor. When the loading options control is shown, the default option is set to “Lazy.”
If you’re adding an image within a rich text module, these images will be set to lazy load by default. To turn off lazy loading, select the module, click on the pencil icon to edit, click on the “advanced” tab of the image editing popover, then select “default”.
Note for developers: this implementation on the image field and module use the loading attribute, which uses native browser based lazy loading. This update should not conflict with custom coded implementations that enable lazy loading.
Lazy loading for images is now available to all HubSpot customers.