We are optimizing our website by using delay and defer js. When we try to delay the hubspot js, the form is not showing in the front end. We want to add it on the delay js list because it cause alot of loading time when we do a speedtest on our website.
This is very vague and a bit hard to understand the exact intent per lack of MVP and verbiage.
I’m assuming what you meant is:
You are doing something along the lines of deferring the core hubspot scripts - either via manual inclusion of each script or the hubspot script loader itself. Again, can’t say much of anything per lack of MVP as there is fundamentally no represented code and DOM structure to go off of.
You listed this under apis and integrations, so I have no idea if this is a HubSpot CMS site or external embed with form scripts …
Regardless, I’ll assume the prior and go off a standard hubspot site which you can translate
That being said … Those scripts find the DOM structure (look at the output of the form modules …) and then inject the forms asynchronously as I am sure you are aware of.
If you just want to delay forms for performance (a good idea given the very poorly optimized HubSpot scripts / bundles) … Then there is a better way to do this:
1) You can load it async, but is that performance? Or, just bad perceived performance? You’re just loading bloat you potentially don’t need - albeit slightly delayed to make Lighthouse scores happy - and I don’t rank that as performance. At all, whatsoever. I really detest this as the “modern” way of making websites performant that is seemingly standard now.
2) You could actually load it on demand and not load unnecessary bytes until it’s actually needed. There’s a nifty IntersectionObserver for that which would load things on demand.
I do this myself - and I’m not giving you the solution. Figure it out. Here’s some pseudocode.
So, why can’t you just
Make your own form elements / module that doesn't do bad loading:
-- make a div w/ dataset tracking the form guid / id for loading below
Make an Intersection Observer:
-- new IntersectionObserver(track elements above with selector of choice)
-- when in view (per conf options on observer) you know you need to load the script
Dynamically load: //js.hsforms.net/forms/v2.js
-- add a callback to the load once completed / readystatechange / whatever
Now we need to actually load the form from HubSpot's side asynchronously:
window.hbspt.forms.create({
form configuration options
})
That being said, your performance ops will largely be in vain if you decide to throw a chat widget / bubble on your website at any point given that there is next to zero way to facade that element effectively and as such your mobile scores will drop significantly.
Edge case: What about above the fold forms? You need to handle those also. Also possible
Thanks for your reply NBrown67
We are embeddging a husbpot form in our external website.
Any easier way to fix the loading speed of the hubspot code?
You’re still lacking an MVP - you need to post the exact code with all modifications you have made for anyone to help you.
That being said:
> easier way to fix X
engineering is generally not susceptible to quick fixes
> with delay / defer
If you meant you took the embed snippet above and simply added a “defer” to the script … When you defer something that doesn’t mean it loads immediately and that you can successfully execute non-loaded code in current sequence
> error
Have you pulled up the DevTools? Inspected the issue? Etc. That should give you insight and lead to an amenable solution.
Hi @VPang,
Could you please include your JavaScript code here?
Hi @VPang,
Could you please share the JavaScript code with the delay you mentioned?