INP bei Shopify optimieren: Woran die meisten Shops scheitern und in welcher Reihenfolge Sie es beheben

Der Core-Web-Vitals-Bericht in der Search Console springt von Grün auf Rot, und der Wert, der durchfällt, ist ausgerechnet der, den kaum jemand versteht: INP. Der erste Reflex ist, vom Schlimmsten auszugehen. Das Theme sei grundlegend kaputt, und nur ein teurer Neuaufbau helfe. Für die meisten Shopify-Shops stimmt das nicht. Wer trotzdem danach handelt, wählt die teuerste Antwort auf ein Problem, das sich meist deutlich günstiger lösen lässt, wenn man die richtige Reihenfolge einhält.

Dass man an INP scheitern kann, liegt gerade daran, dass ein Onlineshop zu den interaktionsreichsten Dingen im Web gehört. Dieser Artikel liefert die Reihenfolge: wie Sie INP richtig messen, wie Sie die Interaktion finden, die Sie tatsächlich die Bewertung kostet, und wie Sie die Maßnahmen abarbeiten. Von günstig und wirkungsvoll bis zu dem seltenen Fall, in dem tiefere Arbeit am Theme wirklich nötig ist. Fast jeder Shop besteht lange vor diesem letzten Schritt.

Warum Shopify-Shops ausgerechnet an INP scheitern

Interaction to Next Paint (INP) ist der Core Web Vital, der misst, wie schnell eine Seite sichtbar auf einen Klick, ein Tippen oder einen Tastendruck reagiert. Google wertet 200 Millisekunden oder weniger als gut und alles über 500 Millisekunden als schlecht. Gemessen wird bei echten Nutzern über den gesamten Besuch, nicht bei einer einzelnen Interaktion. Shopify-Shops scheitern daran häufiger als die meisten Websites, weil im E-Commerce ungewöhnlich viel geklickt, getippt und ausgewählt wird.

Diese Dichte erklärt alles. INP hat im März 2024 First Input Delay abgelöst, und der Wechsel war hart. FID bewertete nur die erste Interaktion, INP bewertet die schlechteste der gesamten Sitzung. Ein Shop besteht aus nichts als Interaktionen: Variantenauswahl, Mengenregler, Warenkorb-Button, Cart Drawer, Kollektionsfilter, Suchvorschläge, Mega-Menüs, Quick-View-Fenster. Jede davon führt JavaScript aus, sobald jemand sie berührt, und jede kann die langsame Interaktion sein, die Ihren gemessenen Wert bestimmt. Hinzu kommt, was Shopify-Shops ausmacht: ein Stapel Apps von Drittanbietern, die jeweils eigene Skripte einbinden. Der Main Thread, der auf all diese Eingaben reagieren muss, ist damit schon ausgelastet, bevor der Kunde überhaupt da ist. Felddaten aus der Branche zeigen, dass rund 40 Prozent der mobilen Websites INP weiterhin nicht bestehen, und E-Commerce liegt am schwierigeren Ende dieser Verteilung.

Es hilft zu wissen, was INP eigentlich misst, denn davon hängt die Lösung ab. Jede Interaktion hat drei Phasen. Die Eingabeverzögerung (Input Delay): wie lange der Browser auf einen ausgelasteten Main Thread wartet, bevor er das Tippen überhaupt verarbeiten kann. Die Verarbeitungszeit (Processing Time): wie lange der Code Ihres Event-Handlers läuft. Und die Darstellungsverzögerung (Presentation Delay): wie lange der Browser danach braucht, um das Ergebnis anzuzeigen. Ein schlechter INP-Wert bedeutet, dass eine dieser drei Phasen bei Ihrer langsamsten Interaktion zu lange dauert. Viele Versuche bleiben stecken, weil blind optimiert wird: irgendein JavaScript entfernen und auf das Beste hoffen. Der Wert bewegt sich erst, wenn Sie die Phase beheben, die wirklich zu lange dauert, bei der Interaktion, die wirklich langsam ist. Deshalb geht es im nächsten Abschnitt ums Messen, noch bevor Sie irgendetwas anfassen.

Erst richtig messen, sonst beheben Sie das Falsche

