Effizientes Laden von Drittanbieter-JavaScript

Vermeiden Sie häufige Fallstricke bei der Verwendung von Drittanbieter-Skripts, um Ladezeiten und Nutzererfahrung zu verbessern.

Wenn ein Drittanbieterskript den Seitenaufbau verlangsamt, gibt es zwei Möglichkeiten, die Leistung zu verbessern:

  • Entfernen Sie sie, wenn sie Ihrer Website keinen eindeutigen Mehrwert verleihen.

  • Optimieren Sie den Ladevorgang.

In diesem Beitrag wird erläutert, wie Sie den Ladevorgang von Drittanbieter-Skripts mithilfe der folgenden Techniken optimieren können:

  1. Attribut async oder defer für <script>-Tags verwenden

  2. Frühzeitige Verbindungen zu erforderlichen Ursprüngen herstellen

  3. Lazy Loading

  4. Bereitstellung von Drittanbieterskripts optimieren

Verwenden Sie async oder defer.

Da synchrone Skripts das Erstellen und Rendern des DOMs verzögern, sollten Sie Skripts von Drittanbietern immer asynchron laden, es sei denn, das Skript muss ausgeführt werden, bevor die Seite gerendert werden kann.

Die Attribute async und defer teilen dem Browser mit, dass der HTML-Code parsen muss, während das Skript im Hintergrund geladen wird, und das Skript nach dem Laden ausführen. So wird die DOM-Erstellung und das Seiten-Rendering nicht durch Skriptdownloads blockiert. Das hat zur Folge, dass der Nutzer die Seite sehen kann, bevor alle Skripts vollständig geladen sind.

<script async src="script.js">

<script defer src="script.js">

Der Unterschied zwischen async und defer besteht darin, dass sie mit der Ausführung des Skripts beginnen.

async

Skripts mit dem Attribut async werden bei der ersten Gelegenheit nach Abschluss des Downloads und vor dem load-Ereignis des Fensters ausgeführt. Daher kann es sein, dass async-Scripts nicht in der Reihenfolge ausgeführt werden, in der sie im HTML-Code erscheinen. Es bedeutet auch, dass sie die DOM-Erstellung unterbrechen können, wenn der Download abgeschlossen ist, während der Parser noch arbeitet.

Diagramm eines Parser-Blockierungsskripts mit einem asynchronen Attribut

defer

Skripts mit dem Attribut defer werden ausgeführt, nachdem das HTML-Parsing vollständig abgeschlossen ist, jedoch vor dem Ereignis DOMContentLoaded. defer garantiert, dass Skripts in der Reihenfolge ausgeführt werden, in der sie im HTML-Code erscheinen. Der Parser wird dabei nicht blockiert.

Diagramm des Parserflusses mit einem Skript mit Defer-Attribut

  • Verwenden Sie async, wenn das Skript früher im Ladevorgang ausgeführt werden muss.

  • Verwenden Sie defer für weniger wichtige Ressourcen. Beispiel: Ein Videoplayer, der „below the fold“ (mit Scrollen sichtbar) platziert ist

Die Verwendung dieser Attribute kann den Seitenaufbau erheblich beschleunigen. Telegraph hat vor Kurzem alle Skripts verschoben, einschließlich Anzeigen und Analysen, und die Ladezeit der Anzeigen um durchschnittlich vier Sekunden verkürzt.

Frühzeitige Verbindungen zu erforderlichen Ursprüngen herstellen

Sie können 100 bis 500 ms sparen, wenn Sie frühe Verbindungen zu wichtigen Drittanbieterursprüngen herstellen.

Zwei <link>-Typen können hier hilfreich sein:

  • preconnect

  • dns-prefetch

preconnect

<link rel="preconnect"> informiert den Browser darüber, dass Ihre Seite eine Verbindung zu einem anderen Ursprung herstellen möchte und dass der Vorgang so bald wie möglich gestartet werden soll. Wenn eine Anfrage für eine Ressource vom vorab verbundenen Ursprung gestellt wird, beginnt der Download sofort.

<link rel="preconnect" href="https://cdn.example.com">

dns-prefetch

<link rel="dns-prefetch> verarbeitet einen kleinen Teil dessen, was von <link rel="preconnect"> verarbeitet wird. Zum Herstellen einer Verbindung sind der DNS-Lookup und der TCP-Handshake sowie für sichere Ursprünge TLS-Verhandlungen erforderlich. dns-prefetch weist den Browser an, nur das DNS einer bestimmten Domain aufzulösen, bevor diese explizit aufgerufen wird.

Der preconnect-Hinweis eignet sich am besten für die kritischsten Verbindungen. Für weniger wichtige Domains von Drittanbietern sollten Sie <link rel=dns-prefetch> verwenden.

<link rel="dns-prefetch" href="http://example.com">

Die Browserunterstützung für dns-prefetch unterscheidet sich geringfügig von der preconnect-Unterstützung, sodass dns-prefetch als Fallback für Browser dienen kann, die preconnect nicht unterstützen. Verwenden Sie separate Link-Tags, um dies sicher zu implementieren:

<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">

Lazy Loading von Ressourcen von Drittanbietern

