jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML Tools

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.

Quick answer

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.

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.

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.

Related tools

More html tools

Also try

Also try