INP im Onlineshop: Reaktionszeit messen, verstehen und auf Bestwerte bringen, in Shopware 6 und Shopify

Ein Kunde wählt auf der Produktseite die Farbe Braun. Nichts passiert. Er tippt noch einmal. Eine halbe Sekunde später springt das Bild um, der Preis ändert sich, und weil er zweimal getippt hat, ist jetzt wieder Schwarz ausgewählt. Diese halbe Sekunde ist kein Ladeproblem. Die Seite war längst geladen. Sie hat nur nicht reagiert.

Genau das misst Interaction to Next Paint, kurz INP. Seit dem 12. März 2024 gehört der Wert zu den Core Web Vitals von Google und hat dort den alten Wert First Input Delay abgelöst. Dieser Beitrag geht in die Tiefe: was INP genau misst, warum Laborwerte bei INP oft in die Irre führen, wie Sie das langsamste Element in Ihrem Shop finden und wie Shopware-6- und Shopify-Shops auf Bestwerte kommen.

Das Wichtigste in Kürze:

• INP misst die Reaktion, nicht das Laden. Ein Shop kann in zwei Sekunden geladen sein und trotzdem träge reagieren.

• Gut ist ein Wert bis 200 Millisekunden, gemessen an echten Besuchen, und zwar an den langsamsten 25 Prozent.

• Lighthouse misst INP standardmäßig nicht. Wer nur Laborwerte prüft, sieht das Problem nicht.

• Der größte Bremsklotz im Shop ist selten der Shop selbst, sondern Skripte von Drittanbietern: Consent-Banner, Tracking, Chat, Bewertungen.

• Ein schneller Server hilft beim Laden, aber kaum bei INP. INP entsteht im Browser des Kunden.

Was INP genau misst

Jede Interaktion auf einer Seite, also jeder Klick, jedes Tippen und jeder Tastendruck, durchläuft drei Phasen, bis der Kunde eine Reaktion sieht:

• Eingabeverzögerung: Die Zeit, bis der Browser überhaupt anfangen kann, die Eingabe zu verarbeiten. Ist er gerade mit anderem JavaScript beschäftigt, muss die Eingabe warten.

• Verarbeitung: Die Zeit, die der Code braucht, der auf die Eingabe reagiert, etwa das Skript, das eine Variante wechselt oder ein Produkt in den Warenkorb legt.

• Darstellung: Die Zeit, bis der Browser die Änderung berechnet und auf den Bildschirm gezeichnet hat.

Die Summe dieser drei Phasen ist die Latenz einer Interaktion. Der INP einer Seite ist im Kern die langsamste Interaktion eines Besuchs. Bei Seiten mit sehr vielen Interaktionen ignoriert Google je 50 Interaktionen den höchsten Ausreißer, damit ein einzelner Extremwert das Bild nicht verzerrt. Scrollen und das bloße Überfahren mit der Maus zählen nicht.

Der Unterschied zum alten First Input Delay ist entscheidend. FID hat nur die Wartezeit der allerersten Eingabe gemessen und nicht, wie lange die Verarbeitung dauerte, und auch nicht, was danach passierte. Die meisten Shops hatten deshalb gute FID-Werte, obwohl Filter, Variantenwahl und Warenkorb träge waren. INP schaut auf den ganzen Besuch und deckt genau diese Stellen auf.

Die Grenzwerte

Google bewertet INP in drei Stufen:

Maßgeblich ist nicht der Durchschnitt, sondern das 75. Perzentil aller Seitenaufrufe, getrennt nach Smartphone und Desktop. Ein Shop besteht den Test also nur, wenn auch die langsameren Besuche noch unter 200 Millisekunden bleiben. Weil Smartphones deutlich weniger Rechenleistung haben, ist der mobile Wert fast immer der kritische. Wer Luft nach oben haben will, sollte mobil 100 bis 150 Millisekunden anstreben.

Warum INP für Shops so wichtig ist

INP ist Teil der Signale, mit denen Google die Nutzererfahrung bewertet. Der direkte Einfluss auf das Ranking ist überschaubar: Bei gleich guten Inhalten kann er den Ausschlag geben, aus einem schwachen Shop macht er keinen Spitzenreiter. Wichtiger ist der Einfluss auf den Umsatz.

Ein Onlineshop ist eine der interaktivsten Seitenarten überhaupt. Kunden filtern, wählen Größen und Farben, blättern durch Bilder, legen Produkte in den Warenkorb und füllen Formulare aus. Jede dieser Aktionen ist eine Interaktion. Reagiert sie zu langsam, tippen Kunden doppelt, verlieren das Vertrauen oder brechen ab. Das schlägt sich in der Conversion Rate nieder, lange bevor es im Ranking sichtbar wird.