Eingebettete Ressourcen von Drittanbietern können einen großen Anteil an der langsamen Seitengeschwindigkeit haben, wenn sie schlecht erstellt werden. Wenn sie nicht wichtig sind oder sich „below the fold“ befinden, d. h. wenn Nutzer scrollen müssen, um sie zu sehen, ist Lazy Loading eine gute Möglichkeit, die Seitengeschwindigkeit und die Farbe zu verbessern. So können Nutzer schneller auf die Hauptseite zugreifen und sie nutzerfreundlicher gestalten.

Ein Diagramm einer Webseite, das auf einem Mobilgerät angezeigt wird, wobei scrollbarer Inhalt über den Bildschirm hinausgeht. Der Content &quot;below the fold&quot; ist entsättigt, weil er noch nicht geladen wurde.

Ein effektiver Ansatz ist das Lazy Loading von Drittanbieterinhalten, nachdem die Inhalte der Hauptseite geladen wurden. Anzeigen sind für diesen Ansatz geeignet.

Anzeigen sind für viele Websites eine wichtige Einnahmequelle, aber die Nutzer kommen wegen des Contents. Durch Lazy Loading von Anzeigen und schnelleres Bereitstellen des Hauptinhalts lässt sich der Prozentsatz für die allgemeine Sichtbarkeit einer Anzeige erhöhen. Beispielsweise hat MediaVine zu Anzeigen mit Lazy Loading gewechselt und konnte die Ladegeschwindigkeit der Seite um 200% steigern. Eine Anleitung zum Lazy Loading von Anzeigen finden Sie in der offiziellen Dokumentation von DoubleClick.

Ein alternativer Ansatz besteht darin, Inhalte von Drittanbietern nur zu laden, wenn Nutzende nach unten zu diesem Abschnitt der Seite scrollen.

Intersection Observer ist eine Browser-API, die auf effiziente Weise erkennt, wann ein Element in den Darstellungsbereich des Browsers eintritt oder diesen verlässt, und kann zur Implementierung dieses Verfahrens verwendet werden. Lazysizes ist eine beliebte JavaScript-Bibliothek für Lazy Loading von Bildern und iframes. YouTube-Einbettungen und -Widgets werden unterstützt. Außerdem wird IntersectionObserver optional unterstützt.

Das loading-Attribut für Lazy Loading von Bildern und iFrames ist eine tolle Alternative zu JavaScript-Techniken und ist seit Kurzem in Chrome 76 verfügbar.

Bereitstellung von Drittanbieterskripts optimieren

CDN-Hosting von Drittanbietern

Häufig stellen Drittanbieter die URLs der von ihnen gehosteten JavaScript-Dateien zur Verfügung. Diese werden normalerweise in einem Content Delivery Network (CDN) bereitgestellt. Der Vorteil dieses Ansatzes besteht darin, dass Sie schnell loslegen können – kopieren Sie einfach die URL und fügen Sie sie ein –, und es fällt kein Wartungsaufwand an. Der Drittanbieter übernimmt die Serverkonfiguration und Skriptaktualisierungen.

Da sie jedoch nicht vom selben Ursprung wie Ihre übrigen Ressourcen stammen, verursacht das Laden von Dateien aus einem öffentlichen CDN Netzwerkkosten. Der Browser muss einen DNS-Lookup durchführen, eine neue HTTP-Verbindung herstellen und – bei sicheren Ursprüngen – einen SSL-Handshake mit dem Server des Anbieters durchführen.

Wenn Sie Dateien von Drittanbieterservern verwenden, haben Sie selten Kontrolle über das Caching. Wenn Sie die Caching-Strategie einer anderen Person nutzen, werden Skripts möglicherweise zu oft unnötigerweise noch einmal aus dem Netzwerk abgerufen.

Drittanbieter-Scripts selbst hosten

Mit selbst gehosteten Drittanbieter-Skripts haben Sie mehr Kontrolle über den Ladeprozess eines Skripts. Mit einem Selbsthosting können Sie:

  • Reduzieren Sie die DNS-Lookup- und -Umlaufzeit.
  • Verbessern Sie das HTTP-Caching.
  • Nutzen Sie HTTP/2 oder das neuere HTTP/3.

Casper konnte beispielsweise die Ladezeit um 1,7 Sekunden verkürzen, indem sie ein A/B-Testskript selbst hostete.

Selbsthosting hat jedoch einen großen Nachteil: Skripts sind möglicherweise nicht mehr aktuell und erhalten bei einer API-Änderung oder einem Sicherheitsupdate keine automatischen Updates.

Service Worker verwenden, um Skripts von Drittanbieterservern im Cache zu speichern

Eine Alternative zum Selbsthosting, mit der Sie mehr Kontrolle über das Caching haben und gleichzeitig die Vorteile des CDN von Drittanbietern nutzen können, ist die Verwendung von Service Workern zum Caching von Skripts von Drittanbieterservern. So können Sie steuern, wie oft Skripts erneut aus dem Netzwerk abgerufen werden, und eine Ladestrategie erstellen, die Anfragen nach nicht wesentlichen Drittanbieterressourcen drosselt, bis die Seite einen wichtigen Nutzermoment erreicht. Die Verwendung von preconnect zum Erstellen frühzeitiger Verbindungen kann in diesem Fall auch die Netzwerkkosten in gewissem Umfang reduzieren.