async javascript use in hubspot form

[ashadabbas15]

I want the hubspot forms to use async method or can we perform lazyload on hubspot javascript file , so that we can reduce the load time
help me ! how we can do that

files I am talking here are like forms/v2.js, leadflow.js.
these file always load when we open a website not depending on whether user submit a hubspot form or not.

[piersg · Accepted solution]

I'm not sure this is possible sadly. Normally you would use the async or defer attribute on script tag, however, because these scripts are part of the standard_header_includes so you obviously can't do that.

You could add defer to the script tags as their added to the DOM using MutationObserver, but I'm not sure that's a good idea/may slow your page down.

const observer = new MutationObserver(mutations => {
    mutations.forEach(({ addedNodes }) => {
        addedNodes.forEach(node => {
            // For each added script tag
            if(node.nodeType === 1 && node.tagName === 'SCRIPT') {
              // Adds defer attribute to the script tag in Safari, Chrome, Edge & IE
                node.setAttribute('defer', 'defer');
            }
        })
    })
})

// Starts the monitoring
observer.observe(document.documentElement, {
    childList: true,
    subtree: true
})

[SLovejoy]

Are there any updates to this yet.

[Jere]

Still in need of this! Any update?

[SLovejoy]

Any updates on this from anyone at Hubspot?

There still appears to be no way around the large .js scripts that are damaging site pagespeed performance.

[stefen · Accepted solution]

@ashadabbas15 I would post this to the ideas board, it's something HubSpot would have to implement on their side.

[piersg · Accepted solution]

I'm not sure this is possible sadly. Normally you would use the async or defer attribute on script tag, however, because these scripts are part of the standard_header_includes so you obviously can't do that.

You could add defer to the script tags as their added to the DOM using MutationObserver, but I'm not sure that's a good idea/may slow your page down.

const observer = new MutationObserver(mutations => {
    mutations.forEach(({ addedNodes }) => {
        addedNodes.forEach(node => {
            // For each added script tag
            if(node.nodeType === 1 && node.tagName === 'SCRIPT') {
              // Adds defer attribute to the script tag in Safari, Chrome, Edge & IE
                node.setAttribute('defer', 'defer');
            }
        })
    })
})

// Starts the monitoring
observer.observe(document.documentElement, {
    childList: true,
    subtree: true
})

[Sjardo]

Hi!

Fun thing is, if you do NOT use the standard header includes tag in your template, it's still loaded. 😅

Best, 

[natsumimori]

I will tag in subject matter experts here: @piersg and @stefen, are you familiar with this topic?

@ashadabbas15  Meanwhile, I wanted to share this resource: 3 Simple Steps to Create Lazy Loading Images In HubSpot