HubSpot Ideas

ALeonard

Lazy Load CTA Images

Lazy loading images is a great feature, but we currently cannot lazy load image CTAs. We've recently had success with GIF CTAs, but we are hesitant to use them on our top ranking blogs until we can lazy load them for fear of affecting page load time. 

7 Replies
Adesignl
Top Contributor | Partner

This is a huge issue right now with Core Web Vitals being a ranking factor for web pages and seems like a pretty simple fix.

Mark_Ryba
Contributor | Elite Partner

Would be even better if we could lazy-load ALL CTAs, meaning the image isn't requested AND the hbspt.cta.load() function wouldn't fire until a user actually scrolls within a reasonable distance of the instance (this would save a network request as well). I've done this with custom modules before using intersectionObserver, but native functionality would be awesome.

Adesignl
Top Contributor | Partner

Mark, belive it or not. I tested lazy laoding the scripts and it didnt affect the page speed overtly.

 

MTabor9
Member | Platinum Partner

This is a good idea, and would help a lot.

SeanHenri
Top Contributor | Diamond Partner

A great upgrade to CTAs would introduce:

  1. Lazy loading
  2. srcset
  3. defined width and height

Hate to say it, but the lack of this makes HubSpot an easy target for dev teams who are annoyed with their marketing counterparts slowing down their efficiently coded website with third party scripts, especially with Core Web Vitals rising in importance.

 

I've heard this conversation a few too many times:

 

Marketers: Can you reduce all this unused JavaScript?

Devs: That would be a very heavy lift, so, no. Besides, most of the unused JavaScript isn't coming from our site, it's coming from HubSpot. What about that HubSpot CTA, cant you just remove that and insert an image instead? Then you can lazy load it and serve via our CDN.

SeanHenri_0-1638703599929.png

 

 

 

JBonham
Member

I have CTAs where an image tag is part of the content of the CTA. I edit the CTA html directly, and If I add the loading="lazy" attribute it gets stripped out again when I save the CTA.

Please to start with, just stop stripping it out for people like me who are editing the html.

Adesignl
Top Contributor | Partner