Script component for third-party scripts in NextJS - Performance & Optimization

Performance: Script component for third-party scripts

HIGH IMPACT

This affects page load speed and interaction responsiveness by controlling when and how third-party scripts load and execute.

Loading a third-party analytics script without blocking page rendering

NextJS

import Script from 'next/script';

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/analytics.js"
        strategy="lazyOnload"
      />
      <main>Main content here</main>
    </>
  );
}

Using Next.js Script with 'lazyOnload' defers loading until after main content is painted, improving LCP and interaction readiness.

📈 Performance GainNon-blocking script load, reduces LCP by 200-500ms, improves INP by deferring script execution

Loading a third-party analytics script without blocking page rendering

NextJS

export default function Page() {
  return (
    <>
      <script src="https://example.com/analytics.js"></script>
      <main>Main content here</main>
    </>
  );
}

Using a raw <script> tag blocks HTML parsing and delays Largest Contentful Paint (LCP). It also blocks interaction until the script loads and executes.

📉 Performance CostBlocks rendering until script loads, increasing LCP by 200-500ms depending on network

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Raw <script> tag in JSX	Minimal DOM nodes	Blocks HTML parsing causing multiple reflows	High paint cost due to delayed content	[X] Bad
Next.js Script with strategy='lazyOnload'	Minimal DOM nodes	Single reflow after main content	Low paint cost, fast content display	[OK] Good

Rendering Pipeline

The Script component controls when the browser fetches and executes third-party scripts, affecting the critical rendering path by deferring or prioritizing script loading.

→HTML Parsing

→Script Execution

→Layout

→Paint

⚠️ BottleneckScript Execution blocks HTML parsing and delays Layout and Paint stages.

Core Web Vital Affected

LCP, INP

This affects page load speed and interaction responsiveness by controlling when and how third-party scripts load and execute.

Optimization Tips

1Avoid raw <script> tags that block HTML parsing and delay LCP.

2Use Next.js Script component with appropriate 'strategy' to control script loading timing.

3Defer non-critical third-party scripts with 'lazyOnload' to improve page speed and interaction.

Performance Quiz - 3 Questions

What is the main benefit of using Next.js Script component with 'lazyOnload' strategy for third-party scripts?

A It blocks rendering until the script is fully loaded to ensure script availability.

B It loads scripts before HTML parsing starts to speed up script execution.

C It defers script loading until after main content is painted, improving LCP and interaction speed.

D It bundles third-party scripts into the main JavaScript file to reduce requests.

DevTools: Performance

How to check: Record a page load in DevTools Performance tab, filter for scripting and loading events, and observe when scripts load relative to main content paint.

What to look for: Look for long scripting tasks blocking main thread and delayed Largest Contentful Paint (LCP) caused by script loading.