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
oderdefer
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.
![Diagramm eines Parser-Blockierungsskripts mit einem asynchronen Attribut](https://web.developers.google.cn/static/articles/efficiently-load-third-party-javascript/image/diagram-parser-blocking-020263bc7658c.png?authuser=6&hl=de)
async
können das HTML-Parsing weiterhin blockieren.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.
![Diagramm des Parserflusses mit einem Skript mit Defer-Attribut](https://web.developers.google.cn/static/articles/efficiently-load-third-party-javascript/image/diagram-parser-flow-a-s-f9a9ef751f974.png?authuser=6&hl=de)
defer
werden erst ausgeführt, wenn der Browser den HTML-Code vollständig geparst hat.- 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 Diagramm einer Webseite, das auf einem Mobilgerät angezeigt wird, wobei scrollbarer Inhalt über den Bildschirm hinausgeht. Der Content "below the fold" ist entsättigt, weil er noch nicht geladen wurde.](https://web.developers.google.cn/static/articles/efficiently-load-third-party-javascript/image/a-diagram-a-webpage-show-0c848a2212482.png?authuser=6&hl=de)
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.