コンテンツへスキップ

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") に遅延読み込みされるべきです。

さらに読む

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

次へ

29: コアウェブバイタルの監視

チャプター29を開始