JavaScript defer und async erklärt: Render-Blocking endlich eliminieren

Du öffnest eine Website und startest auf ein weißes Nichts. Die Seite lädt, aber nichts erscheint. Dieses Phänomen hat oft einen klaren Schuldigen: Render-blockierendes JavaScript. Der Browser entdeckt ein Script-Tag im HTML, hält alles an, lädt das Script, führt es aus, und erst dann geht es weiter. Das kostet manchmal mehrere Sekunden.

Warum JavaScript den Seitenaufbau blockiert

Standardmäßig, also ohne besondere Attribute, funktioniert ein Script-Tag so:

1. Browser parst HTML und trifft auf ein <script src="...">-Tag
2. HTML-Parsing wird sofort gestoppt
3. Script wird heruntergeladen
4. Script wird ausgeführt
5. HTML-Parsing wird fortgesetzt

Bei mehreren Scripts im Header, wie es bei vielen WordPress-Websites üblich ist, summiert sich das schnell auf 500-2000ms reiner Wartezeit, bevor der Nutzer irgendetwas sieht.

Das async-Attribut: parallel laden, sofort ausführen

Mit async wird das Script parallel zum HTML-Parsing heruntergeladen. Sobald der Download fertig ist, wird das Parsing aber unterbrochen und das Script ausgeführt.

• Geeignet für: Analytics-Scripts, Tracking-Pixel, unabhängige Widgets
• Nicht geeignet für: Scripts, die auf andere Scripts angewiesen sind oder auf das DOM zugreifen müssen
• Reihenfolge: Nicht garantiert, welches Script zuerst ausgeführt wird

Das defer-Attribut: parallel laden, am Ende ausführen

Mit defer wird das Script ebenfalls parallel heruntergeladen, aber erst ausgeführt, nachdem das gesamte HTML geparst wurde.

• Geeignet für: Fast alle Scripts, die auf das DOM zugreifen
• Reihenfolge: Garantiert in der Dokumentreihenfolge
• Beste Wahl für: jQuery, Slider-Scripts, Formular-Validierung, Menü-Scripts

Die Faustregel: Wenn du nicht sicher bist, nimm defer. Es ist in fast allen Fällen die sicherere Wahl gegenüber async.

Welche Scripts in der Praxis betroffen sind

Auf einer typischen WordPress-Website finden sich folgende Kandidaten für render-blockierendes Verhalten:

• jQuery (wird von fast allen Plugins benötigt)
• Google Tag Manager
• Facebook Pixel und andere Marketing-Scripts
• Slider-Bibliotheken (Swiper, Slick)
• Chat-Widgets (Tidio, LiveChat)
• Cookie-Consent-Tools

Manche dieser Scripts können problemlos auf defer umgestellt werden, andere, wie der Google Tag Manager, haben Besonderheiten zu beachten.

Umsetzung in WordPress

In WordPress gibt es mehrere Wege:

• WP Rocket: Aktiviert defer für alle JavaScripts per Klick, mit Ausnahme-Liste für problematische Scripts
• LiteSpeed Cache / W3 Total Cache: Bieten ähnliche Optionen
• Manuell per functions.php: Mit dem Filter script_loader_tag kannst du gezielt einzelne Scripts anpassen

Wichtig: Nach jeder Änderung die Website auf allen Seiten testen. Manche Scripts brechen, wenn sie zu spät ausgeführt werden. Das lässt sich aber fast immer durch Ausnahmeregeln lösen.

Die Verbindung zwischen JavaScript-Optimierung und deinen Core Web Vitals erfährst du in unserem Artikel Core Web Vitals rot: Was tun?. Wer sich tiefer einlesen möchte, findet mehr im Lexikon-Eintrag zu Render-Blocking.

Bei rocks.optimize identifizieren wir alle render-blockierenden Ressourcen deiner Website und setzen die korrekten Ladestrategien um, ohne dass dabei etwas kaputtgeht.