Script loading strategy
Why it matters
beforeInteractive only works in the root layout (or pages/_document); tag managers and pixels loaded afterInteractive compete with hydration and inflate Total Blocking Time.
Fix
Move beforeInteractive scripts to the root layout; load analytics with @next/third-parties or strategy="lazyOnload" (or worker).
Credit
From the Next.js team
The Script component's strategies control when third-party scripts load; beforeInteractive is reserved for the root layout.
References
- Script ComponentNext.js
- How to load and optimize scriptsNext.js
- Efficiently load third-party JavaScriptweb.dev
- Reduce the impact of third-party codeChrome for Developers