PageSpeed Matters
    Speed Audit
    Let's Talk
    PageSpeed Matters
    Book a Call
    Optimization Techniques · Glossary

    Defer / Async Scripts · Definition & Explanation 2026

    The `defer` and `async` attributes on `<script>` tags control how JavaScript loads and executes relative to HTML parsing. Without either attribute, scripts block HTML parsing entirely — the browser stops building the DOM, downloads the script, executes it, then resumes parsing.

    Adding `defer` or `async` eliminates this render-blocking behavior, often improving FCP by 0.5–2 seconds. Understanding when to use each is essential for optimizing the critical rendering path.

    For ES modules (`<script type='module'>`), defer behavior is the default — modules always download in parallel and execute after parsing.

    Updated 2026-02-28
    M
    By Matt Suffoletto

    TL;DR — Quick Summary

    Defer: downloads in parallel, executes after DOM is ready (preserves order). Async: downloads in parallel, executes immediately when ready (no order guarantee). Both prevent render-blocking. Use defer for most scripts, async for independent analytics.

    What is Defer / Async Scripts?

    Defer and async are HTML `<script>` attributes controlling load and execution:

    • •No attribute — Script blocks HTML parsing. Browser stops, downloads, executes, then continues parsing. Worst for performance.
    • •`async` — Downloads in parallel with parsing. Executes immediately when download completes (may interrupt parsing). No execution order guarantee between async scripts.
    • •`defer` — Downloads in parallel with parsing. Waits until HTML parsing completes. Executes in document order. Equivalent to `DOMContentLoaded` timing.
    • •`type='module'` — Modules are deferred by default. Adding `async` makes them execute immediately when ready.

    History & Evolution

    • •1995 — Scripts block parsing by default (no alternatives).
    • •2005 — `defer` attribute standardized in HTML4 but inconsistently implemented.
    • •2010 — `async` attribute added in HTML5.
    • •2015 — ES modules (`type='module'`) default to defer behavior.
    • •2025–2026 — defer and async are fundamental tools. Import maps and module preload provide additional control.

    Frequently Asked Questions

    Use defer for most scripts — it preserves execution order and waits for DOM. Use async for independent scripts that don't depend on other scripts or DOM (analytics, tracking). Never use async for scripts that depend on each other.

    If both are present, async takes precedence in modern browsers. defer acts as a fallback for browsers that don't support async (extremely rare in 2026).

    Deferred scripts execute before DOMContentLoaded fires. Async scripts may execute before or after DOMContentLoaded. Synchronous scripts delay DOMContentLoaded.

    defer and async only work on external scripts (with src attribute). Inline scripts execute immediately. Keep inline scripts small or use type='module' for deferred inline behavior.

    Struggling with Defer / Async Scripts?

    Request a free speed audit and we'll identify exactly what's holding your scores back.

    Request An Audit