Skillintermediate

rendering script defer async

**Impact: HIGH (eliminates render-blocking)**

Claude Code Knowledge Pack7/10/2026

Overview

Use defer or async on Script Tags

Impact: HIGH (eliminates render-blocking)

Script tags without defer or async block HTML parsing while the script downloads and executes. This delays First Contentful Paint and Time to Interactive.

defer: Downloads in parallel, executes after HTML parsing completes, maintains execution order
async: Downloads in parallel, executes immediately when ready, no guaranteed order

Use defer for scripts that depend on DOM or other scripts. Use async for independent scripts like analytics.

Incorrect (blocks rendering):


  return (
    <html>
      <head>
        <script src="https://example.com/analytics.js" />
        <script src="/scripts/utils.js" />
      </head>
      <body></body>
    </html>
  )
}

Correct (non-blocking):


  return (
    <html>
      <head>
        
        <script src="https://example.com/analytics.js" async />
        
        <script src="/scripts/utils.js" defer />
      </head>
      <body></body>
    </html>
  )
}

Note: In Next.js, prefer the next/script component with strategy prop instead of raw script tags:


  return (
    <>
      
      
    </>
  )
}

Reference: MDN - Script element