Labor und Feld: warum Lighthouse Sie in die Irre führen kann

Es gibt zwei Arten von Messwerten, und bei INP ist der Unterschied besonders groß.

Labordaten entstehen in einer simulierten Umgebung, etwa mit Lighthouse oder im unteren Teil von PageSpeed Insights. Lighthouse lädt die Seite einmal und klickt dabei nirgends. INP kann es in diesem Standardmodus deshalb gar nicht messen. Stattdessen zeigt es die Total Blocking Time, also wie lange der Browser beim Laden blockiert ist. Das ist ein Hinweis, aber kein INP.

Labordaten aus Lighthouse: Statt INP erscheint nur die Total Blocking Time. Dass diese mit 80 ms grün ist, sagt wenig darüber, wie schnell Filter oder Warenkorb später reagieren.

Felddaten stammen von echten Besuchern mit echten Geräten. Google sammelt sie im Chrome User Experience Report, und PageSpeed Insights zeigt sie im oberen Teil unter „So sieht die Leistung auf der Nutzerseite aus“. Nur hier steht ein echter INP-Wert. Die Daten beziehen sich auf die vergangenen 28 Tage. Hat eine einzelne Seite zu wenig Besuche, zeigt Google den Wert für die gesamte Domain.

Felddaten in PageSpeed Insights: Hier steht der echte INP-Wert aus den letzten 28 Tagen, gemessen an echten Besuchen.

Daraus folgt die erste Regel: Bewerten Sie INP immer an Felddaten. Und die zweite: Weil Felddaten über 28 Tage gleiten, sehen Sie den Erfolg einer Verbesserung erst nach Wochen vollständig. Wer schneller wissen will, ob eine Änderung wirkt, braucht eigene Messungen.

So messen und prüfen Sie INP selbst

• Google Search Console: Der Bericht zu den Core Web Vitals gruppiert ähnliche Seiten und zeigt, welche Gruppen bei INP schlecht oder verbesserungswürdig sind. In Shops sind das fast immer Seitentypen: Kategorieseiten, Produktseiten, Warenkorb. Das ist der Einstieg.

• PageSpeed Insights: Für eine einzelne Adresse zeigt es die Felddaten von Seite und Domain. Prüfen Sie je eine typische Kategorie- und Produktseite.

• Shopify-Admin: Shopify zeigt im Bericht zur Web-Performance die Core Web Vitals echter Besuche direkt im Admin, inklusive INP und Verlauf. Das ist für Shopify-Händler der schnellste Blick.

• Chrome-Entwicklertools: Im Bereich Performance zeigen die Live-Messwerte den INP jeder Interaktion, während Sie selbst klicken. Stellen Sie die CPU-Drosselung auf das Vier- bis Sechsfache, um ein durchschnittliches Smartphone zu simulieren. Dann klicken Sie sich durch Filter, Varianten und Warenkorb und sehen sofort, welche Aktion über 200 ms liegt.

• Messung echter Besuche mit Zuordnung: Die kostenlose JavaScript-Bibliothek web-vitals von Google misst INP bei jedem Besucher und verrät mit ihrer Zuordnungsfunktion, welches Element die langsamste Interaktion ausgelöst hat und welche der drei Phasen zu lang war. Diese Daten lassen sich etwa über den Google Tag Manager an Google Analytics senden.

Der letzte Punkt ist der, den kaum ein Shop nutzt, und er ist der wirkungsvollste. Statt zu raten, sehen Sie schwarz auf weiß, dass etwa der Button „In den Warenkorb“ auf Produktseiten mobil bei 480 ms liegt und davon 300 ms auf die Verarbeitung entfallen. In vereinfachter Form sieht die Messung so aus:

import { onINP } from 'web-vitals/attribution';

onINP(({ value, attribution }) => {
// value: INP in Millisekunden
// attribution.interactionTarget: auslösendes Element, z. B. "button.btn-buy"
// attribution.inputDelay, processingDuration, presentationDelay:
// wie viel jede der drei Phasen beigetragen hat
sendeAnAnalytics(value, attribution);
});

Ist die Eingabeverzögerung lang, war der Browser mit anderem beschäftigt, meist mit Skripten von Drittanbietern. Ist die Verarbeitung lang, ist der Code hinter dem Button zu schwer. Ist die Darstellung lang, muss der Browser zu viel auf einmal neu berechnen, oft wegen einer zu großen Seite.

Die typischen INP-Bremsen im Onlineshop