INP lässt sich nicht so messen, wie die meisten Geschwindigkeit messen. Es ist ein Feldwert, erhoben bei echten Nutzern, die über längere Zeit mit Ihrem Live-Shop interagieren. Lighthouse oder PageSpeed Insights beim Seitenaufruf liefern Ihnen deshalb keinen echten INP-Wert. Labortools laden die Seite, aber sie klicken nicht vierzigmal auf die Variantenauswahl, wie Ihre Kunden es tun. Beginnen Sie mit Daten echter Nutzer. Sonst optimieren Sie Interaktionen, mit denen niemand Probleme hat, und die eigentlich schmerzhafte bleibt unangetastet.

Es gibt drei praktische Quellen für diese Daten, aufsteigend nach Nutzen. Der Core-Web-Vitals-Bericht in der Google Search Console zeigt, ob Sie ein INP-Problem haben und bei welchen URL-Gruppen. Dort endet er allerdings, die Ursache nennt er nicht. PageSpeed Insights, auf einer Seite mit viel Traffic ausgeführt, zeigt den INP aus dem Chrome User Experience Report neben der Labordiagnose. Am nützlichsten für einen Shop ist das Web-Performance-Dashboard von Shopify selbst im Admin. Es schlüsselt INP nach Seitentyp und Gerät auf, sodass Sie sofort sehen, ob das Problem etwa auf Produktseiten auf dem Smartphone liegt, statt zu raten. Shopify geht in seiner eigenen Anleitung zum Debuggen von INP mit CSS-Selektoren noch einen Schritt weiter: Damit führen Sie einen schlechten Wert auf das konkrete Element zurück, mit dem ein Nutzer interagiert hat.

Das Messen hat ein klares, begrenztes Ziel: die eine schlechteste Interaktion finden, auf dem Seitentyp, wo sie schadet, und feststellen, welche der drei Phasen zu lange dauert. Zeigen der Admin-Bericht oder die CrUX-Daten zum Beispiel auf die Variantenauswahl auf mobilen Produktseiten, stellen Sie das in den Chrome DevTools nach. Öffnen Sie das Performance-Panel, zeichnen Sie auf, während Sie genau diese Interaktion ausführen, und lesen Sie den Interactions-Track. Er zerlegt die Interaktion in Eingabeverzögerung, Verarbeitung und Darstellung, und neuere DevTools-Versionen markieren die Interaktion, die als INP gemeldet würde. Dieser Trace ist Ihre Diagnose. Alles im nächsten Abschnitt ist danach geordnet, welche Phase der Trace als zu lang ausweist. Das ist der Unterschied zwischen einer Maßnahme, die den Wert bewegt, und einer Woche Skripte löschen, die nichts ändert. Shopify stellt klar, seit es den Wechsel von FID zu INP erstmals ankündigte, dass dieser Wert bei den Felddaten beginnt. Die Shops, die bestehen, fangen genau dort an.

Die Reihenfolge: erst die Phase bestimmen, dann das Günstigste zuerst

Sobald der Trace zeigt, welche Phase zu lange dauert, ergeben die Maßnahmen eine klare Reihenfolge: günstig und wirkungsvoll zuerst. Das Prinzip dahinter ist einfach. Die meisten INP-Probleme bei Shopify sind Probleme der Eingabeverzögerung, verursacht durch einen überlasteten Main Thread. Und am günstigsten entlasten Sie ihn, indem Sie Code, den Sie nicht brauchen, gar nicht erst laufen lassen. Sie arbeiten sich also von dem, was Sie entfernen können, zu dem vor, was Sie umschreiben müssen. An die tiefere Architektur des Themes gehen Sie nur, wenn die früheren Schritte nicht gereicht haben.

Die Tabelle unten ist der Entscheidungsbaum, zu einer Reihenfolge verdichtet. Sehen Sie nach, welche Phase Ihr Trace markiert, und beginnen Sie bei der obersten Zeile, die zutrifft.

Die ersten beiden Zeilen lösen das Problem bei mehr Shopify-Shops als alle Zeilen darunter zusammen. Die häufigste Ursache ist schlicht zu viel JavaScript von Drittanbietern, das zu früh lädt. Eine App zu entfernen, die Sie längst vergessen hatten, kostet nichts und wirkt sofort. Die übrigen Skripte zu verzögern, damit ein Chat-Widget oder eine Bewertungsplattform erst lädt, wenn die Seite schon reagiert, statt mit den ersten Eingaben zu konkurrieren, ist meist eine Änderung am Theme oder im Tag Manager. Kein Neuaufbau. Ein einziges Chat-Skript kann auf jeder Seite deutlich mehr als eine Zehntelsekunde Blockade auf dem Main Thread verursachen. Das ist also selten Kleinkram.

