23 June 2025

How to Improve SEO in Next.js with Smarter Script Management

Blazity

Performance Optimization

Discover how Next.js's `next/script` component simplifies and optimizes script loading, addressing performance, user experience, and SEO through intelligent loading strategies and callback functions.

Blazity team

The Expert Guide to Next.js Performance Optimization

This article is part of The Expert Guide to Next.js Performance Optimization, a comprehensive Ebook you can download for free here.

The guide covers every aspect of building fast, scalable web apps with Next.js, including:

- Code Splitting

- Streaming, Suspense & Hydration

- Next/Image Component

- Third-Party Scripts

- Font Optimization

- Rendering Strategies

- Core Web Vitals

- Infrastructure

- Real-life Examples

- How to Measure Web Performance

- Bundle Analysis.

The Expert Guide to Next.js Performance Optimization

This article delves into how Next.js's next/script component revolutionizes script loading and optimization, tackling common issues such as performance bottlenecks caused by blocking behavior, main thread monopolization by heavy scripts, and the complexities of traditional script loading strategies.

It highlights next/script's ability to streamline script management through intelligent loading strategies (beforeInteractive, afterInteractive, lazyOnload) and enhance control with callback functions (onLoad, onReady, onError), ultimately improving Core Web Vitals, boosting SEO rankings, and enhancing the overall user experience. The article also introduces `@next/third-parties` for simplified integration of popular third-party scripts.

Introduction to Script Loading and its Impact on Web Performance

Script loading is critical to web development because it directly affects website performance, influencing user experience and search engine optimization (SEO). Understanding how these scripts interact with a browser's main thread is essential to optimizing loading times and page responsiveness.

Impact on the Main Thread

The main thread parses HTML, executes JavaScript, and renders page content. Since JavaScript is inherently blocking, when the browser encounters a script, it must pause other tasks until the script is downloaded and executed. This blocking behavior can cause significant delays in page interactivity and visual stability, especially if the script is large or served from a slow server.

Blocking Behavior: Scripts loaded without attributes like async or defer are render-blocking. When scripts lack these attributes, the browser stops parsing HTML until the JavaScript is fully executed. This lack of attributes can cause delays in page loading, particularly when such scripts are placed inside the <head> element.

Main Thread Utilization: Main Thread Utilization: Heavy scripts can monopolize the main thread, delaying rendering and the page’s readiness for interaction. These heavy scripts can severely impact user experience by making the page sluggish and unresponsive.

Script Loading Strategies to Mitigate Blocking:

<script> in <head>: Highly critical scripts that affect the DOM structure of the entire page.
<link rel="preload"> + <script async> or <script type="module" async>: Medium to high priority scripts that generate critical content.
<script async>: Often used for non-critical scripts.
<script defer>: Low priority scripts.
<script> at the end of <body>: Lowest priority scripts that may be used occasionally.

Pretty complicated, isn't it?

Fortunately, Next.js introduces a more streamlined and efficient method.

How to Implement Script Loading?

Next.js provides developers with the powerful next/script component to simplify and optimize script handling in modern web applications. It manages scripts intelligently based on loading performance and priority, helping to overcome the limitations of traditional script tags.

The component also offers greater flexibility by supporting callback functions such as onLoad, onReady, and onError, allowing developers to control script behavior better and respond to loading events.

Let’s dive deeper and understand its full capabilities.

beforeInteractive

The beforeInteractive loading strategy is for scripts that must run before the page becomes interactive. These scripts are embedded directly into the server-rendered HTML and are prioritized for early download and execution. This loading strategy ensures critical scripts influence the page’s initial load and behavior without delay.

Code Placement:

Scripts tagged with beforeInteractive are automatically placed within the <head> tag of the HTML document, and they include the defer attribute. This setup allows the browser to parse the HTML without blocking, download the script early, and execute it before the page is hydrated.

Use Cases:

Critical Third-Party Integrations: Load essential services like payment gateway SDKs (e.g., Stripe, PayPal) early to ensure users can perform transactions without delay.

Security Measures: Run critical security scripts, such as those enforcing a Content Security Policy (CSP) or setting up feature policies, before other resources load to establish security settings immediately.

Code

1import { Html, Head, Main, NextScript } from 'next/document';
2import Script from 'next/script';
3
4const Document = () => {
5  return (
6    <Html>
7      <Head />
8      <body>
9        <Main />
10        <NextScript />
11        <Script
12          strategy="beforeInteractive"
13          src="/path/to/bot-detector.js"
14        />
15      </body>
16    </Html>
17  );
18};
19
20export default Document;
21
22

afterInteractive

The afterInteractive strategy loads scripts right after the page becomes interactive. It is meant for scripts that are important but not as critical as those using beforeInteractive. These scripts are injected on the client side and load only after Next.js completes hydration.

Code Placement:

You can place afterInteractive scripts anywhere within your components. They will execute only when the page or component containing them is rendered in the browser.

