Interaktivität verbessern: Total Blocking Time (TBT) und INP

Was ist das Problem#

Eine Website kann visuell längst fertig geladen wirken und trotzdem auf Klicks, Tippen oder Tastatureingaben verzögert reagieren. Ursache ist meist, dass der Browser-Main-Thread mit der Ausführung von JavaScript beschäftigt ist und deshalb keine Kapazität hat, eine Nutzereingabe sofort zu verarbeiten. EverAudit erfasst dieses Problem aus zwei Richtungen: im Labor über die Total Blocking Time (total-blocking-time) sowie verwandte Kennzahlen wie den maximalen potenziellen First Input Delay (max-potential-fid), die Main-Thread-Arbeitslast (mainthread-work-breakdown) und die Ausführungszeit beim Start (bootup-time); im Feld über das reale Interaction to Next Paint (INP) echter Besucher aus dem Chrome UX Report (field-inp-poor, field-inp-needs-improvement).

Warum EverAudit das prüft#

INP ist einer der drei Core Web Vitals und misst — anders als LCP oder CLS — nicht den Ladevorgang, sondern die Reaktionsfähigkeit einer Seite während der gesamten Nutzung. Da INP ausschließlich als Felddatum aus echten Nutzerinteraktionen entsteht, kann ein einzelner automatisierter Lighthouse-Testlauf diesen Wert nicht direkt erzeugen. EverAudit nutzt deshalb die Labor-Kennzahlen (TBT, Main-Thread-Arbeit, Bootup-Zeit) als Näherung, die im selben Testlauf messbar sind, und ergänzt sie optional um das reale INP aus dem Chrome UX Report — bewertet über dessen eigene p75-Einstufung (schlecht/verbesserungswürdig/gut) statt über einen einzelnen Millisekundenwert, da Google INP-Feldwerte genau so klassifiziert.

Welche Auswirkung hat es#

Eine träge reagierende Seite wirkt unfertig und unprofessionell, selbst wenn der eigentliche Ladevorgang längst abgeschlossen ist. Besucher, die auf einen Button tippen und keine unmittelbare Reaktion sehen, tippen häufig erneut — mit dem Risiko doppelter Formularabsendungen oder ungewollter Mehrfachaktionen. Gerade auf mobilen Geräten mit schwächerer Hardware fällt dieser Effekt stärker aus als im Test auf einem leistungsstarken Desktop-Rechner. Da INP zu den Core Web Vitals zählt, wirkt sich eine schlechte Interaktivität zusätzlich auf die Bewertung der Seitenerfahrung durch Google aus.

Wie Sie es beheben#

1. Lange JavaScript-Tasks aufteilen. Zerlegen Sie umfangreiche Berechnungen oder DOM-Manipulationen in kleinere Abschnitte und geben Sie dem Browser dazwischen die Kontrolle zurück:

function processInChunks(items, chunkSize = 50) {
  let i = 0;
  function step() {
    const end = Math.min(i + chunkSize, items.length);
    for (; i < end; i++) processItem(items[i]);
    if (i < items.length) setTimeout(step, 0);
  }
  step();
}

2. Nicht-kritisches JavaScript verzögern. Skripte, die nicht sofort für die erste Interaktion gebraucht werden, per defer einbinden oder erst nach dem ersten sichtbaren Rendern nachladen.

3. Third-Party-Skripte prüfen und entschärfen. Analytics-, Werbe- oder Chat-Widget-Skripte gehören zu den häufigsten Ursachen für Main-Thread-Blockierung, weil sie eigenständigen Code unabhängig vom Seiteninhalt ausführen. Nicht essenzielle Skripte mit async laden oder erst bei tatsächlicher Nutzerinteraktion (z. B. Klick auf ein Chat-Icon) nachladen.

4. Bundle-Größe reduzieren. Ungenutzten Code per Code-Splitting entfernen oder verzögert laden, statt ihn beim initialen Seitenaufruf komplett mitzuliefern — siehe Render-Blocking & Bundle für Details zum Bundling selbst.

5. Schwere, nicht UI-relevante Arbeit in einen Web Worker auslagern. Berechnungen, die keinen direkten DOM-Zugriff benötigen, blockieren im Web Worker nicht den Main Thread und damit auch nicht die Reaktion auf Nutzereingaben.

6. Event-Handler schlank halten. Verarbeiten Sie in einem Klick- oder Eingabe-Handler nur das Nötigste synchron; alles, was warten kann (z. B. das Nachladen weiterer Daten), außerhalb des kritischen Pfads erledigen.

Fazit#

Interaktivitätsprobleme entstehen fast immer dadurch, dass der Browser mit JavaScript-Ausführung beschäftigt ist, wenn ein Besucher eigentlich eine Reaktion erwartet. Wer lange Tasks aufteilt, Third-Party-Skripte entschärft und unnötigen Code entfernt, verbessert sowohl die Labor-Kennzahl Total Blocking Time als auch das reale INP-Erlebnis echter Besucher — und damit einen der drei Core Web Vitals unmittelbar.