• Der Klick auf „Alle akzeptieren“: Die erste Interaktion vieler Besucher ist das Consent-Banner. Mit diesem Klick starten auf vielen Shops gleichzeitig Analytics, Werbe-Pixel, Remarketing und weitere Tags. Der Browser ist danach für Hunderte Millisekunden blockiert. In der Zuordnung taucht dann ausgerechnet der Consent-Button als langsamste Interaktion auf.

• Skripte von Drittanbietern: Chat-Fenster, Bewertungs-Widgets, Empfehlungs-Engines, Heatmaps und Testing-Tools hängen sich an Klicks und Eingaben und laufen auf demselben Hauptthread wie der Shop. Jedes einzelne ist harmlos, zusammen bremsen sie jede Interaktion.

• Variantenwahl: Beim Wechsel von Farbe oder Größe werden Preis, Verfügbarkeit, Bilder und oft der ganze Kaufbereich neu geladen und neu aufgebaut.

• Filter in Kategorien: Jede Änderung eines Filters lädt die Produktliste neu. Bei großen Listen mit vielen Bildern und Produktkacheln wird die Darstellung zum Engpass.

• In den Warenkorb: Der Klick öffnet einen Warenkorb im Seitenrand, lädt dessen Inhalt nach und löst gleichzeitig mehrere Tracking-Ereignisse aus.

• Große Menüs: Mega-Menüs mit Hunderten Kategorien blähen die Seite auf. Je mehr Elemente eine Seite hat, desto länger dauert jede Neuberechnung.

• Suche während der Eingabe: Vorschläge, die bei jedem Tastendruck sofort neu geladen und gezeichnet werden.

Shopware 6: wo es hakt und was hilft

In Shopware 6 bündelt die Storefront das JavaScript des Themes und aller Plugins. Jedes Plugin mit eigener Storefront-Logik vergrößert diese Bündel und registriert eigene Reaktionen auf Klicks. Die häufigsten Ursachen schlechter Werte sind deshalb Plugins, die eingeschaltet, aber nicht mehr gebraucht werden, Skripte von Drittanbietern, die direkt ins Theme eingebaut wurden, und eigene Erweiterungen, die bei jeder Interaktion zu viel neu berechnen.

Konkret helfen in Shopware 6:

• Plugin-Inventur: Jedes Plugin mit Storefront-JavaScript auf seinen Nutzen prüfen. Was nicht gebraucht wird, wird deinstalliert, nicht nur deaktiviert, und das Theme danach neu kompiliert.

• Variantenwechsel entlasten: Sofort sichtbares Feedback geben, etwa die gewählte Variante markieren und einen Ladezustand zeigen, bevor Preis und Bilder nachgeladen werden.

• Filter bewusst gestalten: Auf Smartphones ist ein Filter, der erst mit „Anwenden“ lädt, oft schneller als ein Filter, der bei jedem Häkchen die ganze Liste neu lädt.

• Warenkorb im Seitenrand: Inhalt schlank halten und Tracking-Ereignisse so auslösen, dass sie erst nach dem Zeichnen laufen.

• Den Hauptthread schützen: Tracking-Tags über Server-Side Tracking auslagern, statt sie alle im Browser auszuführen.

Ein häufiger Irrtum: HTTP-Cache, Reverse Proxy und ein schneller Server verbessern die Ladezeit, an INP ändern sie wenig. INP entsteht im Browser des Kunden, nicht auf dem Server. Mehr zu den technischen Grundlagen unter Shopware SEO.

Wer noch einen Shopware-5-Shop betreibt, hat es deutlich schwerer. Die alte Storefront basiert auf jQuery und vielen synchron geladenen Plugins, und Optimierungen stoßen schnell an Grenzen. Da Shopware 5 keine Updates mehr erhält, ist der Umstieg meist die bessere Investition. Die Optionen zeigt die Seite zur Migration von Shopware 5.

Shopify: wo es hakt und was hilft

Shopify-Shops starten mit einem Vorteil: Moderne Online-Store-2.0-Themes sind von Haus aus schlank. Die Probleme entstehen meist danach, durch Apps.

• App-Skripte: Fast jede App für Bewertungen, Upselling, Wunschlisten, Chat oder Pop-ups bringt eigenes JavaScript mit, das auf jeder Seite läuft. Zehn Apps bedeuten zehn Skripte, die sich um denselben Hauptthread streiten.

• Reste deinstallierter Apps: Wird eine App entfernt, bleibt ihr Code oft im Theme zurück und lädt weiter. Eine Prüfung des Themes auf solche Reste bringt häufig schnelle Verbesserungen.

• App-Einbettungen: Viele Apps werden im Theme-Editor als App-Einbettung aktiviert. Was dort eingeschaltet ist, aber nicht gebraucht wird, sollte aus.

