Google PageSpeed score is being negatively affected by HubSpot network requests

[nstoffel]

Our Google PageSpeed score is being negatively affected by hubspot network requests.

Though these scripts are being loaded defered and async, they still are calculated into the overall page load times for Google's metric. 

1.) Can anything be done to lighten these, or at least follow the guidelines Google is asking for for a better user experience?

2.) Can you put a cache policy onto the below static assets? Google suggests "Cache-Control: max-age=31536000".  If you need to update these resources, why not use a url revision query?



3.) If your chatbot needs to download 6 fonts, at least use the font-display css value of "swap" so that it can use a system font until the fonts are fully loaded.

4.) It's time to get jQuery removed as a dependency. It's used for the chatbot, and the forms embed script callbacks as it relates to our site. It's added weight we don't need - modern websites and apps are not using it anymore in favor of what javascript can do natively now.  

5.) Can you remove the default styling in the forms embed that is injected into the head of the document?  If I am selecting "Unstyled Form", that's what I should actually get so I can style the forms in my own stylesheet.  This small change would allow me not to have to go to the troulble of rebuilding all my forms using the Forms API.

6.) Because of the chatbot specifically, our site's Mobile pagespeed score is "Slow".  There isn't a way to disable it for mobile, only a hack of using css to hide it which doesn't solve anything - still requests all the above offending resources.

Making these changes or suggesting solutions that work would be a step to helping out those of us concerned with site optimization as it pertains to SEO and overall performance for our users/customers.

Supporting backward compatibility for old browsers and/or hubspot users' legacy code is understandable but those of us utilizing current web standards shouldn't have to suffer. HubSpot is an expensive product to not be at the top of it's game when it comes to these concerns.

Thank you

[ADrake]

I have been struggling for days working on trying to speed up my website, only to find out that it's now hubspot causing this. I really hope this issue gets addressed. I have to disable reCaptcha just to improve scores. I'm worried overall search ranking is going to be hurt because of hubspot. 

[AClow]

Having the same issue. Was wondering why changes to caching weren't making a bit of difference on my site. Turns out it's the HubSpot plugin causing it. Sigh.

[johnnyr209]

This is only for the embed form, it does not include the tracking code. Tracking code is placed elsewere on the page. But good point.

[johnnyr209]

I use waypoints to lazy load the JavaScript and Form Code, seems to work for me.

<div id="colophon" class="site-footer">
	
<script src="/js/jquery.waypoints.js"></script>

<div id="hssubscribecode"></div>

<script>
		var waypoint = new Waypoint({
  element: document.getElementById('colophon'),
  handler: function(direction) {
	  
	const script = document.createElement('script');
	script.src='//js.hsforms.net/forms/v2.js';
	script.setAttribute("charset", "utf-8");
	script.setAttribute("type", "text/javascript");
	document.getElementById("hssubscribecode").appendChild(script);
	  
	 script.addEventListener('load', function() {
    // When script is loaded completely build Hubspot form
    hbspt.forms.create({
	portalId: "PORT_ID",
	formId: "YOUR_FORM_ID"
	});
});
	  this.destroy()
  },
  offset: '70%'
})
</script>
	
</div>

[Hixster]

This is potentially a bad idea. The hubspot scripts do way more than just offer chat or forms, if you're only triggering the script when the user scrolls to the colophon, then there won't be any tracking on your page until the colophon comes into view. This means you'll be missing lots of HubSpot analytics as you'll only have session data for people that scrolled to the footer.

[sandeep4467]

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js" async></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js" async></script>
<script>
jQuery(window).scroll(function() {
    if (!jQuery('.hbspt-form').length) {
        hbspt.forms.create({
            portalId: "PORT_ID",
            formId: "YOUR_FORM_ID"
        });
    }
});

</script>

Use this. Basically we are adding to both async attribute scripts above. And load form on the scroll when the user scroll. You may need to change some logic according to your need. Let me know if I can help you with something. 

[ziadi]

Hi Sandeep, I am a little new to hubspot... where would we use this script? Would it be installed in the template or somewhere in the header of page? 

I was also wondering if : portalID and formID can be dynamic rather than having to manually update the form for each page?

[sandeep4467 · Accepted solution]

You can put it anywhere. I would recommend putting HS lib scripts in the header.

Put it in the header-->

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js" async></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js" async></script>

Then you need to make sure the scroll function should always come after jQuery lib anywhere in your document.

jQuery(window).scroll(function() {
    if (!jQuery('.hbspt-form').length) {
        hbspt.forms.create({
            portalId: "PORT_ID",
            formId: "YOUR_FORM_ID"
        });
    }
});

 And you can easily make dynamic PORT_ID and FORM_ID. Shown below using PHP.

<script>
jQuery(window).scroll(function() {
    if (!jQuery('.hbspt-form').length) {
        hbspt.forms.create({
            portalId: "<?php echo $port_id; ?>",
            formId: "<?php echo $form_id; ?>"
        });
    }
});
</script>

[philipcron]

Do you add this part to the head or body? And obviously, I am guessing you replace the portalId and formId with the forms that I have on my website. Thanks!

jQuery(window).scroll(function() {
    if (!jQuery('.hbspt-form').length) {
        hbspt.forms.create({
            portalId: "PORT_ID",
            formId: "YOUR_FORM_ID"
        });
    }
});

[ziadi]

Thank you so much, that was super helpful!!

[NathanJesus]

hi @sandeep4467.

This type of script realy help to eliminate some problems, but not the most of them. The real problem isn't in what is been loaded on hubspot forms, but in whats is been loaded on hubspot chatbot.

[john3211]

you have to optimize your website errors and issue which are highlighted by google page speed score, after that periodically check the speed of your site and make a monthly report.

[Hixster]

We're experiencing this too. It's an issue.

Neither of the answers supplied correctly understand the issue the orignal poster is having.

The issue is with the code which Hubspot injects into our websites via its plugins - so it is completely outside of the control of the webmaster to make changes to this.

Would be good to see improvements here - we are seeing dramatic performance decline on some of our sites after installing the chatbot and forms.

[jennysowyrda]

Hi @nstoffel,

I wanted to direct you to this thread where I recently shared information and resources around page speed and HubSpot.

I especially want to highlight this resource which discusses HubSpot and site speed in great detail. 

Thank you,
Jenny

[nstoffel]

Thanks but i've already used those methods to optimize my site.

I guess I will have to reach out to support directly to try and get any answers.