Typeform loading speed and mobile scrolling

Tagging @mathio for some help with this!

I’ve been messing around with things and scrolling seems to work sometimes now, but it’s not consistent and neither is load speed.

Can someone just take a look at our survey and see if there’s something we can do to fix and update it?

It looks like it might be a chrome issue for mobile. Still seeing really long lag times.

@mathio no update on this? Our marketing campaigns are having major performance issues right now because of this.

@trace - try taking a look the form through a performance checker like gtmetrix dot com 

i did this text through the hotspot on my cell phone and got the results for your url as follows:

i ran your form and one of mine in comparison to see if there was anything that ‘comom’ between two forms 

you’ve got 6.5MB of total page size (due to graphics most likely) that seems to be causing the performance issue.

suggest running a test - duplicate the form and remove the big image on the front page. and try the metrix software for loading. from your website url 

try the metrix eval straight to the typeform without going through your website - measure current and the ‘image reduced’ version for speed, 

(if you have something like WireShark to test the latency that might help too.. ) 

may find some things that can help to speed it up.. 

just some thoughts

des

Thanks John, this is really helpful. I’ve removed that image and also simplified the logic and the performance is bace up in the 65% range. I’m curious, is the speed / complexity thing being worked on by typeform for the future?

@trace - that’s a question for the ‘deep tech geeks’ (my own description of the folks who are deep under the hood of the egines at typeform) who might be able to comment. 

BUT big images take a long time to render regrardless of what platform.. and then they have to cross the vagaries of the interwen to your device.. what sort of bandwidth, traffic etc Ilatency) in the nework exists between the SaaS servers of Typeform and our devices? and what’s the throughput? is it throttled by our connections, routers, etc.. I have a TB line over fibre to the office but it gets stepped down from the panel through the modem over the wife to my laptops and phone…. different load speeds likely for everyone.. 

at least with wireshark or something similar you can see the path and where the latency is in transit. 

compressing the images will reduce load times etc. 

this is also an issue that many data-intensive analytics platforms have to deal with as well - rendering a complex dashboard of kpi’s and metrics can take a while longer based on the rendering of the dashboards and those are not as high-def as the pics you had.. there’s going to be some trade off.. somewhere.. 

des

Hello @trace , sorry for the late response, I was out for vacation 🏖️

As @john.desborough mentioned above using images is always a tradeoff between size and quality. We try to find the best balance.

When trying to debug if there is any issue with your typeform or your website / embed, you can always try opening your form directly via URL. In your case: https://form.typeform.com/to/psZrS2Mn

I opened your form directly and it loads about 800KB of data. There are no images that would be too large. It loads in about 1 second.

When I load your page, it loads about 2MB of data. I also noticed there is about 10 second delay between when your page loads (it displays just a blank page) and when it starts loading any JavaScript files in your page (including Typeform Embed SDK, but also other files).

The size of your website nor the size of your typeform should not cause any issues unless using a really slow internet connection.

In the screenshot from Chrome DevTools you can see there is a delay after favicon.png is loaded and before jquery.min.js starts to load (see the “Waterfall” column on the right or try it yourself using DevTools in your browser):

In your page I can see the Typeform embed code looks like this:

<script src="//embed.typeform.com/next/embed.js" type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1"></script>

I think those might be the most likely source of your issue. Can you remove the additional attributes? I am not familiar with them, but it looks like they might be added by Perfmatters plugin (it looks like you might be using this, right?). There is an article on excluding scripts from being delayed: https://perfmatters.io/docs/javascript-console-errors/

Hope this helps. Cheers.

Thanks for the help here guys! I’m not super technical but I’ll see if I can figure out a way to decrease the amount of content loading or just use the direct link to typeform.

Thank @mathio , I’ve started running a test with the landing page hosted by typeform and it performs better, I’m getting significantly more survey responses, however, because it’s not hosted by our website it’s also running into errors in google ads and we are having a harder time tracking conversions.

I’ve removed the perfmatters plugin from the webpage for our original landing page, but performance is still not at the level of the typeform hosted website. Perhaps I’m sitll doing something wrong?

I could probably figure out a way to just use the typeform hosted landing page, but I’d need to figure out how to gather form data from Google Ads to match them back to conversions on the backend, but doesn’t seem that I can grab the email or other contact info for matching

I just tested your website at it looks like the form is loading fast. Did you manage to resolve your issue?

It’s looking better, but it’s just inconsistent. Sometimes it’s really fast, sometimes it’s slower and scores poorly. The Typeform hosted one just generally seems to do better, but we’ll work with it as is.

Thank you!

@mathio  shoot, I realized what the problem is. The button to take the quiz doesn’t work on mobile browsers when it’s embedded in our website, the button isn’t showing for some reason. However, on the form hosted by typeform the button is showing. Do you have any idea why this is happening?

Image on mobile that’s embedded into the website

Image straight from the tyepform hosted website

I changed the title page to a “quote” format instead of a “welcome screen” in hopes that it fixes things, but this feels like a major issue from the mobile experience perspective

Ok, last thing I’ll bother you guys about. I’m trying to eliminate plugins from our website for faster loading speed and when I try to embed the typeform survey into the website without any additional plugins, I’m getting an error (the response is not a valid json response). I even get this when I use the typeform plugin as a base and just paste the link.

Thoughts?