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

多くのアプリケーションでは、アナリティクス、広告、カスタマーサポートウィジェットなど、さまざまな機能を組み込むためにサードパーティの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プロパティがあり、最適な読み込みのためにスクリプトをいつ取得・実行するかを決定できます。Largest Contentful Paint (LCP) に悪影響を与えないようにするため、ほとんどのサードパーティスクリプトは、ページのすべてのコンテンツが読み込み完了した後（strategy="afterInteractive"）、またはブラウザのアイドル時間中に遅延読み込み（strategy="lazyOnload"）するように遅延させるべきです。

さらに詳しく

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

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

Scriptコンポーネントの使用

さらに詳しく

On this page