# Third-party scripts are loaded asynchronously
- **Pattern:** `ab-002064` (`performance-load.bundle.third-party-scripts`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002064
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002064)
## Why it matters
A synchronous third-party script in `` blocks the browser's HTML parser for the duration of the network request and script execution — stalling everything: layout, rendering, and any other script that follows. A single slow analytics script hosted on an external CDN can delay First Contentful Paint by 500ms–2s if that CDN has any latency. This is entirely under the developer's control: `async` tells the browser to download the script in parallel and execute it when ready; `defer` executes after the document is parsed. Neither attribute changes the script's behavior for tracking or analytics purposes.
## Severity rationale
Medium because each synchronous third-party script adds a hard blocking delay to page rendering, and the delay is entirely controlled by an external CDN with no SLA.
## Remediation
Add `async` or `defer` to every external `
```
```tsx
// Next.js — use Script component in app/layout.tsx
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
## Detection
- **ID:** `third-party-scripts`
- **Severity:** `medium`
- **What to look for:** Count all `
```
For Next.js, use the Script component:
```tsx
import Script from 'next/script'
export default function Layout() {
return (
<>
)
}
```
---
## External references
- iso-25010 performance-efficiency.time-behaviour
Taxons: performance
HTML version: https://auditbuffet.com/patterns/ab-002064