INP (Interaction to Next Paint), im Tech-Kontext.
INP misst, wie lange die Seite nach einer Eingabe bis zum sichtbaren Ergebnis braucht. Google wertet bis 200 Millisekunden gut, über 500 schlecht.
Interaction to Next Paint misst die Reaktionszeit der Seite auf Eingaben: vom Klick, Tippen oder Tastendruck bis zum nächsten gezeichneten Bild. Gewertet wird nicht der Durchschnitt, sondern nahezu die schlechteste Interaktion eines Besuchs. Google nennt bis 200 Millisekunden gut, 200 bis 500 verbesserungswürdig und darüber schlecht. INP hat im März 2024 die frühere Metrik FID als Core Web Vital abgelöst und ist deutlich strenger, weil auch späte Interaktionen mitzählen und nicht nur die erste. Schlechte Werte entstehen fast immer durch lange Aufgaben im Hauptthread: Hydration, teure Zustandsänderungen, große Listen ohne Virtualisierung und fremde Skripte aus Tag-Managern.
Beispiele aus dem Mittelstand
- Ein Filter in einer Produktliste rechnet bei jedem Tastendruck über tausende Einträge, die Eingabe hakt sichtbar.
- Ein Consent-Werkzeug lädt beim ersten Klick mehrere Skripte nach und blockiert dabei den Hauptthread.
// Lange Aufgaben sichtbar machen, die INP verschlechtern
new PerformanceObserver((liste) => {
for (const eintrag of liste.getEntries()) {
console.log("Lange Aufgabe", Math.round(eintrag.duration), "ms");
}
}).observe({ type: "longtask", buffered: true });// Arbeit aufteilen, damit der Browser zwischendurch zeichnen kann
async function verarbeite(zeilen) {
for (const zeile of zeilen) {
rechne(zeile);
await new Promise((weiter) => setTimeout(weiter, 0));
}
}Folge-Fragen
Was ist der Unterschied zu FID?
FID maß nur die Verzögerung der ersten Eingabe. INP betrachtet alle Interaktionen und zählt bis zum sichtbaren Ergebnis.
Warum zeigt Lighthouse keinen INP-Wert?
Weil im Testlauf niemand klickt. INP entsteht aus echten Interaktionen und steht deshalb nur in den Felddaten.
Welche Ursache ist am häufigsten?
Fremde Skripte und zu viel JavaScript beim Start. Danach folgen teure Zustandsänderungen in großen Listen.
Hilft ein schnellerer Server?
Kaum. INP entsteht im Browser des Nutzers. Der Hebel liegt bei der Menge und Verteilung des JavaScripts.
INP (Interaction to Next Paint) in der Praxis.
Wo dieser Begriff in deinem Geschäft konkret wird, beginnt die Arbeit. Wir nennen klar, ob die Idee in unser Studio passt.
SEO-Performance