Best practices and basic principles
Under normal circumstances, the Giving Form will load within a couple of seconds. However, there are certain methods of including the script that loads the Giving Form that will result in shorter or longer load times.
To understand the how and why of loading the Giving Form, let's take a look at something familiar: The Embed Code, also known as 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>
Specifically, let's look at this script, since this is the part of the Embed Code that loads the Giving Form:
<script src="https://apps.idonate.com/idonate-giving-form.js"></script>
Modern websites include a great number of these scripts, and each one communicates with a different source to load the script onto the page. The sequence in which these scripts are loaded are a major factor in load times.
Controlling the Sequence in Which Scripts Load
Luckily, there are ways of adjusting this sequence. Depending on the location and attributes of the script element, the script will load and execute with a higher or lower priority.
Here are some of the different configurations available and their effects on load priority:
| Configuration | Load Priority | Execution Priority |
| <script> located in <head> | High | Highest |
| <script type=module async> | High | High |
| <script async> | Low | High |
| <script defer> | Low | Lowest |
| <script> at the end of <body> | Medium | Low |
Obviously, the topmost entry is the most appealing for a fast load time. However, async and defer can be very useful in controlling the order in which scripts load.
For example, if there is one script in particular you want loaded first, marking other scripts as defer will cause them to be loaded after those that are not marked as defer.
On the other hand, async will load scripts asynchronously and execute them once they are finished.