CMS Development

ramanverma2005
Participante

how to implement lazy loading in hubspot pages not blog

resolver

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 

1 Soluciones aceptada
John
Solución
Colaborador líder | Partner nivel Platinum
Colaborador líder | Partner nivel Platinum

how to implement lazy loading in hubspot pages not blog

resolver

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.

Ver la solución en mensaje original publicado

17 Respuestas 17
John
Solución
Colaborador líder | Partner nivel Platinum
Colaborador líder | Partner nivel Platinum

how to implement lazy loading in hubspot pages not blog

resolver

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.

KundanSingh
Miembro

how to implement lazy loading in hubspot pages not blog

resolver

I used the lazy loading but still my website's speed didn't improved and there are files of hubspot js which are impacting it

0 Me gusta
ramanverma2005
Participante

how to implement lazy loading in hubspot pages not blog

resolver

HI @KundanSingh can you share the website link so that I can check  ?

0 Me gusta
jamesmccarthynz
Participante

how to implement lazy loading in hubspot pages not blog

resolver

Hi,

 

I've done this by just creating a custom module for images. 

  1. Go to the design manager
  2. Click File -> New File, Choose ModuleScreenshot 2020-04-20 at 12.07.19 PM.png

     

  3. Tick Pages, Choose Local module, give it a name (Lazy Image), hit Create
  4. In your new module, click Add field, choose Image
  5. Choose a default image. 
  6. Click Copy, choose Copy snippet.   Screenshot 2020-04-20 at 12.09.38 PM.png
  7. Paste the snippet into the module.html box
    {% if module.image_field.src %}
    	{% set sizeAttrs = 'width="{{ module.image_field.width }}" height="{{ module.image_field.height }}"' %}
    	{% if module.image_field.size_type == 'auto' %}
    		{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    	{% elif module.image_field.size_type == 'auto_custom_max' %}
    		{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.image_field.max_width }}px; max-height: {{ module.image_field.max_height }}px"' %}
    	{% endif %}
    	<img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" {{ sizeAttrs }} loading="lazy">
    {% endif %}
  8. Add the following attribute into the image, as I've done above. 
    loading="lazy"

     

  9. 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. 
mike-ward
Asesor destacado

how to implement lazy loading in hubspot pages not blog

resolver

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 🙂

0 Me gusta
jkeough78
Colaborador | Partner
Colaborador | Partner

how to implement lazy loading in hubspot pages not blog

resolver

Thanks @jamesmccarthynz ! This is really great.

 

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!

chloekonig
Miembro

how to implement lazy loading in hubspot pages not blog

resolver

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!

 

john3211
Miembro

how to implement lazy loading in hubspot pages not blog

resolver

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

0 Me gusta
John
Colaborador líder | Partner nivel Platinum
Colaborador líder | Partner nivel Platinum

how to implement lazy loading in hubspot pages not blog

resolver

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.


I like kudos almost as much as cake – a close second.

jkeough78
Colaborador | Partner
Colaborador | Partner

how to implement lazy loading in hubspot pages not blog

resolver

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.  

LPM
Colaborador líder | Partner nivel Diamond
Colaborador líder | Partner nivel Diamond

how to implement lazy loading in hubspot pages not blog

resolver

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

BrettWright
Participante

how to implement lazy loading in hubspot pages not blog

resolver

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">>

 

nutanhaspe
Participante

how to implement lazy loading in hubspot pages not blog

resolver

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?

0 Me gusta
ravenousblue
Participante

how to implement lazy loading in hubspot pages not blog

resolver

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.

Mattg1
Miembro

how to implement lazy loading in hubspot pages not blog

resolver

 have you found any solution to this?

jennysowyrda
Administrador de la comunidad
Administrador de la comunidad

how to implement lazy loading in hubspot pages not blog

resolver

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

ramanverma2005
Participante

how to implement lazy loading in hubspot pages not blog

resolver

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

0 Me gusta