Blog, Website & Page Publishing

andrew19
Colaborador(a)

Speed of Forms loading

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?

 

10 Respostas 10
Albusis
Colaborador(a)

Speed of Forms loading

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.

 

<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: "HubL_For_Module_With_Form_Submodule_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, 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). 

0 Avaliação positiva
andrew19
Colaborador(a)

Speed of Forms loading

Hi Albusis

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

We have CMS Hub Professional and Marketing Starter

Thanks

Andrew

 

 

 

0 Avaliação positiva
Albusis
Colaborador(a)

Speed of Forms loading

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

0 Avaliação positiva
andrew19
Colaborador(a)

Speed of Forms loading

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

jamieroyce-mc
Colaborador(a)

Speed of Forms loading

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? 

0 Avaliação positiva
andrew19
Colaborador(a)

Speed of Forms loading

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
0 Avaliação positiva
webdew
Orientador(a) | Parceiro Diamante
Orientador(a) | Parceiro Diamante

Speed of Forms loading

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 :

 

andrew19
Colaborador(a)

Speed of Forms loading

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

0 Avaliação positiva
andrew19
Colaborador(a)

Speed of Forms loading

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

PamCotton
Gerente da Comunidade
Gerente da Comunidade

Speed of Forms loading

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

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !