INP verbessern: So wird deine Website spürbar schneller

Deine Website sieht top aus, lädt ordentlich, aber beim Klick auf einen Button passiert erst mal: nichts. Genau dieses Zögern misst Google mit dem Wert INP (Interaction to Next Paint). Wer seinen INP verbessern will, sorgt dafür, dass die Website spürbar schneller auf Klicks, Taps und Tastatureingaben reagiert. Das freut nicht nur deine Besucher, sondern zahlt auch direkt auf deine Sichtbarkeit bei Google ein, denn INP gehört zu den Core Web Vitals, die Google als Ranking-Signal nutzt. In dieser Anleitung zeigen wir dir Schritt für Schritt, wie du langsame Interaktionen findest, verstehst und behebst. Ganz konkret, mit Beispielen und Code, den du direkt verwenden kannst.

Was ist INP überhaupt?

INP steht für «Interaction to Next Paint» und misst, wie schnell deine Website auf Interaktionen reagiert. Beobachtet werden alle Klicks, Taps und Tastatureingaben während des gesamten Seitenbesuchs. Am Ende zählt die langsamste gemessene Interaktion (Ausreisser werden teilweise ignoriert). Seit März 2024 ist INP offiziell ein Core Web Vital und hat den älteren Messwert FID (First Input Delay) abgelöst.

Google gibt klare Zielwerte vor:

• Gut: 200 Millisekunden oder weniger
• Verbesserungswürdig: zwischen 200 und 500 Millisekunden
• Schlecht: über 500 Millisekunden

Gemessen wird am 75. Perzentil der Seitenaufrufe, getrennt nach Mobile und Desktop. Das heisst: Mindestens drei Viertel deiner Besucher sollen eine Reaktionszeit unter 200 Millisekunden erleben. Es reicht also nicht, wenn die Seite nur auf deinem schnellen Büro-Rechner flott wirkt. Entscheidend ist, was echte Nutzer mit durchschnittlichen Smartphones im Alltag erleben.

Die drei Phasen einer Interaktion

Um deinen INP verbessern zu können, musst du wissen, woraus sich die Reaktionszeit zusammensetzt. Jede Interaktion besteht aus drei Phasen:

• Eingabeverzögerung (Input Delay): Die Zeit vom Klick bis zum Start deines Event-Codes. Sie entsteht, wenn der Browser gerade mit anderen Aufgaben beschäftigt ist, etwa mit dem Laden und Ausführen von Skripten.
• Verarbeitungsdauer (Processing Duration): Die Zeit, die dein Event-Code selbst benötigt, um vollständig durchzulaufen.
• Darstellungsverzögerung (Presentation Delay): Die Zeit, bis der Browser das nächste Bild mit dem sichtbaren Ergebnis der Interaktion zeichnet.

Alle drei Phasen zusammen ergeben die gesamte Latenz. Der Übeltäter ist fast immer der sogenannte Main Thread des Browsers: ein einzelner Arbeitsstrang, der sich um JavaScript, Layout und Rendering gleichzeitig kümmern muss. Blockiert ihn eine Aufgabe länger als 50 Millisekunden, spricht man von einem «Long Task». Während so ein Long Task läuft, kann der Browser auf keine Eingabe reagieren. Deine Besucher klicken, und es passiert schlicht nichts.

Schritt für Schritt: So kannst du deinen INP verbessern

Schritt 1: Miss zuerst, wo du stehst

Prüf zuerst deine echten Nutzerdaten, bevor du irgendetwas optimierst. Google stellt dafür mit dem Chrome User Experience Report (CrUX) einen riesigen Datensatz aus echten Chrome-Besuchen bereit. Am einfachsten kommst du über PageSpeed Insights an diese Werte: URL eingeben, und du siehst sofort, ob deine Seite bei INP im grünen, orangen oder roten Bereich liegt.

Noch besser sind Daten aus einem Real User Monitoring (RUM). Solche Tools zeigen dir nicht nur den INP-Wert, sondern auch, welche konkrete Interaktion auf welcher Seite das Problem verursacht, ob sie während oder nach dem Laden auftrat und ob es ein Klick, Tap oder Tastendruck war. Gerade bei komplexeren Websites lohnt sich das, weil du dann gezielt statt auf Verdacht optimierst.

