# Lazy Load CTA Images

**URL:** <https://community.hubspot.com/t/lazy-load-cta-images/39331>\
**Category:** HubSpot Ideas\
**Tags:** ctas\
**Created:** [June 22, 2021, 4:37pm UTC](https://community.hubspot.com/t/lazy-load-cta-images/39331 "2021-06-22T16:37:38Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ALeonard](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/aleonard/32/14279_2.png) [@ALeonard](https://community.hubspot.com/u/ALeonard)\
**Post date:** [June 22, 2021, 4:37pm UTC](https://community.hubspot.com/t/lazy-load-cta-images/39331/1 "2021-06-22T16:37:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Adesignl](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/adesignl/32/27362_2.png) [@Adesignl](https://community.hubspot.com/u/Adesignl)\
**Post date:** [August 9, 2021, 3:13pm UTC](https://community.hubspot.com/t/lazy-load-cta-images/39331/2 "2021-08-09T15:13:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Mark\_Ryba](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mark_ryba/32/22744_2.png) [@Mark\_Ryba](https://community.hubspot.com/u/Mark_Ryba)\
**Post date:** [August 9, 2021, 7:49pm UTC](https://community.hubspot.com/t/lazy-load-cta-images/39331/3 "2021-08-09T19:49:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Adesignl](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/adesignl/32/27362_2.png) [@Adesignl](https://community.hubspot.com/u/Adesignl)\
**Post date:** [August 9, 2021, 8:18pm UTC](https://community.hubspot.com/t/lazy-load-cta-images/39331/4 "2021-08-09T20:18:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Bortami](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bortami/32/221350_2.png) [@Bortami](https://community.hubspot.com/u/Bortami)\
**Post date:** [September 24, 2021, 5:46pm UTC](https://community.hubspot.com/t/lazy-load-cta-images/39331/5 "2021-09-24T17:46:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SeanHenri](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/seanhenri/32/81668_2.png) [@SeanHenri](https://community.hubspot.com/u/SeanHenri)\
**Post date:** [December 5, 2021, 11:32am UTC](https://community.hubspot.com/t/lazy-load-cta-images/39331/6 "2021-12-05T11:32:02Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/b/ebe4d37bb724824df52440d0eee4ac3da62858eb.png)

---

<div class="post-metadata">

**Author:** ![JBonham](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jbonham/32/52876_2.png) [@JBonham](https://community.hubspot.com/u/JBonham)\
**Post date:** [February 1, 2022, 2:14pm UTC](https://community.hubspot.com/t/lazy-load-cta-images/39331/7 "2022-02-01T14:14:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Adesignl](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/adesignl/32/27362_2.png) [@Adesignl](https://community.hubspot.com/u/Adesignl)\
**Post date:** [February 1, 2022, 10:17pm UTC](https://community.hubspot.com/t/lazy-load-cta-images/39331/8 "2022-02-01T22:17:56Z")

</div>

I made a Lazyloading CTA Module: [Blocks - Lazy Loaded Call to Action](https://blocks.adesignlink.com/blocks-lazy-loaded-call-to-action?hsCacheBuster=9720)

---

<div class="post-metadata">

**Author:** ![ZItani](https://avatars.discourse-cdn.com/v4/letter/z/9de0a6/32.png) [@ZItani](https://community.hubspot.com/u/ZItani)\
**Post date:** [September 27, 2022, 2:05pm UTC](https://community.hubspot.com/t/lazy-load-cta-images/39331/9 "2022-09-27T14:05:13Z")

</div>

Lazyload forms and CTA please HubSpot

---

<div class="post-metadata">

**Author:** ![IRietveld](https://avatars.discourse-cdn.com/v4/letter/i/9f8e36/32.png) [@IRietveld](https://community.hubspot.com/u/IRietveld)\
**Post date:** [August 11, 2023, 1:15pm UTC](https://community.hubspot.com/t/lazy-load-cta-images/39331/10 "2023-08-11T13:15:29Z")

</div>

@hubspot is this on the roadmap already?

Just as lazy loading for video images, images in blog cards and more modules?  
It would help al lot to improve websitepages.
