Effizientes Laden von Drittanbieter-JavaScript

Milica Mihajlija

Wenn ein Drittanbieterskript den Seitenaufbau verlangsamt, hast du 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 Ladeprozess von Drittanbieter-Skripts mit den folgenden Techniken optimieren können:

• Attribut async oder defer für <script>-Tags verwenden
• Frühzeitige Verbindungen zu erforderlichen Ursprüngen herstellen
• Lazy Loading
• 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 er den HTML-Code parsen kann, während das Skript im Hintergrund geladen wird, und das Skript anschließend ausführen. Auf diese Weise blockieren Skriptdownloads nicht die DOM-Erstellung oder das Seiten-Rendering, sodass der Nutzer die Seite sehen kann, bevor alle Skripts geladen sind.

<script async src="script.js">

<script defer src="script.js">

Der Unterschied zwischen den Attributen async und defer besteht darin, dass der Browser die Skripts ausführt.

async

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

defer

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

• Verwenden Sie async, wenn das Skript früher im Ladevorgang ausgeführt werden soll.
• Verwende defer für weniger wichtige Ressourcen wie einen Videoplayer, der „below the fold“ (mit Scrollen sichtbar) platziert wird.

Die Verwendung dieser Attribute kann den Seitenaufbau erheblich beschleunigen. Beispielsweise verzögerte Telegraph alle Skripts, einschließlich Anzeigen und Analysen, und verbesserte die Ladezeit der Anzeigen um durchschnittlich vier Sekunden.

Frühzeitige Verbindungen zu erforderlichen Ursprüngen herstellen

Durch das Herstellen frühzeitiger Verbindungen zu wichtigen Drittanbieterursprüngen können 100–500 ms eingespart werden.

Zwei <link>-Typen, preconnect und dns-prefetch, können hier hilfreich sein:

preconnect

<link rel="preconnect"> teilt dem Browser mit, 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 der Browser eine Ressource vom vorab verbundenen Ursprung anfordert, 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, das DNS einer bestimmten Domain nur aufzulösen, bevor diese explizit aufgerufen wird.

Der preconnect-Hinweis eignet sich am besten nur für die kritischsten Verbindungen. Verwenden Sie <link rel=dns-prefetch> für weniger wichtige Drittanbieterdomains.

<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 das Laden von Seiten erheblich verlangsamen, wenn sie schlecht aufgebaut sind. Wenn sie nicht wichtig sind oder sich „below the fold“ befinden (wenn Nutzer scrollen müssen, um sie zu sehen), ist Lazy Loading eine gute Möglichkeit, die Seitengeschwindigkeit und die Farbe zu verbessern. So gelangen Nutzer schneller zu den Hauptseiten und sind nutzerfreundlicher.

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. Für Google Ad Manager gibt es eine Dokumentation zum Lazy Loading von Anzeigen.

Du kannst auch festlegen, dass Inhalte von Drittanbietern nur dann geladen werden, wenn Nutzer zuerst zu diesem Abschnitt der Seite scrollen.

Intersection Observer ist eine Browser-API, die effizient erkennt, wenn ein Element in den Darstellungsbereich des Browsers eintritt oder diesen verlässt, und Sie können damit diese Technik implementieren. Lazysizes ist eine beliebte JavaScript-Bibliothek für Lazy Loading von Bildern und iframes. YouTube-Einbettungen und Widgets werden unterstützt. Außerdem bietet es optionale Unterstützung für Intersection Observer.

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

Bereitstellung von Drittanbieterskripts optimieren

Im Folgenden finden Sie einige empfohlene Strategien, um die Verwendung von Drittanbieter-Skripts zu optimieren.

CDN-Hosting von Drittanbietern

Häufig stellen Drittanbieter URLs für von ihnen gehostete JavaScript-Dateien zur Verfügung. Diese werden normalerweise in einem Content Delivery Network (CDN) bereitgestellt. Die Vorteile dieses Ansatzes sind, 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 sich jedoch nicht am selben Ursprung wie die übrigen Ressourcen befinden, 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 ausfü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 Ladezeiten um 1,7 Sekunden verkürzen, indem sie ein A/B-Testskript selbst hostete.

Selbsthosting hat jedoch einen großen Nachteil: Scripts können veraltet sein und erhalten keine automatischen Updates bei einer API-Änderung oder einem Sicherheitsupdate.

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

Als Alternative zum Selbsthosting können Sie Service Worker verwenden, um Skripts von Drittanbieterservern im Cache zu speichern. So haben Sie mehr Kontrolle über das Caching und können gleichzeitig die Vorteile der CDNs von Drittanbietern nutzen.

Sie können steuern, wie oft Skripts noch einmal aus dem Netzwerk abgerufen werden, und eine Ladestrategie erstellen, die Anfragen nach nicht wesentlichen Drittanbieterressourcen drosselt, bis ein Nutzer zu einer Schlüsselinteraktion auf der Seite gelangt. Mit preconnect können Sie frühzeitige Verbindungen herstellen und die Netzwerkkosten senken.