Skip to content
English
Submit a Support Request
  • There are no suggestions because the search field is empty.

Avoiding Long Giving Form Load Times

Best practices and basic principles

Under normal circumstances, the Giving Form loads within a couple of seconds. However, how you include the script that loads the form can meaningfully affect both the form's load time and the perceived load time of your overall page.

Let's start with the standard Embed Code (also called the Code Snippet):

<div id="idonate-giving-form-container" data-embed-id="03743e8b-2757-45a7-b08b-104731d9d255"></div>
<script src="https://apps.idonate.com/idonate-giving-form.js"></script>

The second line is what actually loads the form:

<script src="https://apps.idonate.com/idonate-giving-form.js"></script>

Modern pages include many such scripts, and each one must be fetched and executed by the browser. Where the <script> tag lives in your HTML, and which attributes it carries, determines when it downloads, when it runs, and whether it blocks the rest of your page from rendering.

How Script Placement and Attributes Affect Loading

Browsers treat <script> tags differently depending on their attributes. Here is what each configuration actually does:

Configuration Downloads Executes Blocks HTML parsing?
<script> in <head> (no attributes) Immediately As soon as downloaded Yes. Parsing pauses until the script finishes
<script> at end of <body> (no attributes) When the parser reaches it As soon as downloaded Yes, but most of the page has already been parsed
<script async> In parallel with parsing As soon as downloaded (may interrupt parsing); order not guaranteed No for download; briefly yes for execution
<script defer> In parallel with parsing After HTML parsing finishes, in document order, before DOMContentLoaded No
<script type="module"> In parallel with parsing Deferred by default, in order No
<script type="module" async> In parallel with parsing As soon as downloaded; order not guaranteed No

Recommended Approach For the Giving Form

For most sites, the best choices are:

  1. Use the default snippet as-is. Place the embed code where you want the form to appear and leave the script tag alongside the container. This is what the default snippet does, and it works well for the majority of pages.
  2. Add defer if your page feels slow. This lets the browser download the script in the background while continuing to parse and render your page. The form will appear shortly
    after the rest of the page is ready:
    <script defer src="https://apps.idonate.com/idonate-giving-form.js"></script>
  3. Use async if you want the form to appear as early as possible and don't care about execution order relative to other scripts.
What to Avoid
  • Don't put the script in <head> without async or defer. A plain synchronous script in <head> is render-blocking: the browser stops displaying your page until the script finishes downloading and executing. This usually makes pages feel slower, not faster.
  • Don't rely on defer or async to control execution order between specific scripts. defer preserves document order among deferred scripts, but async does not guarantee any order. If you need one script to run before another, load them both with defer and place them in the desired order, or coordinate them explicitly in code.
  • Don't load the script multiple times on the same page. Including the embed script more than once can cause duplicate forms to render or initialization to fail silently.

async works reliably in almost every setup because the script waits for the page to load before looking for the idonate-giving-form-container div. The one situation to watch for is if another script on your page creates that container after the page has loaded. In that case, the embed script may run too early and fail to find it. If you're adding the container dynamically, make sure it exists before the embed script loads.

Troubleshooting Slow Loads

If the form is still taking longer than expected to load after trying these suggestions, open your browser's developer tools and check the Network tab. Look at requests to apps.idonate.com, including both the initial script request and the follow-on requests made by the embedded form iframe (form configuration, designations, fonts, and other assets). Filtering the Network tab by apps.idonate.com is the easiest way to see the full picture. Other scripts on the page may also be blocking or delaying these requests.