jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML Tools

Free HTML Script Loading Strategy Builder

Choose a use case and get the recommended script tag with the correct loading attribute. Covers analytics scripts, app bundles, third-party widgets, ES modules, and inline scripts. Explains when to use each strategy.

Loading tool...

What is HTML Script Loading Strategy Builder?

How a script loads affects page performance and script execution order. A normal script blocks HTML parsing. defer downloads in parallel and executes after HTML parsing. async downloads in parallel and executes as soon as it is ready. type='module' scripts are deferred by default. Choosing the right strategy depends on whether the script is critical, depends on other scripts, or is independent.

quickAnswer

Choose a script loading strategy based on when the script must execute. Use defer for scripts that need the full DOM but can download in parallel. Use async for independent scripts like analytics. Use type='module' for modern ES module code.

Last updated: 2026-05-25

limitations

  • defer preserves script execution order; async does not. Choose based on whether script order matters.
  • async scripts execute as soon as they finish downloading, which can block rendering if the script is large.
  • type='module' scripts are deferred by default and do not need an additional defer attribute.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

How to use this tool

  1. Select the script type that matches your use case.
  2. Enter the script URL.
  3. The tool recommends the best loading attribute.
  4. Copy the script tag with the correct attributes.

What you can use it for

  • Add a deferred application bundle that runs after the page parses.
  • Include an async analytics script that loads independently.
  • Set up a module script for a Vite or Astro entry point.

Use cases

Practical examples

example

Analytics script with async

An analytics script uses async so it loads without blocking the page.

example

App bundle with defer

An app bundle uses defer to maintain execution order while not blocking HTML parsing.

Common mistakes

  • Using async for scripts that depend on DOM elements or other scripts.
  • Using defer for scripts that must run immediately regardless of parse state.
  • Using type='module' for scripts that are not ES modules.

verification

  1. Open Chrome DevTools Network panel and check the Initiator and Waterfall columns to confirm when each script starts loading and executing.
  2. Test page rendering and interactivity timing with different strategies using the Performance panel.

comparison

async vs defer vs type="module"

Aspectasyncdefertype="module"
Execution timingExecutes as soon as the script finishes downloading, before DOMContentLoadedExecutes after HTML parsing is complete, just before DOMContentLoadedExecutes after HTML parsing is complete, same as defer behavior
Script order guaranteeNo. Scripts execute in the order they finish downloading.Yes. Scripts execute in the order they appear in the HTML.Yes. Scripts execute in the order they appear, same as defer.
Blocks HTML parsingDoes not block HTML parsing. Downloads in parallel.Does not block HTML parsing. Downloads in parallel.Does not block HTML parsing. Downloads in parallel.
Use casesIndependent scripts such as analytics, A/B testing, or social widgetsScripts that need the full DOM such as app bundles that query or modify the pageModern ES module code where import/export syntax is used
Default behavior without attributeWithout any attribute, the script blocks HTML parsing until it downloads and executesN/Atype="module" scripts are deferred by default and do not need an explicit defer attribute

Async downloads in parallel and runs on completion. Defer downloads in parallel but waits for the HTML to finish parsing. Module scripts are deferred by default and support ES module dependency graphs.

FAQ

Questions about HTML Script Loading Strategy Builder

What is the difference between defer and async?

defer downloads in parallel and waits for HTML parsing to finish before executing, preserving script order. async downloads in parallel and executes immediately when ready, ignoring order.

Does type='module' need defer?

No. Module scripts are deferred by default and do not need an explicit defer attribute.

Where should I place the script tag in the HTML document?

Modern best practice is to place script tags in the head with defer or type="module". Both download in parallel with HTML parsing and execute after the DOM is ready. Placing scripts at the end of body was a workaround for older browsers that did not support defer. With defer or module, script placement in the head is cleaner and more maintainable without blocking rendering.

Does defer work on inline scripts?

No. The defer attribute only works on external scripts with a src attribute. Inline scripts are executed immediately during HTML parsing. If you need an inline script to run after the DOM is ready, use the DOMContentLoaded event listener or place the script at the end of body. Alternatively, convert the inline script to an external file and use defer.

Related tools

More html tools

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool

Also try

Also try

Seo

AI Crawler robots.txt Builder

Build a robots.txt policy for AI crawlers. Choose from open, selective, or strict presets and block specific AI training bots while allowing search engines.

Open tool