In den Zeilen drei und vier verdient ein Entwickler sein Geld, aber auch das sind Anpassungen, kein neues Theme. Zeigt der Trace, dass die Verarbeitung bei einem Element des Themes zu lange dauert, erledigt dessen Handler zu viel synchrone Arbeit. Die Lösung: ihn verschlanken, debouncen oder nicht dringende Arbeit vom kritischen Pfad nehmen, etwa indem Sie zwischen einzelnen Arbeitsschritten den Main Thread kurz freigeben. Die Zeilen fünf und sechs betreffen die Darstellungsphase, den selteneren Verursacher: Die Interaktion zwingt den Browser dann, zu viel auf einmal neu zu zeichnen. Und um es deutlich zu sagen: Sie gehen selten die ganze Tabelle durch. Sie messen, landen bei der Zeile, auf die Ihre Phase zeigt, beheben das und messen erneut, bevor Sie die nächste angehen. Oft ist der Wert schon zwei oder drei Zeilen früher im grünen Bereich als erwartet.

Erneut messen, und wann ein neues Theme wirklich die Antwort ist

Die Reihenfolge ist eine Schleife, kein einmaliger Durchgang, und diese Schleife ist das eigentliche Vorgehen. Beheben Sie die Zeile, auf die Ihr Trace gezeigt hat, und messen Sie erneut, bevor Sie etwas anderes anfassen. Performance-Arbeit steckt voller Änderungen, die richtig aussehen und nichts bewirken. Zwei Dinge machen diese Schleife langsamer als erwartet, und wer sie kennt, gerät weniger schnell in Panik. Erstens ist INP ein Feldwert über ein rollierendes Fenster von 28 Tagen. Eine Korrektur, die Sie heute live stellen, zeigt sich in der Search Console oder in CrUX erst, wenn sich in den folgenden Wochen genug Daten echter Nutzer angesammelt haben. Prüfen Sie die Korrektur deshalb sofort in einem DevTools-Trace und warten Sie dann, bis die Felddaten sie bestätigen. Zweitens verschiebt sich INP, wenn sich Ihr Shop verändert. Eine einzige neue App oder ein neues Skript kann einen bestandenen Wert unbemerkt wieder durchfallen lassen. Deshalb gehört Monitoring in Ihr Runbook und nicht in eine einmalige Aufräumaktion.

Es gibt eine ehrliche Grenze, und die sollte man benennen, gerade weil dieser ganze Artikel davon abrät, als Erstes zu ihr zu greifen. Gelegentlich arbeitet ein Shop die komplette Reihenfolge ab: Apps aufgeräumt, Drittanbieter-Skripte verzögert, Handler verschlankt, lange Tasks aufgeteilt. Und er fällt trotzdem durch. Dann ist die Architektur des Themes selbst die Grenze: ein aufgeblähter, stark angepasster Build, in dem die Interaktionslogik überall verwoben ist. Das ist der seltene Fall, in dem tiefere Arbeit am Theme oder ein Neuaufbau auf schlankerer Basis wirklich die Antwort ist und kein Reflex. Der Sinn der Reihenfolge ist, dass Sie diesen Schluss mit gutem Grund ziehen. Sie haben Daten, die zeigen, dass die günstigeren Maßnahmen nicht gereicht haben. Sie stecken also kein Budget für einen Neuaufbau in ein Problem, das zwei verzögerte Skripte gelöst hätten. Landet Ihr Trace dort, ist das der Moment, eine Shopify-Plus-Agentur hinzuzuziehen, die den Neuaufbau anhand derselben Daten plant statt anhand einer neuen Vermutung. INP ist ein Baustein im größeren Zusammenhang von Core Web Vitals und Suche und verlangt dieselbe Disziplin: erst messen, in der richtigen Reihenfolge beheben, erneut messen und dranbleiben.

Häufig gestellte Fragen

Was ist ein guter INP-Wert? 