Use Cases:

User Interaction Trackers: Scripts that track user interactions or site engagement (e.g., Google Analytics, Facebook Pixel) should load immediately after the site becomes interactive to start capturing data. However, these are not critical to the page’s initial functionality.

Live Chat Support: Systems like Intercom or Drift should load right after hydration so they're ready when needed without affecting the initial page load.

Feedback: Tools like Hotjar or Usabilla, which gather feedback on usability and user experience, can be initialized once the user interacts with the page.

Code

1import Script from 'next/script';
2
3export const Analytics = () => {
4  return (
5    <Script
6      strategy="afterInteractive"
7      src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
8    />
9  );
10};
11

lazyOnLoad

lazyOnload scripts are loaded during the browser's idle time using requestIdleCallback, ensuring they do not impact the page's critical load path. This solution is ideal for non-essential functionalities that can wait until all higher-priority tasks are complete.

Code Placement:

You can place afterInteractive scripts anywhere within your components; they will only execute when the browser renders the containing page or component.

Use Cases:

Social Media Widgets:Widgets for social media platforms (e.g., Facebook Like buttons or Twitter posts) that are non-essential but enhance user engagement once the page has fully loaded.

Advertisement Scripts: Ad scripts that need to be present but not loaded at high priority, ensuring that the primary content loads uninterrupted while ads load in the background during idle time.

Additional Multimedia Content: Loading scripts for interactive maps, image galleries, or embedded video players that are not critical to the initial user experience but can enhance the page content once loaded.

Code

1import Script from 'next/script';
2
3export const SocialMediaWidget = () => {
4  return (
5    <Script
6      strategy="lazyOnload"
7      src="/path/to/social-media-widget.js"
8    />
9  );
10};
11

Enhancing Script Management with Callback Functions

Next.js improves script management by supporting callback functions like onLoad, onReady, and onError. These callbacks give developers more control over script behavior at different stages of the loading process:

onLoad: Executes when the script has successfully loaded.
onReady: Ensures the script is fully loaded and ready to execute. This is particularly useful for scripts with complex dependencies or those that need to interact with other loaded scripts.
onError: Executes if the script fails to load, allowing developers to handle errors gracefully, such as falling back to default functionality or loading an alternative script.

Here’s how you might use these callbacks in a Next.js project:

Code

1import Script from 'next/script';
2
3export const CustomScript = () => {
4  return (
5    <Script
6      src="https://example.com/important-script.js"
7      strategy="beforeInteractive"
8      onLoad={() => console.log("Script loaded successfully!")}
9      onReady={() => console.log("Script is ready to execute!")}
10      onError={(e) => console.error("Script failed to load!", e)}
11    />
12  );
13};
14

Next-third-parties

The @next/third-parties library simplifies integrating and managing popular third-party scripts in Next.js apps by providing pre-built components tailored for common use cases. By building on the <Script> component in Next.js, you can optimize loading strategies and improve the developer experience when handling external scripts.

Use Cases:

Google Tag Manager (GTM): Easily integrate GTM without manually configuring a <Script> component for each tag.
Google Analytics: Simplify Google Analytics integration using a single, pre-configured component that ensures optimal performance.
Social Media Embeds: Pre-built components for popular embeds like YouTube and Google Maps make it easy to add these features with minimal setup..
Optimized Loading: The components apply strategies like lazyOnload and can be configured to use web workers, helping reduce main-thread usage and improving performance.

Code

1import { GoogleTagManager, GoogleAnalytics } from "@next/third-parties/google";
2import { YouTubeEmbed } from "@next/third-parties/youtube";
3
4const Layout = ({ children }) =>  {
5  return (
6    <html lang="en">
7      <body>
8        {children}
9        <GoogleTagManager gtmId="GTM-XYZ" />
10        <GoogleAnalytics gaId="G-XYZ" />
11        <YouTubeEmbed videoid="dQw4w9WgXcQ" height={400} />
12      </body>
13    </html>
14  );
15}
16
17export default Layout
18

It also provides useful utility functions like sendGTMEvent for interacting with the GTM data layer. These functions simplify development and make code easier to understand.

Keypoints

The next/Script component simplifies adding and managing scripts in Next.js applications.
The beforeInteractive strategy loads scripts before the page becomes interactive, making it ideal for critical scripts needed immediately.
The afterInteractive strategy loads scripts after the page becomes interactive, ensuring they don’t block the initial rendering.
The lazyOnload strategy loads scripts in the background after the page fully loads, minimizing their impact on performance.
Support for external scripts enables seamless integration of analytics, advertisements, and third-party tools with no harm for performance.
Optimized script handling improves Core Web Vitals, boosting SEO rankings and enhancing the overall user experience.

Get a quote

Empower your vision with us today

“We are very happy with the outcomes and look forward to continuing to work with them on larger initiatives.”

Brian Grafola

CTO at Vibes

Trusted by