Hubspot web form integration scripts slowing WordPress website speed drastically
lösung
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.
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.
Nov 30, 202310:58 AM - bearbeitet Nov 30, 202311:03 AM
Mitwirkender/Mitwirkende
Hubspot web form integration scripts slowing WordPress website speed drastically
lösung
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.
Hubspot web form integration scripts slowing WordPress website speed drastically
lösung
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?
Jun 15, 202111:14 AM - bearbeitet Jun 15, 202111:14 AM
Teilnehmer/-in
Hubspot web form integration scripts slowing WordPress website speed drastically
lösung
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?
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.