I am having a little trouble getting the 'defer' attribute to work with my embeded HubSpot CTA. In a lighthouse audit, a few seconds are wasted loading the HubSpot CTA. Here is the code:
I understand that CTA's act as normal images and was also informed by a HubSpot Customer Service member that the JS might be places in the code when embeding on an external website. Because of this reason will the in-line html not coroperate with the CTA?
5. I wrote that little jQuery script that is loaded in the bottom of the website (also with defer attribute)
$(window).bind('load',function(){
$( 'span.hs-cta-node' ).each(function( index ) {
var c2aid = $( this ).prop('id').substring(7);
hbspt.cta.load(YOURHSACCOUNTID, c2aid, {});
});
});
This script is executed, when everything else is loaded. This is okay for me. It goes through all span tags that have the hs-c2a-node class, catches it´s ID, removes the "hs-cta-wrapper-" part and runs the execution script that we removed before from the inline scripts.
Furthermore, I removed the conditional IE statements from the HTML codes to get more performance and added the loading="lazy" attribute to the call2action image tag.
Works like a charm for me.
I hope it helps other users and SEO nerds like me here. 😄
5. I wrote that little jQuery script that is loaded in the bottom of the website (also with defer attribute)
$(window).bind('load',function(){
$( 'span.hs-cta-node' ).each(function( index ) {
var c2aid = $( this ).prop('id').substring(7);
hbspt.cta.load(YOURHSACCOUNTID, c2aid, {});
});
});
This script is executed, when everything else is loaded. This is okay for me. It goes through all span tags that have the hs-c2a-node class, catches it´s ID, removes the "hs-cta-wrapper-" part and runs the execution script that we removed before from the inline scripts.
Furthermore, I removed the conditional IE statements from the HTML codes to get more performance and added the loading="lazy" attribute to the call2action image tag.
Works like a charm for me.
I hope it helps other users and SEO nerds like me here. 😄
I am interested in your solution, I am wondering if you also remove the script from the CTA code
https://js.hscta.net/cta/current.js
The issue I am having is that if 3-4 buttons are on the same page it will load the JS multiple times (Wordpress site), unfortunately the Hubspot plugin doesn't have shortcodes for the CTA and only for the forms, so the forms are fine loading the JS once; however, with the buttons is giving me issues with the JS. I am trying to find the best solution to load the buttons without issues because also I am getting hit by Google PageSpeed Insights of loading the JS 3-4 times and also issues with the CLS in mobile because the content shifting but in this case the issue is because the Hubspots CTA load after the content so it shifts or pushes the content down/up for a second so google is detecting that. Just wondered if you had similar issues.
Does the CTA JS still work when you're deferring that script tag? I think I would expect the JS to not work at that point. The default CTA embed look something like:
So the first script tag loads current.js, which I think is what enables you to use hbspt.cta.load() . And by default, that JS fires immediately after current.js loads. By adding the defer attribute to the first script tag, you're deferring it to execute after the HTML is parsed, meaning that 2nd script tag will have already executed. I'd expect an error like hbspt is not defined. Because the 2nd script tag would try to execute hbspt.cta.load() , but you've deferred the 1st script tag to load after all the HTML is parsed, so hbpst isn't defined yet.
I'd compare the HTML between when you're deferring the 1st script tag and when you let it load normally. I think the markup will look a bit different, and the JS from the CTA embed is probably not working.
I'd also suggest testing out some of the loading times doing your own testing. I don't think it should be taking 2+ seconds. In some testing I did just now, it finished in under 200 milliseconds. If you want to link your page, I'll be happy to take a look though.
.png "HubSpot Alumni"){kind=icon}
