Q42: How does the next/script Component optimize third-party analytics loading?
The <Script /> component manages third-party JavaScript libraries (Google Analytics, Stripe, Ads) using execution strategies: beforeInteractive (early load), afterInteractive (default), lazyOnload (idle load), and worker (offloads to Web Worker via Partytown).
Loading Analytics via next/script
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Script
src="https://analytics.com/script.js"
strategy="lazyOnload" // Loads during browser idle time
/>
</body>
</html>
);
}💡 lazyOnload defers third-party script loading until after core page assets complete.
Key Takeaways
- Controls third-party script execution timing.
strategy="worker"moves script processing off the main browser thread.
Knowledge Check
Which next/script strategy defers third-party analytics scripts until browser idle time?