Connection failed. Please try again.

Skip to content
SEO Tools
Help and documentation
Speed High impact Easy 5–15 min

Defer / async on scripts

A synchronous <script> blocks rendering — defer it.

What it is

When the browser encounters a plain <script>, it stops rendering the page, downloads and runs the script, and only then continues. This is called a "render-blocking" script. The defer and async attributes change this behavior.

Why it matters

Every blocking script in the head delays the moment the user sees content (worsening LCP and First Paint). With multiple scripts the delays add up. On mobile and slow connections this means seconds of an empty white page — and a higher bounce rate.

How to do it

  1. 1Mark scripts that aren't needed for the first render with the defer attribute — they download in the background and run only after the page is built, in the order they appear.
  2. 2For independent scripts (analytics, chat) use async — they run as soon as they're downloaded, regardless of order.
  3. 3Keep critical scripts minimal; load the rest at the end of <body> or with defer.
  4. 4Rule: defer = depends on the DOM or on order; async = standalone, nothing depends on it.

Example

Wrong
<head>
  <script src="/js/app.js"></script>   <!-- blocks rendering -->
</head>
Correct
<head>
  <script src="/js/app.js" defer></script>
  <script src="/js/analytics.js" async></script>
</head>

Conclusion

Defer/async is one of the cheapest and most effective speed optimizations — often it's enough to add a single word to the tag. For most scripts, defer is the right choice. After deployment, verify that nothing stopped working (especially order-dependent scripts) and measure the LCP improvement.

Related topics