---
title: "rendering script defer async"
description: "**Impact: HIGH (eliminates render-blocking)**"
type: skill
canonical_url: https://claudary.paisolsolutions.com/skills/rendering-script-defer-async
source: "Claudary"
difficulty: intermediate
author: "Claude Code Knowledge Pack"
date: 2026-07-10T11:37:38.713Z
license: CC-BY-4.0
attribution: "rendering script defer async — Claudary (https://claudary.paisolsolutions.com/skills/rendering-script-defer-async)"
---
# rendering script defer async
**Impact: HIGH (eliminates render-blocking)**
## Overview
---
title: Use defer or async on Script Tags
impact: HIGH
impactDescription: eliminates render-blocking
tags: rendering, script, defer, async, performance
---
## 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):**
```tsx
export default function Document() {
return (
{/* content */}
)
}
```
**Correct (non-blocking):**
```tsx
export default function Document() {
return (
{/* Independent script - use async */}
{/* DOM-dependent script - use defer */}
{/* content */}
)
}
```
**Note:** In Next.js, prefer the `next/script` component with `strategy` prop instead of raw script tags:
```tsx
import Script from 'next/script'
export default function Page() {
return (
<>
)
}
```
Reference: [MDN - Script element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)
---
Source: [Claudary](https://claudary.paisolsolutions.com/skills/rendering-script-defer-async) · https://claudary.paisolsolutions.com