Notiere dir den gemessenen Ausgangswert, bevor du mit der Optimierung loslegst. Nur so erkennst du später schwarz auf weiss, wie viel deine Anpassungen tatsächlich gebracht haben, und kannst die Wirkung einzelner Massnahmen sauber miteinander vergleichen. Felddaten reagieren übrigens träge: Bis sich eine Verbesserung in den CrUX-Zahlen zeigt, können mehrere Wochen vergehen, also hab etwas Geduld.

Schritt 2: Stelle langsame Interaktionen im Labor nach

Kennst du die problematischen Interaktionen, wechselst du ins «Labor», also in die Chrome DevTools auf deinem Rechner. Öffne das Performance-Panel, starte die Aufzeichnung und führe die verdächtige Interaktion aus: Menü öffnen, Filter setzen, Formular abschicken. In der Aufzeichnung siehst du dann genau, welche Funktionen wie lange laufen und welche der drei Phasen die Zeit frisst. Ein Tipp aus der Praxis: Teste auch bewusst während des Seitenladens, denn dann ist der Main Thread am stärksten ausgelastet und Schwächen zeigen sich am deutlichsten. Aktiviere zusätzlich die CPU-Drosselung in den DevTools, um ein durchschnittliches Smartphone zu simulieren.

Schritt 3: Teile lange Aufgaben auf

Die wirksamste Massnahme gegen schlechte INP-Werte: Gib dem Browser regelmässig die Kontrolle zurück. Statt eine grosse Aufgabe am Stück abzuarbeiten, teilst du sie in kleine Häppchen. Zwischen den Häppchen kann der Browser auf Eingaben reagieren und Zwischenstände zeichnen.

Besonders elegant ist das Muster, nur das visuell Wichtige sofort zu erledigen und alles andere auf später zu verschieben. Stell dir ein Suchfeld mit Live-Filter vor: Das Textfeld soll sofort reagieren, die Trefferliste, die Zählung und das Speichern dürfen einen Wimpernschlag später kommen:

textBox.addEventListener('input', (inputEvent) => {
  // Das UI sofort aktualisieren, damit die Eingabe
  // ohne Verzögerung sichtbar wird.
  updateTextBox(inputEvent);

  // Alles Unkritische bis nach dem nächsten Frame aufschieben.
  requestAnimationFrame(() => {
    setTimeout(() => {
      const text = textBox.textContent;
      updateWordCount(text);
      checkSpelling(text);
      saveChanges(text);
    }, 0);
  });
});

Der Trick: requestAnimationFrame wartet auf den nächsten Zeichenvorgang, und setTimeout verschiebt die restliche Arbeit in eine neue, eigene Aufgabe. So blockiert der unkritische Teil nie die sichtbare Reaktion. Dieses Muster funktioniert in allen Browsern. In modernen Chrome-Versionen gibt es zusätzlich die Methode scheduler.yield(), mit der du noch feiner steuern kannst, wann der Browser übernehmen darf, ohne dass deine Aufgabe ihren Platz in der Warteschlange verliert.

Schritt 4: Entlaste das Rendering

Auch wenn dein JavaScript schlank ist, kann die Darstellung bremsen. Je grösser der DOM deiner Seite (also die Anzahl der HTML-Elemente), desto teurer wird jedes Neuzeichnen. Eine Produktliste mit tausend Einträgen, verschachtelte Container aus dem Page-Builder oder riesige Mega-Menüs treiben die Rendering-Kosten in die Höhe.

Ein unterschätzter Helfer ist die CSS-Eigenschaft content-visibility. Sie sorgt dafür, dass der Browser Bereiche ausserhalb des sichtbaren Fensters erst dann rendert, wenn sie in die Nähe des Viewports kommen:

