topic Speed of Forms loading in Blog, Website & Page Publishing

Speed of Forms loading

andrew19 — Mon, 24 May 2021 19:45:14 GMT

I had created a number of new pages for our series of videos and added forms to collect user data. Then when using the HubSpot seo tool noticed that the speed performance of these pages was being significantly impaired.

My initial thoughts was the performance issues was due to video's but on investigation found that it was the performance of the forms. It increases the Total Blocking Time (TBT) by 4 to 6 times.

I am using the standard forms module, has anyone seen this and how can I make them performant?

Re: Speed of Forms loading

PamCotton — Tue, 25 May 2021 23:03:08 GMT

Hello @andrew19 , thank you for posting in our Community!

Wanted to share some possible causes outlined here.

Also, can you confirm that you've tried clearing the browser history, download history, and Cached images and files from All Time? If not, please try this and let me know how this goes. Here are the steps for clearing your cookies and cache in Chrome.

Other steps for you to try:

Try Incognito Mode
Reset Browser Settings
Remove Incompatible Adds-on, Plugins, Extensions
Update/Reinstall Google Chrome

I hope that information helps.

Kindly,

Pam

Re: Speed of Forms loading

andrew19 — Wed, 26 May 2021 13:40:39 GMT

Hi Pam

The issues are not within the browsers of my computer/s. The issues are being reported by the HubSpot SEO tool and by the Google PageSpeed Insights tool.

By removing the HubSpot Form from my video pages the speed index, for a mobile, jumps from 30 to ~60 it could still be improved but the Form has significantly impacted the page performance.

I have looked at the Knowledge article and had already set the video's not to autoplay.

There are other items detailed such as using SVG images. I have looked into this but when I convert my images to SVG they are not readable. So I am converting images to WEBP, which does, in the main, significantly reduce the sizes of the images and has provided some performance gains.

I have looked into different image formats for video thumbnails but you can only upload JPEG, GIF or PNG.

The critical issue I need to solve is the Form loading performance, which based on the tool's feedback is shocking.

Are their alternative Form modules, which resolve this?

Thanks

Andrew

Re: Speed of Forms loading

webdew — Fri, 28 May 2021 08:11:44 GMT

Hi @andrew19 ,

Do you know if you are looking at the SEO recommendations in HS or Google? I found this Google article which details the Total blocking time - https://web.dev/lighthouse-total-blocking-time

TBT measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses. Essentially this is a stat that tracks how much time it takes for the page to fully load.The more features that you add to your website such as form, more resources are required which can cause this loading time to increase.

Based on this explanation, it seems like Total Blocking Time is highly correlated with JavaScript performance (which is used by forms), and any improvements to JavaScript execution are likely to reduce your TBT. I've looked into this for you. Currently, there isn't a way to modify the HubSpot script that enables HubSpot features added to your site. If you want to improve your page load, you would need to improve the page's overall optimisation. As per your page speed insights, I'd recommend working with a developer to find ways to optimise your other scripts loading on your page. You can access the learn more resource from web.dev here to explore ways to improve and optimise your scripts.To help you in this, I've attached some guides on how to optimize a user's sites for speed too using the features of the HubSpot CMS :

Site Speed and Performance: What you can do, and How HubSpot Helps
12 Tips to Speed Up Your Website
How to reduce your website page speed
Understand page load time for your site

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

Re: Speed of Forms loading

andrew19 — Fri, 28 May 2021 10:49:07 GMT

Hello Webdew

Thank you for your comprehensive answer, which details the problem exactly and confirms my thoughts that Forms do have a speed issue.

I am looking into other possible ways to improve the performance of my pages.

Critically, I have had to removed Forms from all my web pages and restrict them to only be used on our Landing pages, where apart from the Form they are very light and not much more I can do to improve their performance, other than restricting the number of collected fields on the Form.

Your response does provide the technical answer to my question and clarifies the problem, but doesn't provide a resolution to the performance of the Forms.

