Scripte nicht blockierend einbinden – HTML5 Attribute defer und async

Ein wichtiger Punkt bei der Performance-Optimierung von Webseiten ist das Einbinden von Scripten in einer Form, die das Rendern der Webseite nicht blockiert. Dabei geht es ganz konkret um das asynchrone Nachladen von Scripten, was meistens selbst über JavaScript realisiert wurde, mittlerweile aber auch in HTML5 möglich ist.

In HTML5 gibt es eine unglaublich einfache Variante Scripte asynchron bzw. nicht blockend nachzuladen. Diese ist so einfach, dass die Nichtverwendung fast schon sträflich sein müsste. Dabei handelt es sich um zwei einfache Attribute.

Konkret geht es um die Attribute „async“ und „defer„, die im HTML <script> Tag gesetzt werden können. Beide Attribute sorgen dafür, dass die eingebundenen Scripte das Laden bzw. Rendern der Webseite nicht blockieren. Ein Beispiel könnte wie folgt aussehen:

<script src="/plugins.js" async></script>
<script src="/plugins.js" defer></script>

Der Unterschied zwischen async und defer

Doch worin besteht nun der Unterschied zwischen den beiden HTML5 Attributen „async“ und „defer“, wenn sie doch vermeintlich beide den selben Effekt haben?

Auf den ersten Blick bewirken beide Attribute tatsächlich den selben Effekt. Die Scripte beginnen unmittelbar mit dem Ladevorgang und zwar ohne die weitere Abarbeitung des HTML-Codes zu blockieren oder auf Fertigstellung des Ladevorgangs zu warten. Bis hierher funktionieren beide Attribute auf die selbe Art und Weise und sind somit identisch.

Der Unterschied liegt bei der Ausführung der Scripte. Mit dem „async“ Attribut werden die Scripte unmittelbar nach dem erfolgreichen Abschluss des Ladevorgangs ausgeführt, dies könnte z.B. auch noch vor Ausführung des window load Events passieren. Weiterhin wird die Reihenfolge der Scripte nicht beachtet. Die Scripte werden getreu dem Motto „First-come, first-served“ abgearbeitet. Wenn es dabei Abhängigkeiten zwischen den Scripten gibt, kann es zu Problemen kommen.

Das „defer“ Attribut ist hier etwas kompatibler und einfacher zu verwenden. Hier werden die Scripte in der Reihenfolge abgearbeitet, in der sie eingebunden wurden. Weiterhin werden sie erst nach dem vollständigen Laden des DOM’s ausgeführt, aber noch bevor das Event DOMContentLoaded getriggert wird.

Fazit: async oder defer

Ein echtes Fazit oder besser gesagt einen echten Nachteil gegenüber der einen oder anderen Funktion gibt es nicht. Für die meisten gut durchgeplanten Webseiten kann problemlos „async“ verwendet werden. Wenn es damit dann doch Probleme geben sollte oder Scripte Abhängigkeiten untereinander aufweisen,  wird zu „defer“ umgeschwenkt.

Mit beiden Attributen wird eine blockierte Ausführung der Webseite verhindert und damit das Ziel erreicht: Die Beschleunigung der Webseite.

Ebenso sind beide Attribute gleichermaßen kompatibel. In den aktuellen WebKit Browsern (Chrome 8+ und Safari 5+) funktionieren sie seit einigen Jahren, Firefox unterstützt beide Attribute seit Version 3.6+, Opera ist seit Version 15+ dabei und der Internet Explorer seit Version 10+.

© Trueffelpix – Fotolia