SEO：优化第三方脚本 | Next.js

许多应用依赖第三方 JavaScript 来实现各种功能，例如分析工具、广告和客户支持组件。然而，过早加载第三方编写的代码可能会延迟页面内容的渲染并影响用户体验。

Next.js 提供了内置的 Script 组件，可以优化任何第三方脚本的加载，同时允许开发者自行决定何时获取和执行这些脚本。

使用 Script 组件

在常规 HTML 中，外部脚本需要手动添加到 next/head：

import Head from 'next/head';
 
function IndexPage() {
  return (
    <div>
      <Head>
        <script src="https://www.googletagmanager.com/gtag/js?id=123" />
      </Head>
    </div>
  );
}

使用 Next.js 的 Script 组件时，您可以将其添加到组件中的任何位置，而无需使用 next/head：

import Script from 'next/script';
 
function IndexPage() {
  return (
    <div>
      <Script
        strategy="afterInteractive"
        src="https://www.googletagmanager.com/gtag/js?id=123"
      />
    </div>
  );
}

Script 组件引入了 strategy 属性，允许您决定何时获取和执行脚本以实现最佳加载效果。为了避免对最大内容绘制 (LCP) 产生负面影响，大多数第三方脚本应推迟到页面所有内容加载完成后执行，可以在页面变为可交互状态后立即加载（strategy="afterInteractive"），或在浏览器空闲时延迟加载（strategy="lazyOnload"）。

优化第三方脚本

使用 Script 组件

延伸阅读

On this page