Next.js › Third-Party Script Optimization

What do the different loading strategies like beforeInteractive, afterInteractive, and lazyOnload actually control?

Intermediate

Answer

beforeInteractive loads a script before any page content becomes interactive, useful for critical scripts needed immediately, afterInteractive loads it soon after the page becomes interactive, suitable for most analytics and tracking scripts, and lazyOnload delays loading until the browser is idle, ideal for lower priority scripts like chat widgets.

<Script src="/critical-polyfill.js" strategy="beforeInteractive" />
<Script src="/analytics.js" strategy="afterInteractive" />
<Script src="/chat-widget.js" strategy="lazyOnload" />

Real-world example A website loads a required polyfill script immediately using beforeInteractive, its analytics tracking with afterInteractive, and a low priority chat widget with lazyOnload so it never competes for resources with more important content.

Common follow-ups: Which strategy is the safest default choice for most third party scripts?;What happens if a beforeInteractive script fails to load?

Web Vitals & Performance Monitoring;Third-Party Script Optimization