Hubspot forms brings Lighthouse Pagespeed from 96 to 80

[icheshire]

How can I fix this? If it was an embedded form, I could just defer it, but it's built into hubspot.

Blocking this forms request (not leadflows, just forms) consistently brought loading time down by at least 10 points.

[Teun]

Hi @icheshire ,

You could try and lazyload the HubSpot form if it is below the fold. That way, the script shouldn't load until the user is scrolling towards the form. I found this post, but haven't tested it myself.
I know you said that it is a HubSpot website, but you could create a custom module and add this functionality instead of using the default form modules (or HubL tags).

The other solution is to not use the HS form at all and simply go for a custom build HTML form and use the form submission API, but it really depends on how much effort you want to put into this.

[icheshire]

Ok - so instead of embedding the form in the CMS, I use hubspot's script as if I was using a non-cms site? Is it possible my script is heavier for some reason, or I'm doing something wrong, or does every CMS site with forms take such a big performance hit?

[Jnix284]

nice find @Teun , will have to test this script out! 

I wasn't sure if @icheshire's  website was hosted on CMS Hub, which has limited options unless you want to create a custom module or API like you suggested.

Our theme has a custom forms module with an option to defer if it is out of viewport, but it uses a different method.

[icheshire]

Yes, I'm using the CMS. What method do you use?

[Jnix284]

@icheshire our solution has to do with how the assets are loading in the theme, it looks like your website isn't built with a theme/DnD, so I'm not sure how you would (or could) implement for the old coded templates.

[icheshire]

I think we use a custom coded theme. Wdym by "old coded templates"?

[Jnix284]

@icheshire I didn't see any dnd (drag-and-drop) areas in the code, which is what themes use to allow the modules to be added to the page directly (not from design tools).

The old coded templates can only be edited on the page, not added/removed.

This is an overview of themes and this is about custom coded templates.

If you're using a theme, you'll edit the styles globally and you would see your themes here in your HubSpot settings:

[icheshire]

I think we're using a theme, since DnD works and I see that section in settings. How would I use your solution in my custom theme?

[Jnix284]

@icheshire there really isn't anything you can do to improve the impact of the forms JS...other than removing the form.

I dont know what page you have the form on to see if it's part of your conversion path, but if it's your home page or other high traffic page, you could replace the form with a high value CTA section that links to a dedicated landing page with the form.

[icheshire]

It's https://www.colearn.com. 

That's a good solution, but I think it wouldn't work too well on something like an email list:

[Jnix284]

true, that wouldn't work so well, you could try using a slide in form instead, but the script for that is about the same.

[icheshire]

What's a slide-in form?

[Jnix284]

@icheshire a type of pop-up form you can configure

https://knowledge.hubspot.com/forms/create-pop-up-forms