Third-party scripts are loaded asynchronously

A synchronous third-party script in <head> 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.

Add async or defer to every external <script> tag. In Next.js, replace manual script tags with the Script component and set strategy="afterInteractive" for analytics or "lazyOnload" for non-critical widgets.

<!-- Before — blocks HTML parsing -->
<script src="https://analytics.example.com/tracker.js"></script>

<!-- After — downloads in parallel, executes after parse -->
<script async src="https://analytics.example.com/tracker.js"></script>
<!-- OR: executes in order after document is parsed -->
<script defer src="https://analytics.example.com/tracker.js"></script>

// Next.js — use Script component in app/layout.tsx
import Script from 'next/script'

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