Question

We have embedded a Typeform onto our mobile landing page and the loading speed and page performance has dropped to 20%. How can we improve this?

  • 12 January 2024
  • 8 replies
  • 93 views

We have embedded a Typeform onto our mobile landing page and the loading speed and page performance has dropped to 20%. How can we improve this?

 

 


8 replies

Userlevel 7
Badge +6

@Palk try taking a look the form through a performance checker like gtmetrix dot com and look at the results … it will tell you a lot of info about the page and what might be causing some of the slowness. 

 

cheers

 

des

Done that already mate. The cause is 100% the Typeform. 

 

it’s showing Typeform as the top cause of all of these. Any ideas on how we can improve it?

Userlevel 7
Badge +5

@mathio might have some insight on this! Could you share the URL where you have the form embedded, @Palk ?

Userlevel 7
Badge +6

@Palk - how image intensive is the form? i see a lot of time associated there.. 

 

des

Userlevel 7
Badge +5

Hello @Palk it is hard to tell without a link to your website with the typeform. Would you mind sharing it with us? Thanks.

Hey @mathio ,

 

here is a link https://www.theprofs.co.uk/tutors-lp/.

 

Many thanks,

 

Pal

Userlevel 5
Badge +5

By default Typeform, loads synchronously, which is why you see render-blocking resources.

<script src="//embed.typeform.com/next/embed.js"></script>

 

Here is what the browser does:

1. Connect to embed.typeform.com to retrieve the script.
2. Parse the script
3. Realise it must open another connection to form.typeform.com (another subdomain, therefore another HTTPS connection to open)
4. Then it starts to load your form and must open a 3rd connection to renderer-assets.typeform.com

 

The fastest way to fix this is to load TF async:

<script src="//embed.typeform.com/next/embed.js" async></script>

Please note though that:
1. it may cause issue with the height / width, which shall be fixed in advanced by tweaking your CSS file.
2. it will slow down the Typeform loading

 

To compensate point 2, you could add the following lines in the <head> part of your page (only on the page where you load typeform). The first line prefetch the script that will be needed, and the last two preconnect to the two other TF subdomains that are required to load/render the form.

<link rel="prefetch" href="//embed.typeform.com/next/embed.js">
<link rel="preconnect" href="//form.typeform.com">
<link rel="preconnect" href="//renderer-assets.typeform.com">

 

An alternative could be to directly load the form into an IFRAME. But as this is not an embed method recommended by Typeform and can cause some features not to work anymore, I am not going to elaborate.

Userlevel 7
Badge +5

Hello @Palk 

I see a “sorry - page not found” when I follow your link. The page does not contain any embedded typeforms.

What type of embed embed are you using? If you are using widget embed, you can try lazy loading the form - see details in my older blog post here.

For other embed types the form is loaded only when opened (usually on user click) and should not affect initial page load. If the lazy load does not help, you may alternatively embed your form as a popup.

Reply