Verzögern lange JavaScript-Aufgaben Ihre Zeit bis Interaktivität?

Hier erfahren Sie, wie Sie kostspielige Arbeiten diagnostizieren, die Nutzerinteraktionen verhindern.

Addy Osmani
Addy Osmani

Lange Aufgaben können dazu führen, dass der Hauptthread überlastet ist, was die Nutzerinteraktion verzögert. Mit den Chrome-Entwicklertools lassen sich jetzt lange Aufgaben visualisieren. So lassen sich Aufgaben, die optimiert werden können, leichter erkennen.

Wenn Sie Ihre Seiten mit Lighthouse prüfen, kennen Sie sich vielleicht schon mit dem Messwert Zeit bis Interaktivität aus. Dieser Messwert gibt an, wann Nutzer mit Ihrer Seite interagieren und eine Antwort erhalten können. Aber wussten Sie, dass lange (JavaScript-)Aufgaben viel zu einer schlechten TTI beitragen können?

„Zeit bis Interaktivität“ im Lighthouse-Bericht

Was sind lange Aufgaben?

Eine lange Aufgabe besteht aus JavaScript-Code, der den Hauptthread über einen längeren Zeitraum hinweg monopolisiert und so dazu führt, dass die UI „einfriert“.

Während eine Webseite geladen wird, kann es vorkommen, dass die Seite mit langen Aufgaben den Hauptthread verknüpft und die Seite dann nicht mehr auf Nutzereingaben reagiert, selbst wenn sie bereit zu sein scheint. Klicks und Tippen funktionieren oft nicht, da Event-Listener, Klick-Handler usw. noch nicht angehängt wurden.

CPU-intensive lange Aufgaben werden durch komplexe Aufgaben verursacht, die länger als 50 ms dauern. Warum 50 ms? Das RAIL-Modell empfiehlt, dass Sie Nutzereingabeereignisse in 50 ms verarbeiten, um eine sichtbare Antwort innerhalb von 100 ms sicherzustellen. Andernfalls wird die Verbindung zwischen Aktion und Reaktion unterbrochen.

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“ suchen, die länger als 50 ms sind, oder die Long Tasks API verwenden, um herauszufinden, welche Aufgaben die Interaktivität beeinträchtigt haben. Das könnte etwas umständlich sein.

Screenshot des Entwicklertools-Bereichs „Leistung“, der die Unterschiede zwischen kurzen und langen Aufgaben zeigt

Um Ihren 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.

Entwicklertools, die lange Aufgaben als graue Balken im Steuerfeld „Leistung“ mit einer roten Markierung für lange Aufgaben visualisieren

  • Zeichnen Sie im Bereich „Leistung“ einen Trace beim Laden einer Webseite auf.
  • Suchen Sie in der Ansicht des Hauptthreads nach einer roten Markierung. Aufgaben sollten jetzt grau dargestellt sein („Aufgabe“).
  • Wenn Sie den Mauszeiger auf einen Balken bewegen, sehen Sie die Dauer der Aufgabe und ob sie als „lang“ eingestuft wurde.

Was sind die Gründe für meine langen Aufgaben?

Um herauszufinden, was eine lange Aufgabe verursacht, wählen Sie die graue Taskleiste aus. Wählen Sie in der Leiste darunter Nach oben 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 scheint es eine kostspielige Reihe von DOM-Abfragen zu sein.

Wenn du in den Entwicklertools eine lange Aufgabe (mit „Aufgabe“ bezeichnet) auswählst, können wir die Aktivitäten aufschlüsseln, die für diese Aufgabe verantwortlich waren.

Wie lassen sich lange Aufgaben optimieren?

Große Skripts sind oft eine Hauptursache für lange Aufgaben. Es empfiehlt sich daher, sie aufzuteilen. Behalte auch die Scripts von Drittanbietern im Auge. Lange Aufgaben können die Interaktivität von primären Inhalten verzögern.

Teilen Sie Ihre gesamte Arbeit in kleine Blöcke auf (die in weniger als 50 ms ausgeführt werden) und führen Sie diese am richtigen Ort und zur richtigen Zeit aus. Der richtige Ort kann sich sogar außerhalb des Hauptthreads in einem Worker befinden. Idle Until Urgent von Phil Walton ist eine gute Lektüre zu diesem Thema. Im Artikel Lange Aufgaben optimieren finden Sie allgemeine Strategien zum Verwalten und Trennen langer Aufgaben.

Achten Sie darauf, dass Ihre Seiten responsiv sind. Das Minimieren langer Aufgaben ist eine hervorragende Möglichkeit für einen angenehmen Besuch Ihrer Website. Weitere Informationen zu langen Aufgaben finden Sie unter Nutzerorientierte Leistungsmesswerte.