Effizientes Laden von Drittanbieter-JavaScript

Milica Mihajlija

Wenn ein Drittanbieter-Script die Ladezeit Ihrer Seite verlangsamt, haben Sie zwei Möglichkeiten, die Leistung zu verbessern:

• Entfernen Sie sie, wenn sie Ihrer Website keinen eindeutigen Mehrwert bietet.
• Den Ladevorgang optimieren

In diesem Beitrag wird erläutert, wie Sie den Ladeprozess von Drittanbieterskripts mithilfe der folgenden Techniken optimieren:

• async- oder defer-Attribut 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 Scripts die DOM-Erstellung und das Rendering verzögern, sollten Sie Drittanbieter-Scripts immer asynchron laden, es sei denn, das Script muss ausgeführt werden, bevor die Seite gerendert werden kann.

Die Attribute async und defer teilen dem Browser mit, dass er mit dem Parsen der HTML-Datei fortfahren kann, während das Script im Hintergrund geladen wird, und das Script dann nach dem Laden ausführen kann. So wird durch Scriptdownloads weder die DOM-Erstellung noch das Seiten-Rendering blockiert. Der Nutzer kann die Seite also sehen, bevor alle Scripts 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

Scripts mit dem Attribut async werden bei der ersten Gelegenheit nach dem Download und vor dem Ereignis load des Fensters ausgeführt. Daher ist es möglich und wahrscheinlich, dass async-Skripts nicht in der Reihenfolge ausgeführt werden, in der sie im HTML-Code aufgeführt sind. Außerdem können sie das DOM-Erstellen unterbrechen, wenn der Download abgeschlossen ist, während der Parser noch aktiv ist.

Scripts mit async können das HTML-Parsen weiterhin blockieren.

defer

Skripte mit dem Attribut defer werden nach Abschluss des HTML-Parsings, aber vor dem Ereignis DOMContentLoaded ausgeführt. defer sorgt dafür, dass Scripts in der Reihenfolge ausgeführt werden, in der sie in der HTML-Datei erscheinen, und den Parser nicht blockieren.

Scripts mit defer werden ausgeführt, bis der Browser mit dem Parsen des HTML-Codes fertig ist.

• Verwenden Sie async, wenn das Skript früher im Ladeprozess ausgeführt werden muss.
• Verwenden Sie defer für weniger wichtige Ressourcen wie einen Videoplayer, der sich „below the fold“ befindet.

Die Verwendung dieser Attribute kann den Seitenaufbau erheblich beschleunigen. Telegraph hat beispielsweise alle Scripts, einschließlich Anzeigen und Analysen, verschoben und so die Anzeigenladezeit um durchschnittlich vier Sekunden verkürzt.

Hinweis :Analytics-Skripts werden in der Regel frühzeitig geladen, damit Sie keine wertvollen Analysedaten verpassen. Glücklicherweise gibt es Muster, mit denen Analysen verzögert initialisiert werden, während die Daten des frühen Seitenladevorgangs beibehalten werden.

Frühzeitige Verbindungen zu erforderlichen Ursprüngen herstellen

Sie können 100 bis 500 ms sparen, indem Sie frühzeitig Verbindungen zu wichtigen Drittanbieterquellen herstellen.

Die beiden <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 der Vorgang so schnell wie möglich starten soll. Wenn der Browser eine Ressource vom vorab verbundenen Ursprung anfordert, beginnt der Download sofort.

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

Achtung: Stellen Sie nur eine Vorabverbindung zu kritischen Domains her, die die Seite bald aufruft, da der Browser alle Verbindungen schließt, die innerhalb von 10 Sekunden nicht verwendet werden. Eine unnötige Vorverbindung kann andere wichtige Ressourcen verzögern. Begrenzen Sie daher die Anzahl der vorab verbundenen Domains und testen Sie die Auswirkungen der Vorverbindung.

dns-prefetch

<link rel="dns-prefetch> verarbeitet nur einen kleinen Teil dessen, was <link rel="preconnect"> verarbeitet. Das Herstellen einer Verbindung umfasst den DNS-Lookup und den TCP-Handshake sowie bei sicheren Ursprüngen TLS-Verhandlungen. dns-prefetch weist den Browser an, nur das DNS einer bestimmten Domain aufzulösen, bevor dieser explizit aufgerufen wurde.

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

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

Die Browserunterstützung für dns-prefetch unterscheidet sich geringfügig von der preconnect-Unterstützung. Daher kann dns-prefetch als Fallback für Browser dienen, 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">

Drittanbieterressourcen per Lazy Load laden

Eingebettete Ressourcen von Drittanbietern können das Laden von Seiten erheblich verlangsamen, wenn sie schlecht aufgebaut sind. Wenn sie nicht kritisch sind oder sich unterhalb des sichtbaren Bereichs befinden (d. h., wenn Nutzer scrollen müssen, um sie zu sehen), ist Lazy Loading eine gute Möglichkeit, die Seitengeschwindigkeit und die Paint-Messwerte zu verbessern. So wird der Inhalt der Hauptseite für die Nutzer schneller angezeigt und die Nutzererfahrung wird verbessert.

