Defer vs Async JavaScript und wie dies die Core Web Vitals beeinflusst
Erfahren Sie, wann Sie JavaScript async machen und wann Sie es deferren sollten, um die besten Core Web Vitals Ergebnisse zu erzielen
Defer vs Async JavaScript und wie dies die Core Web Vitals beeinflusst
In diesem Artikel werde ich den Unterschied zwischen defer vs async JavaScript zeigen und warum dies die Core Web Vitals beeinflusst
Wann immer ich die Core Web Vitals eines Kunden auditiere, stelle ich oft fest, dass es auf einer Seite wenig Unterscheidung zwischen parser blocking (sync), asynchronem oder deferred JavaScript gibt. Das ist schade, denn verschiedene Skripte haben unterschiedliche optimale Timings.
Table of Contents!
Kurz gesagt:
'Normales' JavaScript im Head der Seite wird ausgeführt, bevor das Parsen des HTML beginnt, async Skripte blockieren den Start des Parsens nicht, werden aber ausgeführt, sobald sie heruntergeladen sind. Deferred Skripte werden ausgeführt, nachdem die Seite geparsed wurde.
Im Allgemeinen ist das async-Attribut eine gute Wahl für Skripte, die nicht mit dem DOM interagieren müssen, wie z.B. Skripte, die Bilder oder Videos laden. Das defer-Attribut ist eine gute Wahl für Skripte, die mit dem DOM interagieren müssen, wie z.B. Skripte, die Widgets initialisieren oder Event Listener hinzufügen. Lassen Sie beides weg, wenn Ihr Skript massive Änderungen am sichtbaren Viewport vornimmt.
1. Synchrones JavaScript (Sync):
Standardmäßig sind JavaScripts im Head der Seite synchrone Skripte. Wenn JavaScript-Code synchron ausgeführt wird, blockiert er sofort den Main Thread des Browsers, bis das Skript vollständig ausgeführt ist. Das bedeutet, dass der Browser warten muss, bis der JavaScript-Code fertig ist, bevor er mit anderen Aufgaben fortfährt, wie z.B. dem Rendern des DOM. Infolgedessen kann synchrones JavaScript die Seitengeschwindigkeit und Responsivität erheblich beeinträchtigen, insbesondere bei größeren und komplexen Skripten. Wenn eine Seite synchrones JavaScript enthält, kann der Browser keine anderen Ressourcen laden oder die Seite rendern, bis das JavaScript ausgeführt ist, was zu möglichen Verzögerungen beim Laden der Seite führt.
<!DOCTYPE html>
<html>
<head>
<title>Sync JavaScript Beispiel</title>
<script src="script1.js"></script>
<script src="script2.js"></script>
</head>
<body>
<!-- Seiteninhalt hier -->
</body>
</html>
2. Asynchrones JavaScript (Async):
Asynchrones JavaScript ermöglicht es dem Browser, mit der Ausführung anderer Aufgaben fortzufahren, während das Skript im Hintergrund heruntergeladen wird. Durch die Verwendung des async-Attributs im <script>-Tag geben Entwickler an, dass das Skript nicht vom DOM abhängig ist und unabhängig ausgeführt werden kann. Der Browser wartet nicht, bis das async-Skript fertig geladen ist, bevor er mit dem Rendern der Seite fortfährt. Als Ergebnis haben async Skripte das Potenzial, die Seitengeschwindigkeit zu verbessern, insbesondere bei langsameren Verbindungen, da sie den Critical Rendering Path nicht blockieren.
<!DOCTYPE html>
<html>
<head>
<title>Async JavaScript Beispiel</title>
<script src="script1.js" ></script>
<script src="script2.js" ></script>
</head>
<body>
<!-- Seiteninhalt hier -->
</body>
</html>
Es ist wichtig zu beachten, dass async Skripte in einer unvorhersehbaren Reihenfolge feuern können, da sie ausgeführt werden, sobald sie verfügbar sind, unabhängig von ihrer Reihenfolge im HTML-Dokument. Wenn Skripte voneinander abhängig sind, kann die Verwendung von async Abhängigkeitsfehler verursachen.
3. Deferred JavaScript:
Deferred JavaScript, angegeben durch das defer-Attribut im <script>-Tag, ermöglicht es Skripten, im Hintergrund heruntergeladen zu werden, während der Browser das HTML-Dokument weiter parst. Ähnlich wie async blockieren deferred Skripte den Critical Rendering Path nicht, was zu schnellerem Laden der Seite führt. Der wichtigste Unterschied ist jedoch, dass deferred Skripte ihre Ausführungsreihenfolge beibehalten und in der Reihenfolge ausgeführt werden, in der sie im HTML-Dokument erscheinen. Deferred Skripte werden ausgeführt, nachdem das DOM vollständig geparsed ist und kurz bevor das DOMContentLoaded-Ereignis gefeuert wird.
<!DOCTYPE html>
<html>
<head>
<title>Defer JavaScript Beispiel</title>
<script src="script1.js" ></script>
<script src="script2.js" ></script>
</head>
<body>
<!-- Seiteninhalt hier -->
</body>
</html>
Die Verwendung von defer ist vorteilhaft für Skripte, die vom DOM abhängig sind und in einer bestimmten Reihenfolge ausgeführt werden müssen, da sichergestellt wird, dass die erforderlichen DOM- Elemente verfügbar sind, wenn das Skript ausgeführt wird. Dies kann vorteilhaft sein für Skripte, die DOM-Manipulationen durchführen oder Abhängigkeiten von anderen Skripten haben.
| Attribut | Wann das Skript geladen wird | Wann das Skript ausgeführt wird |
|---|---|---|
keines | Im Hintergrund | Vor dem Aufbau des DOM |
async | Im Hintergrund | Sofort nach dem Laden |
defer | Im Hintergrund | Nachdem der Rest der Seite geparsed wurde, in der Reihenfolge, in der es im HTML erscheint |
Wie verbessern async und defer die Page Speed?
Synchrones JavaScript (Sync) kann das Laden der Seite erheblich verlangsamen und die Website weniger responsiv machen, insbesondere wenn die Skripte groß sind oder lange dauern, um ausgeführt zu werden.
Asynchrones JavaScript (Async) kann die Seitengeschwindigkeit verbessern, indem es unabhängigen Skripten erlaubt, parallel zu anderen Ressourcen zu laden. Jedoch muss Vorsicht walten gelassen werden, um Abhängigkeiten korrekt zu verwalten und unerwartetes Verhalten zu vermeiden.
Deferred JavaScript kann auch die Seitengeschwindigkeit verbessern, indem es den Critical Rendering Path nicht blockiert. Es stellt sicher, dass das DOM bereit ist, bevor Skripte ausgeführt werden, die davon abhängig sind, was zu einer vorhersehbareren und kontrollierteren Ausführungsreihenfolge führt.
Best Practices:
- Verwenden Sie asynchron (async) für unabhängige Skripte, die nicht vom DOM abhängig sind und außer der Reihe ausgeführt werden können.
- Verwenden Sie deferred (defer) für Skripte, die vom DOM abhängig sind und in einer bestimmten Reihenfolge ausgeführt werden müssen, insbesondere beim Durchführen von DOM-Manipulationen.
- Vermeiden Sie die Verwendung von synchronem JavaScript, wo immer möglich, da dies einen negativen Einfluss auf die Seitengeschwindigkeit und Benutzererfahrung hat.
Durch die Verwendung der richtigen Ladetechnik für JavaScript-Dateien können Sie die Seitengeschwindigkeit optimieren, die Benutzererfahrung verbessern und für reibungslosere Interaktionen auf ihren Websites sorgen. Das Verständnis der Unterschiede zwischen sync, async und defer und ihrer Auswirkungen auf das Laden der Seite ist entscheidend für den Aufbau leistungsfähiger Webanwendungen.
Bitte beachten Sie, dass die Wirksamkeit der Verwendung von sync, async oder defer Attributen je nach spezifischem Kontext und Inhalt der Website variieren kann. Regelmäßiges Testen und Leistungsanalysen sind entscheidend, um die Ladestrategie der Seite zu verfeinern und optimale Ergebnisse für verschiedene Szenarien zu gewährleisten.
Einen Schritt weiter gehen, Skripte bei Bedarf laden
Async und defer können eine Seite beschleunigen, indem sie den Parser nicht blockieren, aber es ist wichtig zu beachten, dass 'Skripte aussetzen' nicht alle Ihre Probleme lösen wird. Zum Beispiel ist das Largest Contentful Paint Element anfällig für Netzwerk- und CPU-Konkurrenz, die durch deferred und async Skripte verursacht wird. Der Interaction to Next Paint wird auch durch Skripte beeinflusst, die früh während des Seitenladens ausgeführt werden. Deshalb sollten Sie, wo immer möglich, Skripte bei Bedarf laden, um mehr Kontrolle über ihre Auswirkungen auf die Seitenleistung zu haben. Neugierig? Lesen Sie, wie wir Skripte bei Bedarf laden
CrUX data is 28 days late.
Google provides data 28 days late. CoreDash provides data in real-time. Debug faster.
- Real-Time Insights
- Faster Debugging
- Instant Feedback
