PageSpeed Matters PageSpeed Matters
    See Pricing
    See Pricing

    Optimization Techniques · Glossary

    async vs defer

    Matt Suffoletto

    Founder & CEOPublished

    On this page
    async vs defer

    TL;DR

    The async and defer attributes on <script> tags change how external JavaScript is fetched and executed: async downloads the script in parallel and executes it as soon as it is available, while defer downloads in parallel and executes after HTML parsing completes, in document order.

    What is async vs defer?

    The async and defer attributes on <script> tags change how external JavaScript is fetched and executed: async downloads the script in parallel and executes it as soon as it is available, while defer downloads in parallel and executes after HTML parsing completes, in document order.

    The stakes have grown with the web: the median page now ships 375 KB of third-party JavaScript, roughly two-thirds of all JS on a typical page, and picking the right attribute on those external <script> tags is what keeps them from blocking your paint.

    Learn more in our deferring scripts the right way guide, or work with us through our done-for-you speed optimization service.

    How async vs defer is Measured

    Script loading behavior is visible in the Network panel of Chrome DevTools.

    Share

    Written by

    Matt Suffoletto

    Founder & CEO

    Sources

    Ready to Get Started?

    Get your site optimized in as little as 3 days. From $500.