Eine lange Aufgabe ist JavaScript-Code, der den Hauptthread über einen längeren Zeitraum monopolisiert und dazu führt, dass die UI „einfriert“.
Während eine Seitenseite geladen wird, können lange Aufgaben den Hauptthread verbinden und dazu führen, dass die Seite nicht mehr auf Nutzereingaben reagiert, selbst wenn sie bereit zu sein scheint. Klicks und Fingertipps funktionieren oft nicht, da interaktive Funktionen wie Event-Listener und Klick-Handler noch nicht an UI-Elemente angehängt wurden. Aus diesem Grund können lange Aufgaben Ihre Zeit bis Interaktivität erheblich verlängern.
Mit den Chrome-Entwicklertools können jetzt lange Aufgaben visualisiert werden. So lassen sich Aufgaben, die optimiert werden müssen, leichter erkennen.
Was zählt als lange Aufgabe?
CPU-intensive lange Aufgaben werden durch komplexe Aufgaben verursacht, die länger als 50 ms dauern. Das RAIL-Modell empfiehlt, dass Sie Nutzereingabeereignisse in 50 ms verarbeiten, um eine sichtbare Antwort innerhalb von 100 ms zu gewährleisten und die Verbindung zwischen Aktion und Reaktion aufrechtzuerhalten.
Wichtiger Hinweis: Während das RAIL-Modell vorschlägt, eine visuelle Reaktion auf Nutzereingaben innerhalb von 100 ms bereitzustellen, lassen die Grenzwerte des Messwerts Interaction to Next Paint (INP) bis zu 200 ms zu, um besser erreichbare Erwartungen zu setzen, insbesondere bei langsameren Geräten.
Gibt es auf meiner Seite lange Aufgaben, die die Interaktivität verzögern könnten?
Bisher mussten Sie in den Chrome-Entwicklertools manuell nach "langen gelben Blöcken" eines Skripts mit einer Länge von mehr als 50 ms suchen oder die Long Tasks API verwenden, um herauszufinden, welche Aufgaben die Interaktivität verzögerten.
Um den Workflow für die Leistungsprüfung zu vereinfachen, visualisieren die Entwicklertools jetzt lange Aufgaben. Aufgaben (grau dargestellt) sind mit einer roten Markierung versehen, wenn es sich um Long Tasks handelt.
So verwenden Sie das neue Visualisierungstool:
- Zeichnen Sie beim Laden einer Webseite im Bereich „Leistung“ ein Trace auf.
- Suchen Sie in der Ansicht des Hauptthreads nach einer roten Markierung. Aufgaben sollten jetzt grau markiert und mit Task beschriftet sein.
- Halten Sie den Mauszeiger über einen grauen Balken. Ein Dialogfeld mit der Dauer der Aufgabe wird angezeigt und es wird angegeben, ob es sich um eine lange Aufgabe handelt.
Was sind die Gründe für meine langen Aufgaben?
Um die Ursache einer langen Aufgabe zu ermitteln, wählen Sie die graue Taskleiste aus. Wählen Sie in der Leiste darunter Bottom-up und Nach Aktivität gruppieren aus. So können Sie sehen, welche Aktivitäten (insgesamt) am meisten zur so langen Ausführung der Aufgabe beigetragen haben. Im folgenden Beispiel sieht die Ursache der Verzögerung wie eine kostspielige Reihe von DOM-Abfragen aus.
Wie lassen sich lange Aufgaben optimieren?
Große Skripts sind oft eine Hauptursache für lange Aufgaben. Sie sollten sie aufteilen. Behalten Sie auch Drittanbieter-Skripts im Auge, die auch lange Aufgaben enthalten können, die dazu führen, dass primäre Inhalte interaktiv werden.
Teilen Sie Ihre gesamte Arbeit in Blöcke auf, die in weniger als 50 ms ausgeführt werden, und führen Sie diese Blöcke am richtigen Ort und zur richtigen Zeit aus. Der richtige Ort für einige von ihnen könnte außerhalb des Hauptthreads in einem Service Worker liegen. Eine Anleitung zum Unterteilen langer Aufgaben finden Sie unter Optimize Long Tasks (Lange Aufgaben optimieren) und Idle Until Urgent von Phil Walton.
Achten Sie darauf, dass Ihre Seiten responsiv sind. Durch das Minimieren langer Aufgaben können Sie dafür sorgen, dass der Besuch Ihrer Website für Ihre Nutzer angenehm ist. Weitere Informationen zu langen Aufgaben finden Sie unter Nutzerorientierte Leistungsmesswerte.