how to implement lazy loading in hubspot pages not blog
SOLVE
Hi,
I want to know how to implement the lazy loading in hubspot website pages I am using .html template where image modules are implemented and read this article https://www.bluleadz.com/blog/lazy-loading-images-on-hubspot but this is for blog not for the website pages I want to implement in website pages only.
how to implement lazy loading in hubspot pages not blog
SOLVE
It is now 2024 and HubSpot has had this natively implemented for a while now. Hopefully a mod can mark this answer as a solution so search engines get people the correct info.
I like kudos almost as much as cake – a close second.
how to implement lazy loading in hubspot pages not blog
SOLVE
It is now 2024 and HubSpot has had this natively implemented for a while now. Hopefully a mod can mark this answer as a solution so search engines get people the correct info.
I like kudos almost as much as cake – a close second.
Add the following attribute into the image, as I've done above.
loading="lazy"
As of about Chromium 75 this is implemented in there. Replace any of the standard image modules that appear below the line with this module, update your images, alt text etc, and retest your pages.
how to implement lazy loading in hubspot pages not blog
SOLVE
Nice to see the 'loading' prop finally make it into the real-world!
Just a note for anyone else finding this today or in the future: as James states, it's available in recent Chromium builds, but as of writing it's NOT yet fully supported across all browsers (Safari on MacOS and iOS are obvious misses at this point), so if you have something that's very image-heavy and care about those users, you may want to use another solution in the meantime.
Have a check of caniuse.com to see latest progress. But there's no harm doing both to be future-proofed.
It's certainly welcome addition, anyway. Much better to use the browser-built handling than to use custom JS solutions, so I look forward to the day we can rely on browsers handling this across every platform 🙂
I'd still like to see HubSpot integrate Lazy Loading into the pages by default so we don't have to worry about it. In the meantime, this is a big help!
how to implement lazy loading in hubspot pages not blog
SOLVE
The answer @John gave still seems to be the best/realistic option right now. Creating custom modules to handle this isn't quick and easy. I really hope HubSpot adds lazy loading as a core feature so we don't have to worry about it. This is important to ranking on Google.
how to implement lazy loading in hubspot pages not blog
SOLVE
Hi there,
I've been able to implement this only on Rich Text modules, not Image Modules. The reason for this is you need to be able to add the extra html markup to the image for the Lazy javascript to work. I haven't found a way to target anything in an Image Module.
So put this code in your "Additional <head> markup:
how to implement lazy loading in hubspot pages not blog
SOLVE
We have used above solution but here images downloaded two times, once when page load and second when we scrolll down the page.Is there a solution for this?
how to implement lazy loading in hubspot pages not blog
SOLVE
I am looking for a lazy loading solution for HubSpot beyond the blog. This is a Google PSI recommendation to improve mobile site speed. With the updates to PSI with LightHouse there's more technical recommendations for speed optimization so I am looking for ways to execute in HubSpot.