I will link your answer to the support ticket I have open with HubSpot and will keep you informed of the progress.

Thanks

Andrew

Re: Speed of Forms loading

andrew19 — Tue, 08 Jun 2021 08:41:49 GMT

Hello Webdew

Thank you again for your answer.

I have followed up on my support ticket on the performance of the Forms and as per your notes, there is no option to improve these. I have been informed that the option available is you create an API Form as these, unlike the Standard Forms module, will not have a performance issue?

This however does mean I will need a developer to help with this.

Thanks

Andrew

Re: Speed of Forms loading

jamieroyce-mc — Wed, 28 Sep 2022 15:25:23 GMT

Hi Andrew, I'm curious what you mean by "create an API Form". Do you mean use a form like "Gravity Forms" that has a REST API to then update Hubspot on each entry? Or is there some other feature in Hubspot to set up API Forms?

Re: Speed of Forms loading

andrew19 — Wed, 28 Sep 2022 15:51:20 GMT

Hello Jamie
Please note I am not a developer but my understanding is you build the form external to HubSpot and use the API's available to push the data from your form into the HubSpot database.
This enables you to build a much lighter-weight webpage to improve the response of your pages.
An example is the Typeform module offered by typeform.com
It is far too expensive an option for the volume of forms we need to process but you should look at it as it is a very nice-looking product.
You also need to look at what version of theme you are using. e.g. was it released before March 2020 or after that date as it also has an impact on the performance
Thanks
Andrew

Re: Speed of Forms loading

Albusis — Thu, 30 Nov 2023 15:57:36 GMT

Lazy load the form then!

Or in other way postpone loading it.

What you need is to have a marketing hub professional or higher. Set form as raw HTML, so it accepts external styling, and then use a simple inline script that accepts form ID as a parameter from HuBl 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.

This is a simple version that I cleaned from other things we wanted the script to do, but basically, this will allow the user in the page editor to select the form he wants without touching the script. Don't forget to inline it, if you put it into the JS section of the module, it won't work.

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).

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).

Re: Speed of Forms loading

andrew19 — Wed, 06 Mar 2024 18:24:09 GMT

Hi Albusis

Your idea sounds interesting but we don't have marketing hub professional!

We have CMS Hub Professional and Marketing Starter

Thanks

Andrew

Re: Speed of Forms loading

Albusis — Wed, 06 Mar 2024 20:18:48 GMT

Hello Andrew,

well, that might be an obstacle. Do you have on your forms an option to make them raw HTML? If so, you're set.

Dalibor

Re: Speed of Forms loading

andrew19 — Fri, 05 Apr 2024 08:33:15 GMT

Hi @Albusis

Though your idea sounds interesting we are not developers.

Consequently, we are now looking to use TypeForms to solve the issue as they have greater flexibility.

Thanks

Andrew

Re: Speed of Forms loading

JMcAulay1 — Sat, 01 Jun 2024 21:25:12 GMT

This is genius, thank you so much for the idea! Hubspot was slowing my PageSpeed / Core Vitals down a lot, this has fixed that.

One suggestion though, replace the scroll listener with an intersection observer, it's a little more performant than a scroll event listener:

Re: Speed of Forms loading

UGC_at_Scale — Tue, 20 Aug 2024 17:00:54 GMT

Hey Andrew,

Did you ever resolve this? We have the same issue on our site below and still need to be able to fix it.

Video co-creation and UGC

Re: Speed of Forms loading

andrew19 — Tue, 20 Aug 2024 17:34:49 GMT

Hey Gazan

simple answer is no

there are some technical suggestions in the history of this discussion which you may want to review.

Also since I realised this issue the cost of TypeForms has become a lot more affordable which you might also want to look at

thanks

Andrew

Re: Speed of Forms loading

Albusis — Tue, 20 Aug 2024 19:26:46 GMT

Hello @UGC_at_Scale , did you try my solution that is part of this threat?