Long Tasks

TL;DR

Long Tasks sind JavaScript-Aufgaben, die länger als 50ms dauern und den Browser blockieren. Sie verursachen schlechte INP-Werte und träge Interfaces.

Was sind Long Tasks?

Long Tasks sind JavaScript-Ausführungen, die den Hauptthread für mehr als 50 Millisekunden blockieren. Während dieser Zeit kann der Browser nicht auf Nutzereingaben reagieren – die Seite wirkt eingefroren.

Warum 50ms?

50ms ist die Grenze für flüssige Interaktion:

• Nutzer erwarten Feedback innerhalb 100ms
• 50ms für JS, 50ms für Rendering
• Länger = spürbare Verzögerung

Ursachen für Long Tasks

• Große DOM-Manipulationen
• Komplexe Berechnungen
• Parsen großer JSON-Objekte
• Third-Party-Scripts (Analytics, Ads)
• Framework-Initialisierung

Long Tasks finden

• Chrome DevTools Performance Tab
• Lighthouse Performance Audit
• Long Tasks API (PerformanceObserver)

Long Tasks aufteilen

• scheduler.yield() nutzen
• setTimeout/requestIdleCallback
• Web Worker für schwere Berechnungen
• Code in kleinere Chunks teilen

Long Tasks und Nachhaltigkeit

Effizienteres JS ist nachhaltiger:

• Weniger CPU-Last = längere Akkulaufzeit
• Schnellere Reaktion = bessere UX
• Weniger Frustration = weniger Abbruch

Fazit

Long Tasks sind der Feind responsiver Interfaces. Sie aufzuspüren und aufzuteilen ist essentiell für gute INP-Werte.