• Varianten und Warenkorb: Viele Themes laden beim Variantenwechsel oder beim Hinzufügen zum Warenkorb ganze Abschnitte der Seite neu. Je größer diese Abschnitte, desto länger die Darstellung.

• Ältere oder stark angepasste Themes: Themes mit jQuery und vielen Effekten sind deutlich schwerer als aktuelle Themes.

Der Bericht zur Web-Performance im Shopify-Admin zeigt, ob sich INP nach einer Änderung verbessert. Mehr zu den Eigenheiten der Plattform unter Shopify SEO.

So bringen Sie INP auf Bestwerte

Unabhängig vom Shopsystem wirken dieselben Prinzipien. Für Entwickler sind sie Handwerk, für Marketer lohnt es sich, sie zu kennen, weil sie erklären, warum ein weiteres Tracking-Tag nicht kostenlos ist.

• Erst reagieren, dann arbeiten: Das wichtigste Prinzip. Die sichtbare Reaktion auf einen Klick kommt sofort, die schwere Arbeit danach. Der Button zeigt „wird hinzugefügt“, bevor der Warenkorb geladen und das Tracking ausgelöst wird.

• Lange Aufgaben aufteilen: Der Browser kann nur eine Sache gleichzeitig tun. Alles, was länger als 50 ms dauert, gilt als lange Aufgabe und blockiert Eingaben. Wer große Aufgaben in kleine Schritte zerlegt und dem Browser dazwischen Luft lässt, hält die Seite reaktionsfähig.

• Nicht dringende Arbeit verschieben: Tracking-Ereignisse, Analysen und Empfehlungen müssen nicht im selben Moment laufen, in dem der Kunde klickt.

• Weniger JavaScript: Jedes Skript, das nicht geladen wird, kann auch nicht bremsen. Die Registerkarte Coverage in den Chrome-Entwicklertools zeigt, wie viel geladener Code tatsächlich genutzt wird.

• Drittanbieter erst bei Bedarf laden: Ein Chat muss nicht beim Seitenaufruf starten, sondern erst, wenn jemand auf das Chat-Symbol tippt.

• Die Seite schlank halten: Weniger Elemente bedeuten schnellere Neuberechnungen. Inhalte außerhalb des sichtbaren Bereichs lassen sich per CSS so kennzeichnen, dass der Browser sie erst bei Bedarf berechnet.

• Eingaben bündeln: Die Suche reagiert nicht auf jeden einzelnen Tastendruck, sondern kurz nachdem der Kunde aufgehört hat zu tippen.

Wie das erste Prinzip im Code aussieht, zeigt dieses vereinfachte Beispiel:

button.addEventListener('click', async () => {
button.classList.add('is-loading'); // 1. sofort sichtbares Feedback
await scheduler.yield(); // 2. Browser darf zuerst neu zeichnen
await addToCart(); // 3. dann die eigentliche Arbeit
pushTrackingEvent(); // 4. Tracking ganz zum Schluss
});

scheduler.yield() wird von Chrome-basierten Browsern unterstützt. Für andere Browser gibt es einfache Ausweichlösungen, etwa über setTimeout.

Ein Fahrplan in fünf Schritten

Schritt 1, den Stand erfassen: Search Console und PageSpeed Insights zeigen, welche Seitentypen das Problem haben, Shopify-Händler sehen es zusätzlich im Admin.

Schritt 2, die Ursache finden: Mit der Messung echter Besuche und der Zuordnung sehen Sie, welches Element und welche Phase das Problem verursachen.

Schritt 3, nachstellen: In den Chrome-Entwicklertools mit gedrosselter CPU die betroffene Interaktion wiederholen und im Performance-Profil sehen, welches Skript blockiert.

Schritt 4, beheben: Erst die großen Hebel, also Consent-Klick, Drittanbieter und überflüssige Plugins oder Apps, dann die Feinarbeit an Varianten, Filtern und Warenkorb.

Schritt 5, bestätigen: Die eigene Messung zeigt die Wirkung nach Tagen, die Felddaten von Google nach etwa vier Wochen. Danach den Wert laufend beobachten, denn jede neue App, jedes Plugin und jedes Tag kann ihn wieder verschlechtern.

INP-Optimierung für Ihren Shop

INP ist eines der Themen, bei denen sich Technik und Marketing direkt berühren: Jedes zusätzliche Tracking-Tag, jede App und jedes Widget hat einen Preis, und der wird in Millisekunden bezahlt. arboro misst INP an echten Besuchen, findet die Ursachen bis auf das einzelne Element und behebt sie direkt in Ihrem Shopware-6- oder Shopify-Shop. Mehr dazu unter Shopware- und Shopify-Support und Server-Side Tracking.

Bildquelle: @StockWorld – stock.adobe.com