CRM

DCDSK
Member

Hubspot web form integration scripts slowing WordPress website speed drastically

SOLVE

Hi All, 

 

When integrating Hubspot web forms with my WordPress site, doing so has drastically slowed the load speed of my site, especially when viewed on mobile browsers (adding 11 seconds to the load time, which makes using it untenable unless we can fix the issue). 

We believe the issues is that the scripts which generate the web forms can't be deferred. Is there a solution to deferring the form scripts, that will help speed up the load time of the site before the Hubspot forms are loaded?

Or are there other items we can try?  Have scoured through the community, found a few somewhat similar issues but those fixes did not help. 

Thank you! 

1 Accepted solution
Mike_Eastwood
Solution
Key Advisor | Gold Partner
Key Advisor | Gold Partner

Hubspot web form integration scripts slowing WordPress website speed drastically

SOLVE

Hi @DCDSK 

 

Haven't tried WP Rocket yet. 

 

We host all our sites on WP Engine so we get a good head start. This link gets you 3 months free hosting if you want to try it (yes, we're a WP Engine Agency too).

 

We have susbscription for WPMU and so I tried their Humingbird Pro Plugin and was very disappointed, uninstalled. The Smush Pro is worthwhile but their free version isn't very free at all. Also, I've used – and really impressed with – EWWW for image compression.

 

So then I moved to Autoptimize and got great results on GT Metrix.

 

Have fun

Mike

 

View solution in original post

10 Replies 10
Albusis
Contributor

Hubspot web form integration scripts slowing WordPress website speed drastically

SOLVE

Lazy load the form then!

Or in other way postpone loading it. 

Use a simple inline script and render form either lazy, or after a while. It improves performance greatly, from Google Lighthouse you completely remove form-loading scripts, ReCaptcha, and form-loading. We just decreased the loading speed times by 8 seconds simply by lazy loading forms (each form slowed the page by 4 seconds!).

This is the script I created for a client.

 

 

 

<script>
  // Function to load the HubSpot form
function loadHubSpotForm() {
    var formContainer = document.getElementById('ID_Of_Place_Where_Form_Renders');
    var rect = formContainer.getBoundingClientRect();

    // Check if the form is within the viewport
    if(rect.top < window.innerHeight && rect.bottom >= 0) {
        // Create and append the HubSpot script
        var hsScript = document.createElement('script');
        hsScript.async = true; // Load script asynchronously
        hsScript.src='//js-eu1.hsforms.net/forms/embed/v2.js';
        hsScript.onload = function() {
            hbspt.forms.create({
                region: "Your_Region",
                portalId: "Your_Portal_ID",
                target: '#ID_Of_Place_Where_Form_Renders',
                formId: "Form_ID"
                
            });
        };
        document.body.appendChild(hsScript);

        // Remove the event listener once the script is loaded
        window.removeEventListener('scroll', loadHubSpotForm);
    }
}

// Add scroll event listener to load the form
window.addEventListener('scroll', loadHubSpotForm);

// Also check immediately in case the form is already in view on the initial page load
loadHubSpotForm();

</script>

 

 

 

This is a simple version that I cleaned from other things we wanted the script to do. 

The form will load lazy, so when the user scrolls on the page enough to reach it. On my end, longer forms take a fraction of a second to load, and for the smaller forms I don't even notice the loading and it looks like it was always there. 

And similarly, you can make it load right after the page loads, or you can make it load on click (and have a placeholder image that looks like a form or other nice image). 

 

This answer applies to external sites. If you need to do this in HubSpot CMS, the code slightly differs. I already answered a similar problem on a question with CMS in mind here. 

https://community.hubspot.com/t5/Blog-Website-Page-Publishing/Speed-of-Forms-loading/m-p/440443/thre...

If you have trouble making it work, don't be afraid to reach out to me (honestly, as an Upwork freelancer I appreciate every project coming my way). 

0 Upvotes
1590127
Participant

Hubspot web form integration scripts slowing WordPress website speed drastically

SOLVE

Hello! Can you please share if this problem has been addressed? I am having the same issue, Hubspot SEO tool points out to its own embedded form as a main reason my site is loadig slow (shopperations.com - see Get Demo pop up forms all throughout the site). I am told that the forms load right away, can they be delayed?

0 Upvotes
bobbydilley
Participant

Hubspot web form integration scripts slowing WordPress website speed drastically

SOLVE

We're having a similar issue at https://netcraft.com/request-trial - the form code makes 3 or 4 requests to https://forms-eu1.hsforms.com each of these taking more than 1 second to respond!

 

We'd be interested to know of anyone that has managed to solve this issue?

0 Upvotes
Mike_Eastwood
Key Advisor | Gold Partner
Key Advisor | Gold Partner

Hubspot web form integration scripts slowing WordPress website speed drastically

SOLVE

Hi @bobbydilley 

 

You HubSpot Forms look optimised so it would be hard to get better performance (law of diminishing returns).

 

Could be worth having a look at how the fonts are loaded based on the Page Speed Insights.

 

Have fun

Mike

 

JCoast
Participant

Hubspot web form integration scripts slowing WordPress website speed drastically

SOLVE

We are having the same issue. HubSpot's resources are taking up nearly 70% of our load time, for just a contact form. This is on our home page. Is there a way to defer this from loading? 

 

JCoast_0-1623769970004.png

 

Mike_Eastwood
Key Advisor | Gold Partner
Key Advisor | Gold Partner

Hubspot web form integration scripts slowing WordPress website speed drastically

SOLVE

Hi @DCDSK 

 

Completely agree – the HubSpot Scripts aren't fully optimised for WordPress.

 

I've had good results with the Autoptimize WordPress Plugin.

 

BEWARE the plugin has some agressive (in a good way) compression techniques.

 

Please, please, please backup before you install the plugin. And, make sure you test everything thoroughly after tweaking the settings.

 

Have fun

Mike

DCDSK
Member

Hubspot web form integration scripts slowing WordPress website speed drastically

SOLVE

Hi @Mike_Eastwood,

 

Thank you for the advise. However, we already have WP Rocket installed which is kind of the same as what autooptimize does.

 

Would you think it will make a difference using autooptimize over WP-Rocket?

 

Thanks in advance!

 

Mike_Eastwood
Solution
Key Advisor | Gold Partner
Key Advisor | Gold Partner

Hubspot web form integration scripts slowing WordPress website speed drastically

SOLVE

Hi @DCDSK 

 

Haven't tried WP Rocket yet. 

 

We host all our sites on WP Engine so we get a good head start. This link gets you 3 months free hosting if you want to try it (yes, we're a WP Engine Agency too).

 

We have susbscription for WPMU and so I tried their Humingbird Pro Plugin and was very disappointed, uninstalled. The Smush Pro is worthwhile but their free version isn't very free at all. Also, I've used – and really impressed with – EWWW for image compression.

 

So then I moved to Autoptimize and got great results on GT Metrix.

 

Have fun

Mike

 

kennethbrenes
Contributor

Hubspot web form integration scripts slowing WordPress website speed drastically

SOLVE

Same problem here, question: instead of use the embed HS forms, might be a good idea to use the HS API forms?

Mike_Eastwood
Key Advisor | Gold Partner
Key Advisor | Gold Partner

Hubspot web form integration scripts slowing WordPress website speed drastically

SOLVE

Hi @kennethbrenes 

 

Can you share your website URL? (here or in a private message).

 

I will run it through Page Speed Insights and see if I can help you.

 

Cheers

Mike