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?
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?
+6- Certified Partner & Champion
- 5257 replies
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?
+5Life is a series of awkward moments separated by snacks.
1 person likes this
+6- Certified Partner & Champion
- 5257 replies
If your third coffee of the day is not helping you with your Typeform, maybe we can help you find your answers...
+5Hello
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.
+5Hello
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.
1 person likes this
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.