Third-party scripts loaded asynchronously or deferred

A synchronous third-party <script> tag in <head> blocks HTML parsing until the script is downloaded, parsed, and executed. A single slow analytics script — say, a 400ms load from a third-party CDN under load — delays your entire page render by 400ms. ISO 25010:2011 time-behaviour captures the blocking cost; the full impact is that your first-party performance work is held hostage to the availability and speed of external vendors you do not control.

Add async or defer to every third-party <script> tag. For analytics and monitoring loaded via Next.js <Script>, use strategy="afterInteractive" or strategy="lazyOnload".

// app/layout.tsx — defer third-party scripts
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script src="https://analytics.example.com/script.js" strategy="afterInteractive" />
      </body>
    </html>
  )
}