async javascript use in hubspot form

Develop, Build & Integrate APIs & Integrations
1

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.

2

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

3

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
})
4

Hi!

Fun thing is, if you do NOT use the standard header includes tag in your template, it’s still loaded. :sweat_smile:
Best,

5

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

6

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.

7

Still in need of this! Any update?

8

Are there any updates to this yet.