.blog-kommentare {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

Mit contain-intrinsic-size gibst du dem Browser eine geschätzte Höhe an, damit die Scrollleiste nicht springt. Gerade bei langen Seiten mit vielen Sektionen kann das die Rendering-Arbeit deutlich reduzieren, sowohl beim ersten Laden als auch bei jeder Interaktion.

Schritt 5: Vermeide Layout Thrashing

Ein klassischer Performance-Killer ist das sogenannte Layout Thrashing: Dein Code ändert per JavaScript einen Stil und liest direkt danach eine Layout-Eigenschaft wie eine Höhe oder Breite aus. Der Browser wird dadurch gezwungen, das Layout sofort und synchron neu zu berechnen, obwohl er das normalerweise gesammelt und später erledigen würde. Passiert das in einer Schleife über viele Elemente, addieren sich die Kosten schnell zu spürbaren Verzögerungen.

Die Lösung ist einfach: Erst alle Werte lesen, dann alle Werte schreiben. In den Chrome DevTools erkennst du Layout Thrashing an rot markierten Rendering-Aufgaben mit dem Hinweis «Recalculate Style» oder «Layout».

Typische INP-Fallen auf KMU-Websites

Aus unserer Erfahrung mit Schweizer KMU-Websites tauchen ein paar Verdächtige immer wieder auf:

• Chat-Widgets und Drittanbieter-Skripte: Sie laden oft viel JavaScript und blockieren den Main Thread genau dann, wenn Besucher zum ersten Mal interagieren wollen. Lade solche Widgets verzögert oder erst nach der ersten Interaktion.
• Cookie-Banner: Häufig das Erste, worauf geklickt wird, und damit oft die gemessene Interaktion. Ein schwerfälliges Consent-Tool kann deinen INP-Wert im Alleingang ruinieren.
• Tag Manager voller Alt-Lasten: Über Jahre gesammelte Tracking-Snippets laufen alle auf dem Main Thread. Räume regelmässig auf und wirf raus, was niemand mehr auswertet.
• Überladene Slider und Animationen: Grosse Skript-Bibliotheken für Effekte, die kaum jemand wahrnimmt, kosten Reaktionszeit an jeder Ecke.
• Seitenbaukasten mit Verschachtelungswut: Page-Builder erzeugen gern tief verschachtelte HTML-Strukturen, die den DOM aufblähen und jedes Neuzeichnen verteuern.

Die gute Nachricht: Schon zwei, drei gezielte Eingriffe bringen oft den Sprung vom roten in den grünen Bereich. Und weil INP alle Interaktionen über den ganzen Besuch hinweg bewertet, profitieren deine Besucher bei jedem einzelnen Klick davon.

Fazit: INP verbessern lohnt sich doppelt

Eine reaktionsschnelle Website fühlt sich hochwertig an, senkt Absprungraten und wird von Google mit besseren Chancen in den Suchresultaten belohnt. Der Weg dahin ist kein Hexenwerk: messen, die langsamste Interaktion finden, lange Aufgaben aufteilen, Rendering entlasten. INP verbessern ist dabei kein einmaliges Projekt, sondern ein Kreislauf. Nach jeder Optimierung zeigt dir die nächste Messung, wo sich der nächste Engpass versteckt.

Wenn dir dafür die Zeit oder das technische Know-how fehlt, unterstützen wir dich gern. Von der Performance-Analyse über die Umsetzung bis zum laufenden Monitoring: Schau dir unsere Leistungen an oder nimm direkt Kontakt auf. Gemeinsam machen wir deine Website spürbar schneller.

Häufige Fragen

Was ist ein guter INP-Wert?

Google stuft 200 Millisekunden oder weniger als gut ein, Werte über 500 Millisekunden als schlecht. Gemessen wird am 75. Perzentil deiner echten Besucher, getrennt nach Mobile und Desktop. Deine Seite sollte also auch auf durchschnittlichen Smartphones flott reagieren.

Wie finde ich heraus, welche Interaktion meinen INP verschlechtert?

Starte mit Felddaten aus PageSpeed Insights oder einem Real User Monitoring, um betroffene Seiten zu finden. Danach stellst du die Interaktion in den Chrome DevTools mit dem Performance-Panel nach und siehst genau, welcher Code die Zeit verbraucht.

Beeinflusst INP mein Google-Ranking?

Ja, INP gehört zu den Core Web Vitals und fliesst damit in die Bewertung der Page Experience ein. Wichtiger noch: Eine träge Website vergrault Besucher. Schnelle Reaktionszeiten verbessern also Ranking und Conversion gleichzeitig.