Asynchrones Laden: async vs. defer und Performance

Was ist asynchrones Laden?

Asynchrones Laden bedeutet, eine Ressource zu holen, ohne dass der Browser andere Arbeit wie das Parsen von HTML oder das Rendern unterbrechen muss. Im Web gehören async- und defer-Skripte, dynamisches import(), per Lazy Loading geladene Bilder und fetch-Anfragen dazu. Die Seite bleibt reaktionsfähig, während die Ressource eintrifft, und wird genutzt, sobald sie bereit ist.

async vs. defer

Ein klassisches Skript ohne eines der beiden Attribute wird sofort geladen und ausgeführt, und der Browser hält dabei das Parsen der Seite an. async und defer laden das Skript beide parallel zum Parsen. Sie unterscheiden sich darin, wann es läuft.

• async: läuft, sobald es geladen ist, was das Parsen unterbrechen kann, und garantiert keine Reihenfolge zwischen Skripten.
• defer: läuft nach dem Parsen des Dokuments, vor DOMContentLoaded, und in der Reihenfolge, in der die Skripte in der Seite stehen.
• type="module": standardmäßig verzögert, defer hat dort keine Wirkung.

Beide Attribute wirken nur bei Skripten mit src; bei Inline-Skripten bewirken sie nichts. Sind beide gesetzt, gilt async. Quelle: MDN, das script-Element.

Beispiel

<!-- classic script, blocks parsing -->
<script src="app.js"></script>

<!-- downloads in parallel, runs when ready, any order -->
<script async src="analytics.js"></script>

<!-- downloads in parallel, runs after parsing, in order -->
<script defer src="app.js"></script>

<!-- module scripts are deferred by default -->
<script type="module" src="main.js"></script>

Eine übliche Aufteilung: defer für den eigenen App-Code, der vom DOM und von anderen Skripten abhängt, und async für unabhängige Drittanbieter-Skripte wie Analytics.

Weitere Formen asynchronen Ladens

• Dynamischer Import: import() lädt ein ES-Modul bei Bedarf und liefert ein Promise. Es ist die Grundlage des Code-Splittings, bei dem ein Chunk erst bei Bedarf geladen wird.
• Lazy Images und iFrames: loading="lazy" verschiebt Ressourcen außerhalb des Sichtbereichs, bis der Nutzer in ihre Nähe scrollt. Siehe Lazy Loading.
• Datenanfragen: fetch- und XHR-Aufrufe, die die Seite nach dem ersten Rendern füllen.

Häufige Fehler

• async bei voneinander abhängigen Skripten. Die Reihenfolge ist nicht garantiert, ein Plugin kann also vor seiner Bibliothek laufen.
• Das Hero-Bild per Lazy Loading laden. Das größte Element im sichtbaren Bereich misst meist Largest Contentful Paint, ein Aufschub verzögert also die Metrik. Laden Sie nur per Lazy Loading, was außerhalb des Sichtbereichs startet.
• Blockierende Skripte im Head. Sie halten den kritischen Rendering-Pfad auf. Verzögern Sie sie, wenn der erste Paint sie nicht braucht.
• Spät erscheinende Inhalte, die das Layout verschieben. Reservieren Sie Platz für asynchron geladene Inhalte.
• Keine Fehlerbehandlung. Ein fehlgeschlagenes import() oder fetch lehnt sein Promise ab; behandeln Sie das, sonst erscheint die Funktion still nie.

Asynchrones Laden, Testen und Monitoring

Asynchrones Laden verbessert, was der Nutzer zuerst sieht, verlagert die Arbeit aber nur, statt sie zu entfernen. Die Skripte werden weiterhin geladen und ausgeführt. Messen Sie das Ergebnis daher im Browser mit DOM-Ready- und Core-Web-Vitals-Werten, nicht nur mit Server-Antwortzeiten. Unser Leitfaden zur JavaScript-Performance zeigt, wie async, defer und Code-Splitting die Arbeit im Main-Thread beeinflussen, und das Page-Speed-Monitoring verfolgt die Wirkung jeder Änderung regelmäßig.

Häufige Fragen zu asynchronem Laden

Was ist der Unterschied zwischen async und defer?

Beide laden das Skript, ohne den Parser zu blockieren. async führt es aus, sobald es da ist, in beliebiger Reihenfolge. defer führt es nach dem Parsen aus, vor DOMContentLoaded, in Dokumentreihenfolge.

Was sollte ich verwenden?

Nutzen Sie defer für Skripte, die das DOM brauchen oder voneinander abhängen. Nutzen Sie async für unabhängige Skripte wie Analytics, die laufen können, sobald sie eintreffen.

Funktionieren async und defer bei Inline-Skripten?

Nein. Ohne src-Attribut haben sie keine Wirkung. Modul-Skripte sind standardmäßig verzögert.

Macht asynchrones Laden eine Seite schneller?

Meist verbessert es, wie früh die Seite gerendert und nutzbar wird, weil der Parser nicht aufgehalten wird. Die Gesamtarbeit bleibt gleich, prüfen Sie die Wirkung daher mit echten Messungen.

Ist Lazy Loading dasselbe wie asynchrones Laden?

Lazy Loading ist eine Variante davon: Eine Ressource wird erst bei Bedarf geholt, etwa wenn ein Bild in den Sichtbereich kommt. Async-Skripte werden sofort geholt, nur ohne die Seite zu blockieren.