Form loads slow the first time, but really fast on subsequent requests, is there a way to prefetch it so it loads fast on first request?

  • keanopro
    Asked on February 15, 2018 at 7:28 AM

    When I load a form for the very first time, it takes between 6-8 seconds for a very simple form (4 elements) to load. After the first load, subsequent loads only take 1-2 seconds.

    Is there a way to prefetch a form from my website so that when the user clicks the link to load the form it only takes 1-2 seconds on the very first load? 

  • Nik_C
    Replied on February 15, 2018 at 9:27 AM

    Do you have any special way of accessing your form here http://www.joeguam.com/your-request since I wasn't able to replicate any huge latency?

    1518704826screencast Screenshot 10

    We'll wait for your response.

    Thank you!

  • keanopro
    Replied on February 15, 2018 at 10:01 AM

    The normal user flow would be:

    Access: https://www.joeguam.com/requests

    ...then click on a song in the list. Please try to use an incognito/private browser and notice the difference in the loading the first time versus subsequent times. 

  • aubreybourke
    Replied on February 15, 2018 at 11:23 AM

    When you access the site your browser will keep a recent copy in its cache. That's why its quicker on subsequent reloads. If there are any changes the cache will update. Otherwise it just loads the cached page.

    As far as I'm aware there is no way to preload the form to make the initial load faster.

    But waiting a few seconds is acceptable in fairness.

  • keanopro
    Replied on February 16, 2018 at 5:40 PM

    For anyone who encounters this same issue, the solution is to load the form on the page where users will click the link to request/load/view your form, but hide it in an invisible <iframe>. Note: You should also be able to do this with a <div>, but I haven't tried it. Once it's loaded on the page before you actually need it, when the user clicks to load your form on the next page, it should already be cached.




    First you'll need to get the ID of your form's iframe:

    <iframe id="JotFormIFrame-##############"> </iframe>

    Then add this code in the javascript to get the element and hide it:
    <script type="text/javascript"> 

    var x5 = document.getElementById("JotFormIFrame-##############");
    x5.style.display = "none";

    </script>




    It probably is obvious, but "JotFormIFrame-##############" should be the ID of your specific form's iframe.