logoNext.js
DokumentationBlogLernen

Optimierung von Drittanbieter-Skripten

Viele Anwendungen verlassen sich auf JavaScript von Drittanbietern, um verschiedene Funktionalitäten wie Analysen, Werbung und Kundensupport-Widgets einzubinden. Das Einbetten von Code Dritter kann jedoch die Darstellung von Seiteninhalten verzögern und die Benutzerleistung beeinträchtigen, wenn er zu früh geladen wird.

Next.js bietet eine integrierte Script-Komponente, die das Laden von Drittanbieter-Skripten optimiert, während Entwickler entscheiden können, wann das Skript abgerufen und ausgeführt werden soll.

Verwendung der Script-Komponente

Bei regulärem HTML müssten externe Skripte manuell zu next/head hinzugefügt werden:

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

Mit der Next.js Script-Komponente können Sie sie überall in der Komponente einfügen, ohne next/head verwenden zu müssen:

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

Die Script-Komponente führt eine strategy-Eigenschaft ein, mit der Sie entscheiden können, wann ein Skript für optimales Laden abgerufen und ausgeführt werden soll. Um den Largest Contentful Paint (LCP) nicht negativ zu beeinflussen, sollten die meisten Drittanbieter-Skripte verzögert geladen werden, nachdem alle Inhalte einer Seite fertig geladen wurden – entweder unmittelbar nachdem die Seite interaktiv wird (strategy="afterInteractive") oder träge während der Leerlaufzeit des Browsers (strategy="lazyOnload").

Weiterführende Literatur

Optimierung von Schriftarten

Previous Page

Überwachung Ihrer Core Web Vitals

Next Page

On this page