Laden Sie Inhalte „below the fold“ (mit Scrollen sichtbar) über Lazy Loading.

Ein effektiver Ansatz besteht darin, Drittanbieterinhalte per Lazy Loading nach dem Laden der Hauptseite zu laden. Anzeigen eignen sich gut für diesen Ansatz.

Anzeigen sind für viele Websites eine wichtige Einnahmequelle, aber Nutzer kommen wegen des Contents. Wenn Sie Lazy Loading für Anzeigen verwenden und den Hauptinhalt schneller ausliefern, können Sie den Gesamtprozentsatz der Sichtbarkeit einer Anzeige erhöhen. MediaVine hat beispielsweise zu Lazy-Loading-Anzeigen gewechselt und konnte die Seitenladezeit um 200 % verbessern. In der Google Ad Manager-Dokumentation finden Sie Informationen zum Lazy-Load von Anzeigen.

Sie können auch festlegen, dass Inhalte von Drittanbietern nur geladen werden, wenn Nutzer zum ersten Mal zu diesem Abschnitt der Seite scrollen.

Intersection Observer ist eine Browser-API, die effizient erkennt, wann ein Element den Browser-Viewport betritt oder verlässt. Sie können sie verwenden, um diese Technik zu implementieren. lazysizes ist eine beliebte JavaScript-Bibliothek zum Lazy-Laden von Bildern und iframes. YouTube-Embeds und Widgets werden unterstützt. Außerdem wird der Intersection Observer optional unterstützt.

Achtung :Seien Sie vorsichtig, wenn Sie Lazy Loading für Ressourcen mit JavaScript verwenden. Wenn JavaScript nicht geladen werden kann, z. B. aufgrund unzureichender Netzwerkbedingungen, werden Ihre Ressourcen überhaupt nicht geladen.

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

Bereitstellung von Drittanbieterskripts optimieren

Im Folgenden finden Sie einige empfohlene Strategien zur Optimierung der Verwendung von Drittanbieter-Scripts.

CDN-Hosting von Drittanbietern

Drittanbieter stellen in der Regel URLs für von ihnen gehostete JavaScript-Dateien bereit, in der Regel in einem Content Delivery Network (CDN). Der Vorteil dieses Ansatzes besteht darin, dass Sie schnell loslegen können – Sie müssen nur die URL kopieren und einfügen – und es gibt keinen Wartungsaufwand. Der Drittanbieter übernimmt die Serverkonfiguration und die Scriptupdates.

Da sie jedoch nicht denselben Ursprung haben wie die übrigen Ressourcen, verursacht das Laden von Dateien aus einem öffentlichen CDN Netzwerkkosten. Der Browser muss eine DNS-Suche ausfü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 die Möglichkeit, das Caching zu steuern. Wenn Sie sich auf die Caching-Strategie einer anderen Person verlassen, werden möglicherweise zu oft Skripts unnötigerweise noch einmal aus dem Netzwerk abgerufen.

Skripts von Drittanbietern selbst hosten

Mit der Option, Skripts von Drittanbietern selbst zu hosten, haben Sie mehr Kontrolle über den Ladevorgang eines Skripts. Wenn Sie Ihr Konto selbst hosten, haben Sie folgende Möglichkeiten:

• Reduzieren Sie die DNS-Lookup- und Roundtrip-Zeiten.
• HTTP-Caching-Header verbessern
• Nutzen Sie HTTP/2 oder das neuere HTTP/3.

So gelang es Casper beispielsweise, die Ladezeiten um 1,7 Sekunden zu verkürzen, indem ein A/B-Testskript selbst gehostet wurde.

Das Self-Hosting hat jedoch einen großen Nachteil: Scripts können veraltet werden und werden nicht automatisch aktualisiert, wenn es eine API-Änderung oder eine Sicherheitskorrektur gibt.

Achtung :Das manuelle Aktualisieren von Skripts kann den Entwicklungsprozess erheblich beschleunigen und Ihnen entgehen möglicherweise wichtige Aktualisierungen. Wenn Sie nicht das CDN-Hosting zur Bereitstellung aller Ressourcen von Drittanbietern verwenden, verpassen Sie auch das Edge-Caching und müssen die Serverkomprimierung optimieren.

Dienst-Worker zum Caching von Scripts von Drittanbieter-Servern verwenden

Als Alternative zum Selbsthosting können Sie Dienst-Worker verwenden, um Skripts von Drittanbieterservern im Cache zu speichern. So haben Sie mehr Kontrolle über das Caching und profitieren gleichzeitig von den Vorteilen der CDNs von Drittanbietern.

Sie können steuern, wie oft Skripts noch einmal aus dem Netzwerk abgerufen werden, und eine Ladestrategie erstellen, die Anfragen für nicht wesentliche Drittanbieterressourcen drosselt, bis ein Nutzer zu einer wichtigen Interaktion auf der Seite gelangt. Mit preconnect können Sie frühzeitig Verbindungen herstellen und die Netzwerkkosten senken.