Skip to main content
Load order determines when your scripts run relative to the page loading. Getting this right ensures your code works reliably.

​
Script Positions

Scripts can load in three positions: 
<head>
  <!-- Scripts load here -->
</head>
When to use:
  • Scripts that must run before page renders
  • Critical libraries other scripts depend on
  • Styles that prevent layout shift
Trade-off: Can slow down page rendering if not deferred.

​
Body Start

<body>
  <!-- Scripts load here -->
  <div>Page content...</div>
</body>
When to use:
  • Scripts that need to run early but after head
  • Rarely needed—most scripts work fine at body end

​
Body End (Default)

<body>
  <div>Page content...</div>
  <!-- Scripts load here -->
</body>
When to use:
  • Most scripts (recommended default)
  • DOM manipulation code
  • Event handlers
  • Animations and interactions
Benefit: Page content loads and displays before scripts run.

​
Setting Load Position

1

Open your script

Go to your site and open the script you want to configure.
2

Find Load Order

In the script settings, find Load Order or Position.
3

Select position

Choose Head, Body Start, or Body End.
4

Save

The script will now load in the selected position.

​
Script Priority

Within each position, scripts load in priority order. Lower numbers load first. Example:
ScriptPositionPriorityLoads
GSAP InitHead11st
AnimationsBody End12nd
Scroll EffectsBody End23rd
AnalyticsBody End104th
Dependencies should have lower priority numbers than the scripts that use them.

​
Loading Attributes

For external scripts, you can also set loading attributes:

​
Defer

<script src="script.js" defer></script>
  • Downloads in background while HTML parses
  • Executes after HTML is fully parsed
  • Maintains execution order
  • Best for: Most external scripts

​
Async

<script src="script.js" async></script>
  • Downloads in background while HTML parses
  • Executes immediately when download completes
  • Does NOT maintain order
  • Best for: Independent scripts (analytics)

​
Neither

<script src="script.js"></script>
  • Blocks HTML parsing until downloaded and executed
  • Avoid unless necessary

​
Common Load Order Patterns

​
Animation Library + Custom Animations

1. GSAP (Head, Priority 1, Defer)
2. Custom Animations (Body End, Priority 1)
GSAP loads first so it’s available when your animation code runs.

​
Slider with Custom Config

1. Swiper CSS (Head, Stylesheet)
2. Swiper JS (Head, Priority 1, Defer)
3. Slider Init (Body End, Priority 1)
Library loads before initialization code.

​
Analytics (Non-blocking)

1. Google Analytics (Body End, Priority 10, Async)
Low priority, async—loads without affecting page speed.

​
Critical CSS

1. Above-the-fold styles (Head, Priority 1)
2. Full styles (Body End, Priority 1)
Critical styles prevent layout shift; full styles can load later.

​
Execution Timing (Wait for DOM)

Control when your JavaScript executes relative to the DOM being ready. This can be set per-script with three options:

​
Auto-detect (Default)

GoodCraft Script analyzes your code and automatically determines if it needs the DOM to be ready. It detects patterns like:
  • document.querySelector() and querySelectorAll()
  • document.getElementById() and similar selectors
  • document.body access
  • classList manipulation
  • jQuery’s $(document).ready() and $(function)
If DOM-dependent code is detected, the script waits for DOMContentLoaded. Otherwise, it executes immediately.
When auto-detect finds DOM patterns in your code, you’ll see a badge indicating “Will wait” along with the specific patterns detected.

​
Always Wait for DOM Ready

Force the script to always wait until the DOM is fully loaded: 
// Your code
initSlider();

// Becomes
document.addEventListener('DOMContentLoaded', () => {
  initSlider();
});
Use when:
  • Auto-detect isn’t catching your DOM usage
  • You want guaranteed DOM availability
  • Scripts that manipulate elements created by other scripts

​
Execute Immediately

Run the script as soon as it loads, without waiting: Use when:
  • Scripts that set up global variables or functions
  • Code that doesn’t touch the DOM
  • Performance-critical initialization
If you select “Execute Immediately” but your code uses DOM selectors, you’ll see a warning. This can cause errors if elements don’t exist yet.

​
Setting Execution Timing

  1. Open your script in the editor
  2. Click the Scope button in the toolbar
  3. Scroll to Execution Timing
  4. Choose your preferred option
  5. Click Save Changes

​
Site-Wide DOM Ready Wrapping

In addition to per-script settings, you can enable a site-wide default in Site Settings → Wrap in DOM Ready. This applies to all scripts that haven’t specified their own timing preference.

​
Debugging Load Order Issues

​
Script runs before element exists

Symptom: Cannot read property of null Fix:
  1. Move script to Body End
  2. Enable DOM Ready wrapping
  3. Use component detection

​
Library not defined

Symptom: GSAP is not defined Fix:
  1. Ensure library loads before your script
  2. Check library is in Head or has lower priority
  3. Verify library URL is correct

​
Scripts run out of order

Symptom: Code assumes something exists that doesn’t yet Fix:
  1. Adjust priorities (lower = earlier)
  2. Use defer instead of async
  3. Check position (Head → Body Start → Body End)

​
Flash of unstyled content

Symptom: Page briefly shows without styles Fix:
  1. Move critical CSS to Head
  2. Inline critical styles
  3. Use <link rel="preload"> for fonts

​
Best Practices

Unless you have a specific reason, load scripts at Body End. It’s the safest position for most code.
Defer gives you the best of both worlds: non-blocking download with predictable execution order.
Use 1, 2, 3 for ordered scripts. Use 10 for low-priority scripts like analytics. Don’t overthink it.
Use browser DevTools to simulate slow networks. This reveals timing issues that don’t appear on fast connections.
If Script B depends on Script A, note it in comments:
/**
 * Requires: GSAP (loads first)
 */

​
Site-Wide Settings

In Site Settings, you can configure defaults:
  • Bundle Scripts: Combine all scripts into one file
  • Use Modules: Use ES6 module syntax (type="module")
  • Wrap in DOM Ready: Auto-wrap all scripts
These affect how the loader serves your scripts.

​
Next Steps

External Scripts

Add libraries and tracking scripts.

Component Detection

Load scripts based on elements.