Eine lange Aufgabe ist JavaScript-Code, der den Hauptthread über einen längeren Zeitraum monopolisiert und dazu führt, dass die Benutzeroberfläche „einfriert“.
Während das Laden einer Seite andauert, können lange Aufgaben den Haupt-Thread belegen und dazu führen, dass die Seite nicht auf Nutzereingaben reagiert, auch wenn sie fertig erscheint. Klicks und Tippen funktionieren oft nicht, weil interaktive Funktionen wie Ereignis-Listener und Klick-Handler noch nicht an UI-Elemente angehängt wurden. Daher können lange Aufgaben die Zeit bis zur Interaktivität erheblich verlängern.
In den Chrome-Entwicklertools können Sie jetzt langwierige Aufgaben visualisieren, sodass Sie leichter erkennen, welche Aufgaben optimiert werden müssen.
Was zählt als Aufgabe, die lange gedauert hat?
CPU-intensive lange Aufgaben werden durch komplexe Aufgaben verursacht, die länger als 50 ms dauern. Gemäß dem RAIL-Modell sollten Sie Nutzereingabeereignisse innerhalb von 50 ms verarbeiten, um eine sichtbare Antwort innerhalb von 100 ms zu gewährleisten und die Verbindung zwischen Aktion und Reaktion aufrechtzuerhalten.
Wichtiger Punkt: Das RAIL-Modell empfiehlt, innerhalb von 100 ms eine visuelle Reaktion auf Nutzereingaben zu liefern. Die Grenzwerte des Messwerts Interaction to Next Paint (INP) erlauben jedoch bis zu 200 ms, um realistischere Erwartungen zu setzen, insbesondere auf langsameren Geräten.
Gibt es auf meiner Seite lange Aufgaben, die die Interaktivität verzögern könnten?
Bisher mussten Sie in den Chrome DevTools manuell nach „langen gelben Blöcken“ von Scriptcode suchen, die länger als 50 Millisekunden sind, oder die Long Tasks API verwenden, um herauszufinden, welche Aufgaben die Interaktivität verzögern.
Um den Workflow für die Leistungsprüfung zu vereinfachen, werden in DevTools jetzt lange Aufgaben visualisiert. Aufgaben, die langwierig sind, sind rot gekennzeichnet.
So verwenden Sie das neue Visualisierungstool:
- Erfassen Sie im Steuerfeld „Leistung“ einen Trace zum Laden einer Webseite.
- In der Hauptansicht des Threads sehen Sie ein rotes Ausrufezeichen. Aufgaben sollten jetzt grau markiert und mit Aufgabe gekennzeichnet sein.
- Bewegen Sie den Mauszeiger auf einen grauen Balken. Es wird ein Dialogfeld mit der Dauer der Aufgabe und der Angabe angezeigt, ob es sich um eine lange Aufgabe handelt.
Was ist der Grund für lange Aufgaben?
Wenn Sie die Ursache für eine lange Aufgabe ermitteln möchten, wählen Sie die graue Leiste Aufgabe aus. Wählen Sie im Drop-down-Menü unten Bottom-Up und Nach Aktivität gruppieren aus. So sehen Sie, welche Aktivitäten insgesamt am meisten dazu beigetragen haben, dass die Aufgabe so lange gedauert hat. Im folgenden Beispiel ist die Ursache für die Verzögerung eine Reihe von kostenintensiven DOM-Abfragen.
Wie lassen sich lange Aufgaben optimieren?
Große Scripts sind oft eine Hauptursache für lange Aufgaben. Sie können sie auch aufteilen. Achten Sie auch auf Drittanbieter-Scripts, die ebenfalls lange Aufgaben enthalten können, die die Interaktivität der Hauptinhalte verzögern.
Teilen Sie Ihre Arbeit in Chunks auf, die in weniger als 50 Millisekunden ausgeführt werden, und führen Sie diese Chunks am richtigen Ort und zur richtigen Zeit aus. Für einige von ihnen ist der richtige Ort möglicherweise nicht im Haupt-Thread, sondern in einem Service Worker. Eine Anleitung zum Aufteilen langer Aufgaben finden Sie unter Lange Aufgaben optimieren und Idle Until Urgent von Phil Walton.
Ihre Seiten sollten responsiv sein. Wenn Sie lange Aufgaben minimieren, können Sie dafür sorgen, dass Nutzer Ihre Website gerne besuchen. Weitere Informationen zu langwierigen Aufgaben finden Sie unter Nutzerorientierte Leistungsmesswerte.