Async
Was bedeutet Async und wie wird es verwendet?
Der Begriff "Async" (Kurzform für "asynchronous") wird in der Webentwicklung verwendet, um ein Attribut im <script>-Tag zu beschreiben, das die Ausführung von JavaScript-Skripten asynchron ermöglicht.
Das bedeutet, dass das Skript unabhängig vom Laden des HTML-Dokuments heruntergeladen und ausgeführt wird. Im Gegensatz zu herkömmlichen Skripten, die das Laden und Rendern der Seite blockieren, wird ein asynchrones Skript parallel zum Laden der Seite ausgeführt.
Kostenloser Cookie, DSGVO und TDDDG Risiko Scanner
Wie hoch ist das Bußgeld Risiko für Ihre Webseite? Jetzt Webseiten Adresse eintragen und ermitteln lassen durch welche Cookies und Third-Party Services Risiken entstehen.
Warum wird Async verwendet?
Das async-Attribut wird verwendet, um die Performance von Webseiten zu verbessern. Da asynchrone Skripte nicht das Laden der Seite blockieren, wird der Inhalt schneller angezeigt, was die Benutzererfahrung erheblich verbessert.
Dies ist besonders wichtig für Webseiten, die viele externe Skripte verwenden, wie zum Beispiel Tracking-Codes oder Werbeanzeigen.
Welche Vorteile bietet die Nutzung von Async?
- Beschleunigte Seitenladezeiten:
Asynchrone Skripte laden und führen sich parallel zum Rest der Seite aus, was zu schnelleren Ladezeiten führt. - Unabhängige Ausführung:
Da die Skripte unabhängig voneinander ausgeführt werden, kann das Laden einer Ressource die anderen nicht blockieren, was zu einer flüssigeren und effizienteren Ladeerfahrung führt. - Optimierung für Content-Sites:
Webseiten, die stark von externen Ressourcen abhängig sind, können mit async ihre Ladezeiten und die Nutzererfahrung verbessern.
Gibt es Herausforderungen bei der Nutzung von Async?
- Unvorhersehbare Ausführungsreihenfolge:
Da asynchrone Skripte in der Reihenfolge ausgeführt werden, in der sie geladen werden, kann dies zu Problemen führen, wenn die Reihenfolge der Skripte wichtig ist. Dies kann zu Fehlern führen, insbesondere wenn ein Skript von einem anderen abhängig ist. - Kompatibilität mit älteren Browsern:
Obwohl async von den meisten modernen Browsern unterstützt wird, kann es in älteren Browsern zu Problemen kommen.
Wie wird Async in der Praxis eingesetzt?
Ein typisches Beispiel für die Verwendung des async-Attributs sieht folgendermaßen aus:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Beispielseite</title>
- <script src="script1.js" async></script>
- <script src="script2.js" async></script>
- </head>
- <body>
- <h1>Willkommen auf meiner Website</h1>
- <p>Dies ist eine Beispielseite.
- </p></body></html>
In diesem Beispiel werden die Skripte script1.js und script2.js asynchron geladen und ausgeführt, unabhängig davon, in welcher Reihenfolge sie im Dokument erscheinen oder wann sie vollständig geladen sind.
Hinweis zur Verwendung von CCM19
Das CCM19-Skript sollte nicht mit dem async-Attribut versehen werden, da dies die Funktionsfähigkeit des Consent-Managers beeinträchtigen kann. CCM19 muss sicherstellen, dass alle notwendigen Einwilligungen vor dem Laden anderer Skripte eingeholt werden. Daher sollte es frühzeitig und in der richtigen Reihenfolge ausgeführt werden, um die Datenschutzbestimmungen korrekt umzusetzen.
