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