Google stuft einen INP von 200 Millisekunden oder weniger als gut ein, 200 bis 500 als verbesserungswürdig und über 500 als schlecht, gemessen am 75. Perzentil echter Nutzerinteraktionen. Da INP Ihre schlechteste relevante Interaktion des gesamten Besuchs meldet, kann ein einzelnes langsames Element wie eine Variantenauswahl einen ansonsten schnellen Shop durchfallen lassen.

Können Shopify-Apps einen schlechten INP verursachen? 

Ja, und sie sind die häufigste Ursache. Jede App kann JavaScript einbinden, das auf dem Main Thread läuft. Bewertungs-Widgets, Chat, Pop-ups, Analytics und Retargeting-Pixel sind typische Verursacher. Ein einziges Chat-Skript kann auf jeder Seite deutlich mehr als eine Zehntelsekunde Blockade verursachen. Deshalb ist das Prüfen und Verzögern von Apps der erste Schritt in der Reihenfolge.

Kann ich INP verbessern, ohne mein Theme neu aufzubauen? 

Fast immer. Die meisten INP-Probleme bei Shopify entstehen durch zu viel JavaScript von Drittanbietern, das zu früh lädt. Das beheben Sie, indem Sie ungenutzte Apps entfernen und die übrigen Skripte verzögert laden, nicht mit einem neuen Theme. Ein Neuaufbau ist nur in dem seltenen Fall gerechtfertigt, in dem die Reihenfolge ausgeschöpft ist und nachweislich die Architektur des Themes selbst die Grenze ist.

Warum hat sich mein INP nach der Korrektur nicht verbessert? 

Entweder haben Sie eine Phase oder Interaktion behoben, die nicht die gemeldete war. Deshalb ist es so wichtig, zuerst die schlechteste Interaktion zu messen. Oder die Korrektur wirkt, aber die Felddaten hinken hinterher. INP wird über ein rollierendes Fenster von 28 Tagen gemessen. Prüfen Sie die Änderung also sofort in einem DevTools-Trace und rechnen Sie damit, dass die Search Console in den folgenden Wochen nachzieht.

Das Wichtigste in Kürze

• Shopify-Shops scheitern an INP, weil sie voller Interaktionen stecken. Variantenauswahl, Cart Drawer, Filter, Suche und die Skripte jeder App konkurrieren um einen Main Thread, den INP nach der schlechtesten Interaktion bewertet.

• Im Feld messen, nicht im Labor. Nutzen Sie die Search Console, die Felddaten in PageSpeed Insights und den Web-Performance-Bericht im Shopify-Admin, um die schlechteste Interaktion zu finden und zu sehen, welche der drei Phasen zu lange dauert.

• Die Reihenfolge abarbeiten, das Günstigste zuerst. Apps prüfen und ungenutzte entfernen, Drittanbieter-Skripte verzögern, dann Theme-Handler überarbeiten, lange Tasks aufteilen und den Darstellungsaufwand senken. Die ersten beiden Zeilen reichen für die meisten Shops.

• Ein neues Theme ist das letzte Mittel, kein Reflex. Greifen Sie erst dazu, wenn nachgewiesen ist, dass die Maßnahmen in ihrer Reihenfolge nicht reichen, und Daten die Ausgabe rechtfertigen.

• INP verschiebt sich, also beobachten Sie ihn. Felddaten laufen über ein Fenster von 28 Tagen, und ein neues Skript kann ein Bestehen wieder zunichtemachen. Verankern Sie das erneute Messen in Ihrem Runbook.

INP zu beheben ist weniger ein technisches Rätsel als eine Frage der Reihenfolge. Die Shops, die bestehen, haben nicht die besten Entwickler. Sie haben die schlechteste Interaktion gemessen, bevor sie etwas angefasst haben, und die Maßnahmen von günstig bis tiefgreifend abgearbeitet, statt direkt zum Neuaufbau zu greifen. Nehmen Sie die Reihenfolge in das Performance-Runbook Ihres Teams auf und gehen Sie sie jedes Mal gleich durch, wenn ein Wert abrutscht. Speichern Sie diesen Artikel daneben, damit Sie beim nächsten roten Status in der Search Console eine Checkliste abarbeiten, statt hektisch zu improvisieren.