Using Defer, async, and module scripts correctly
Defer maintains the document order after parsing, async runs on demand, and modules are delayed by default; dependencies determine the choice.
For front-end developers and technical SEO teams, "Using Defer, async, and modules correctly" shows the difference between "Known Dependency" and "Appropriate Load Time." "Async Order" is the typical warning sign.
Published: 3 min read · Author: Sebastian Geier
When should a script be loaded with Defer, async, or as a JavaScript module?
Ordered application scripts use Defer or modules with explicit imports. Only independent resources may be async; initialization waits for required elements, and external errors are limited to optional functions.
Practical Example: "Async Sequence"
The application logic is loaded as a module with clear imports and initialized after parsing. An independent statistics script starts async; if its provider becomes unreachable, navigation and forms continue to function without delays or missing core functions.
Limited Failure
Synchronous blocking of script time, dependency and initialization errors based on cache state and core interaction time.
Failures or delays of core functions caused by slow or blocked optional scripts.
Known Dependency
Test criterion
Known Dependency
Order and required exports are explicit, instead of relying on random download times or global variables.
Test criterion
Appropriate Load Time
DOM-dependent code starts only after the structure is established, without synchronously blocking parsing for non-critical work.
Limited Failure An optional external script can be missing or arrive late without preventing navigation, main content, or form functionality.
Async Order
Async Order Two dependent files run according to their network arrival and only generate initialization errors under specific connections.
Early DOM Access A script searches for elements before they are parsed and fails sporadically depending on its position or cache speed.
External Blocking Analytics or widget code is synchronously located in the critical path and delays the entire page on a slow provider.
Appropriate Load Time
All scripts are classified according to dependency, DOM requirement, criticality, origin, and acceptable failure impact.
Application code is loaded as ordered modules or deferred; independent optional providers are only loaded asyncally when absolutely necessary.
Tests with an empty cache, slow connection, and blocked third parties verify order, core functionality, and error limits.
What questions remain after "defer, async, and using modules correctly"
Splitting JavaScript bundles according to actual usage delves deeper into the "Known Dependency" checkpoint. The key question is: How do you split JavaScript bundles without simply generating many new network requests?
A complementary perspective is offered Robots.txt problems that only arise in conjunction with meta robotsIt answers the question: "What problems arise from the interaction of robots.txt and Meta-Robots?"
If you want to put "defer, async, and using modules correctly" into practice, you can refer to Robust Website Systems This focuses on "Script Loading and Main Thread Budget" and "Known Dependency."
Conclusion: Using defer, async, and modules correctly
Script attributes describe dependencies and execution time. A deliberate classification prevents seemingly faster loading from sacrificing order and robustness.
Sources and Further Information
The classification of "using defer, async, and modules correctly" is based on the following official documentation and standards.
Performance Timeline Level 2 – W3CThe W3C specification defines a common timeline and PerformanceEntry interfaces for measurable browser events.
HTML Standard: Scripting – WHATWGThe Living Standard defines script, module, async, and defer behavior, including execution order.
Key Thesis
Ordered application scripts are either deferred or loaded as modules with explicit imports. Independent scripts may be async; initialization waits for the required DOM, and errors from external resources are handled.
What This Is Not About
Loading all scripts with async across the board does not improve startup time if dependencies and initialization order are broken as a result.
What it's about
The loading attribute and module type are determined by the independence, sequence, DOM requirements, and error consequences of each script.
JavaScript, rendering & search
Isolate Third-Party Code Instead of Blocking the Entire Frontend
As a separate check, the question "How to prevent a third-party script from blocking the entire frontend" should be addressed in the "defer, async, and module implementation" process.
JavaScript, rendering & search
Making dynamic content accessible to search engines
"Defer, async, and module implementation" is supplemented by a separate decision: What prerequisites ensure that dynamically loaded content is reliably accessible for search and user interaction?
Insights Overview
All VELUNO Insights at a Glance
Further analyses on Website Systems, digital visibility, and robust working models.
Limited outage: a concrete starting point
The script list is sorted into critical, ordered, independent, and optional categories. The greatest discrepancy between the current implementation and the actual role is suitable for the first controlled redesign.