PageSpeed Matters
    PageSpeed Matters
    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

    For step-by-step optimization, platform-specific fixes, code examples, and case studies, read our full guide:

    The Ultimate Guide to Core Web Vitals: How to Pass All Metrics & Boost Rankings in 2026
    The Ultimate Guide to Third-Party Scripts & Marketing Tools Performance: Audit, Optimize & Govern in 2026

    Struggling with Defer / Async Scripts?

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