how to implement lazy loading in hubspot pages not blog

Occasional Contributor

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.

 

Thanks 

11 Replies 11
Community Manager

Hey @ramanverma2005,

 

Are you still experiencing this issue? If so, please let me know and I can assist in getting you a solution. 

 

If you found an answer, do you mind sharing it with the Community? 

 

Thank you,
Jenny


Did my post help answer your query? Help the Community by marking it as a solution
Occasional Contributor

no, lazy loading for page I did not find any solution 

Reply
0 Upvotes
Occasional Contributor

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.

Reply
0 Upvotes
New Contributor

 have you found any solution to this?

Occasional Contributor

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:

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.6.0/lazyload.min.js"></script>

And this code needs to be put in the html for every image (make sure to put the right URL in the 3 locations and don't include the brackets []:

 

<img src="[Your image URL]" alt="[your alt text]" width="12" style="width: 100%;" data-src="[Your image URL]?width=600 600w" data-srcset="[Your image URL]?width=600 600w">>

 

Highlighted
New Contributor

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?

Reply
0 Upvotes
Top Contributor

Hey @ramanverma2005 , in order to implement lazy loading on your website across the board, you will have to:

  • create a custom module in order to control the image's mark up
  • implement a lazy loading image js library such as yall.js or blazy.js.
Occasional Contributor

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.  

Reply
0 Upvotes
LPM
Top Contributor

I think it needs a push, i.e the idea you posted to be upvoted enough for the dev team to actually pick it up:

 

https://community.hubspot.com/t5/HubSpot-Ideas/Add-Lazy-Loading-as-core-feature-for-HubSpot-pages/id...

Reply
0 Upvotes
Regular Contributor

i've been searching fot the answer long ago but couldn't found any way to implement lazy loading in hubspot pages not blog,

Reply
0 Upvotes
Occasional Contributor

After some digging around I was finally able to to use lazy load on my website. It's hard-coded in, so this might not be optimal, but it works for us.

 

First, we added this into a custom html module in our global header: 

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

 

Then, we added this into the footer of all pages: 

<script> const observer = lozad(); // lazy loads elements with default selector as '.lozad'
observer.observe(); </script>

 

Finally, it's just a matter of adding the lozad class to our img tags. <img class="lozad" data-src="url"...

 

Hope this helps!