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.

Practice

1. What is the main purpose of the Script component in Next.js?

easy

A. To replace all JavaScript code in the app

B. To safely load third-party scripts with control over when they run

C. To style components using CSS

D. To manage server-side rendering of React components

Solution

1. Step 1: Understand the role of the Script component

   The Script component is designed to load third-party scripts safely in Next.js apps.

2. Step 2: Identify what it controls

   It allows control over when the script runs using the strategy prop, improving performance and safety.

3. Final Answer:

   To safely load third-party scripts with control over when they run -> Option B

4. Quick Check:

   Script component purpose = safe third-party script loading [OK]

Hint: Remember: Script controls when and how scripts load [OK]

Common Mistakes:

• Confusing Script with styling or rendering components
• Thinking Script replaces all JavaScript
• Assuming Script manages server rendering

2. Which of the following is the correct way to import the Script component in a Next.js file?

easy

A. import Script from 'next/script';

B. import { Script } from 'react';

C. import Script from 'nextjs/script';

D. import Script from 'nextjs/components';

Solution

1. Step 1: Recall the official import path

   The Script component is imported from the 'next/script' package in Next.js.

2. Step 2: Check each option

   Only import Script from 'next/script'; uses the correct import path and syntax.

3. Final Answer:

   import Script from 'next/script'; -> Option A

4. Quick Check:

   Correct import path = 'next/script' [OK]

Hint: Next.js Script always imports from 'next/script' [OK]

Common Mistakes:

• Importing from 'react' instead of 'next/script'
• Using incorrect package names like 'nextjs/script'
• Using named import instead of default import

3. What will happen when you use the following code in a Next.js component?

import Script from 'next/script';

export default function Page() {
  return (
    <>
      

medium

A. The script loads after the page has loaded, and 'Hello World' is displayed immediately

B. The script blocks page rendering until it loads

C. The script never loads because strategy is incorrect

D. The script loads before the page content and delays 'Hello World' display

Solution

1. Step 1: Understand the 'lazyOnload' strategy

   The 'lazyOnload' strategy loads the script after the main page load, so it doesn't block rendering.

2. Step 2: Analyze the component output

   The div with 'Hello World' renders immediately, while the script loads in the background.

3. Final Answer:

   The script loads after the page has loaded, and 'Hello World' is displayed immediately -> Option A

4. Quick Check:

   lazyOnload = script loads after page [OK]

Hint: lazyOnload means script loads after page content [OK]

Common Mistakes:

• Thinking script blocks rendering
• Confusing strategy names
• Assuming script never loads

4. Identify the error in this Next.js code using the Script component:

import Script from 'next/script';

export default function Page() {
  return (
    <>
      
      
Welcome
    </>
  );
}

medium

A. The Script component must have a src attribute when using strategy

B. Inline script content must be wrapped in a <script> tag inside Script

C. The strategy 'beforeInteractive' is invalid

D. Script component cannot have children; inline scripts require the 'dangerouslySetInnerHTML' prop

Solution

1. Step 1: Check how inline scripts are added

   Inline scripts in Next.js Script component require the 'dangerouslySetInnerHTML' prop, not children.

2. Step 2: Verify the given code

   The code incorrectly places JavaScript code as children, which is invalid and causes an error.

3. Final Answer:

   Script component cannot have children; inline scripts require the 'dangerouslySetInnerHTML' prop -> Option D

4. Quick Check:

   Inline scripts need dangerouslySetInnerHTML [OK]

Hint: Inline scripts use dangerouslySetInnerHTML, not children [OK]

Common Mistakes:

• Putting inline JS code as children inside Script
• Assuming strategy names are invalid
• Thinking src is mandatory for all Script uses

5. You want to load a third-party analytics script only after the user interacts with the page (e.g., clicks a button). Which is the best way to do this using Next.js Script component?

hard

A. Use strategy="lazyOnload" and place Script in the component

B. Use strategy="worker" to run script in a web worker

C. Use strategy="afterInteractive" and conditionally render Script after user click

D. Use strategy="beforeInteractive" to load script immediately

Solution

1. Step 1: Understand the strategies

   'afterInteractive' loads scripts after the page is interactive, suitable for user-triggered loading.

2. Step 2: Apply conditional rendering

   Render the Script component only after user interaction (like a button click) to delay loading until needed.

3. Final Answer:

   Use strategy="afterInteractive" and conditionally render Script after user click -> Option C

4. Quick Check:

   Conditional afterInteractive = user-triggered load [OK]

Hint: Render Script after user action with afterInteractive strategy [OK]

Common Mistakes:

• Using lazyOnload which loads regardless of user action
• Using beforeInteractive which loads too early
• Assuming worker strategy runs scripts like normal