チャプター28

サードパーティスクリプトの最適化

多くのアプリケーションでは、分析、広告、カスタマーサポートウィジェットなど、さまざまな種類の機能を含めるために、サードパーティのJavaScriptに依存しています。しかし、サードパーティが作成したコードを埋め込むと、ページコンテンツのレンダリングが遅延し、早期に読み込まれた場合にユーザーのパフォーマンスに影響を与える可能性があります。

Next.jsは、組み込みのScriptコンポーネントを提供しており、開発者がいつフェッチして実行するかを選択できる一方で、任意のサードパーティスクリプトの読み込みを最適化します。

Scriptコンポーネントの使用

通常のHTMLを使用すると、外部スクリプトは手動でnext/headにアタッチする必要があります。

import Head from 'next/head';
 
function IndexPage() {
  return (
    <div>
      <Head>
        <script src="https://#/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://#/gtag/js?id=123"
      />
    </div>
  );
}

Scriptコンポーネントはstrategyプロパティを導入しており、最適な読み込みのためにスクリプトをいつフェッチして実行するかを決定できます。Largest Contentful Paint (LCP) に悪影響を与えないように、ほとんどのサードパーティスクリプトは、ページがインタラクティブになった直後 (strategy="afterInteractive") またはブラウザのアイドル時間中に遅延して (strategy="lazyOnload") 、ページのすべてのコンテンツが読み込みを完了した後に読み込まれるように遅延させる必要があります。

さらに読む

Next.js: Scriptコンポーネント
Next.js: next/scriptのAPIリファレンス

サードパーティスクリプトの最適化

Scriptコンポーネントの使用

さらに読む

チャプターを完了しました。28