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?

  • Profile Image
    keanopro
    Asked on February 15, 2018 at 07: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? 

  • Profile Image
    Nik_C
    Answered on February 15, 2018 at 09: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.gif

    We'll wait for your response.

    Thank you!

  • Profile Image
    keanopro
    Answered 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. 

  • Profile Image
    aubreybourke
    Answered 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.

  • Profile Image
    keanopro
    Answered on February 16, 2018 at 05: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.