Core Web Vitals verbessern: LCP, INP und CLS bei Shopify

Eine Produktseite kann optisch perfekt aussehen und sich trotzdem langsam anfühlen: Das große Produktbild lädt erst spät, ein Klick auf eine Variante reagiert träge oder der Warenkorb verschiebt beim Öffnen das Layout. Genau solche Erfahrungen machen die Core Web Vitals messbarer.

Für Shopify-Shops lohnt es sich, die drei Kennzahlen Largest Contentful Paint (LCP), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS) getrennt zu betrachten. Jede beschreibt ein anderes Problem – und benötigt deshalb andere Maßnahmen.

Was bedeuten die drei Core Web Vitals?

Die Schwellenwerte beziehen sich auf die Bewertung realer Nutzung anhand des 75. Perzentils. Das bedeutet vereinfacht: Für eine als gut bewertete Kennzahl sollen mindestens 75 Prozent der betrachteten Seitenaufrufe den guten Bereich erreichen. Mobile und Desktop sind getrennt zu betrachten.

Google erläutert diese Grundlagen unter Core Web Vitals und Grenzwerte.

Wichtig: Ein guter Lighthouse-Score im Labortest ist hilfreich, aber kein Ersatz für reale Nutzerdaten. Geräte, Netzwerke und Interaktionen verändern das Ergebnis.

1. Erst messen, dann optimieren

Bei Shopify stehen dir mehrere Perspektiven zur Verfügung:

1. Shopify-Adminbereich: Web-Performance-Berichte zeigen LCP, INP und CLS im Zeitverlauf, soweit geeignete Daten vorliegen.
2. PageSpeed Insights: Prüft einzelne URLs und zeigt – sofern verfügbar – reale Nutzungsdaten sowie einen simulierten Labortest.
3. Chrome DevTools: Hilft beim Eingrenzen konkreter Ressourcen, langer Skriptaufgaben und Layoutverschiebungen.
4. Google Search Console: Zeigt, welche URL-Gruppen bei den Core Web Vitals auffallen.

Beginne mit mindestens drei Seitentypen: Startseite, Produktseite und Kategorieseite/Collection. Ein Ergebnis auf der Startseite lässt sich nicht automatisch auf alle Produktseiten übertragen.

Auch die Shopify-Hilfe beschreibt ausdrücklich die Web-Performance-Berichte.

Messung sauber dokumentieren

Notiere für jeden Test die URL, das verwendete Gerät, Datum, Quelle der Messwerte und die drei Kennzahlen. Nach einer Änderung brauchst du die gleiche Grundlage erneut, sonst vergleichst du möglicherweise völlig unterschiedliche Situationen.

Bei kleinen Shops können für einzelne URLs noch nicht genug Felddaten vorhanden sein. Behandle fehlende Werte nicht als „0“ oder als bestanden.

2. LCP verbessern: Das Hauptbild früh laden

Auf vielen Shopify-Produktseiten ist das größte sichtbare Element ein Produktbild; auf anderen Seiten kann es eine große Überschrift oder ein Hero-Bereich sein.

Im ersten Fall solltest du kontrollieren:

• Liegt das Hauptbild bereits im ursprünglichen HTML?
• Wird es versehentlich mit loading="lazy" ausgeliefert?
• Ist die Datei deutlich größer als für das tatsächliche Display erforderlich?
• Wird das Bild durch einen Slider, ein Skript oder ein CSS-Hintergrundbild unnötig spät entdeckt?
• Stehen große App-Skripte oder Stylesheets vor der sichtbaren Hauptansicht?

Das erste sichtbare Hauptbild sollte in der Regel nicht lazy geladen werden. loading="lazy" ist eher für weiter unten liegende Bilder geeignet.

Ein vereinfachtes HTML-Beispiel für ein wichtiges Hero-Bild:

<img
  src="/images/produkt-hauptbild.webp"
  width="1200"
  height="900"
  alt="Produktansicht der Trinkflasche"
  loading="eager"
  fetchpriority="high"
>

Das ist kein vollständiger Shopify-Liquid-Snippet, sondern zeigt die relevanten Browserattribute. In einem echten Shopify-Theme müssen die Bildgrößen, responsive srcset-Varianten und die Liquid-Ausgabe zum jeweiligen Bildobjekt passen.

Nutze hohe Abrufpriorität bewusst, idealerweise nur für die tatsächlich kritische Ressource. Wenn alle Bilder „high priority“ erhalten, verliert das Signal seinen Nutzen.

Mehr dazu erklärt web.dev: Largest Contentful Paint optimieren.

Shopify-Sonderfall: Produktgalerie

Prüfe, ob die Galerie zuerst alle Produktfotos in voller Größe lädt, obwohl nur eines sichtbar ist. Häufig ist es sinnvoller, das erste Bild bevorzugt auszuliefern und weitere große Bilder erst bei Bedarf zu laden. Achte darauf, dass Variantenwechsel und Bildauswahl trotzdem zuverlässig funktionieren.

Die Dateigröße allein ist nicht entscheidend: Auch eine kleine Bilddatei kann erst sehr spät erscheinen, wenn ein Skript sie verspätet in das Dokument einfügt.

3. INP verbessern: Klicks müssen zügig reagieren

INP fällt besonders dann auf, wenn Käufer etwas aktiv tun: Varianten wechseln, Mengen ändern, Filter anwenden oder den Cart Drawer öffnen.

Eine träge Reaktion kann entstehen, wenn zu viel JavaScript den Hauptthread blockiert. Typische Ursachen in Shopify-Shops sind:

• mehrere Apps mit ähnlichen Funktionen;
• große Skriptpakete für kleine UI-Elemente;
• aufwendige Event-Handler beim Variantenwechsel;
• DOM-Änderungen, die viele Elemente gleichzeitig neu berechnen lassen;
• umfangreiche Tracking- und Marketing-Skripte.

Prioritäten setzen statt pauschal Skripte löschen

Schau zuerst im Performance-Panel der Browser-Entwicklertools nach, was bei einer langsamen Interaktion passiert. Miss zum Beispiel die Zeit zwischen Klick auf eine Produktvariante und sichtbarer Aktualisierung.

Danach kannst du gezielt optimieren:

1. Unnötige App-Funktionen deaktivieren, bevor du Code umbauen lässt.
2. Nicht kritisches JavaScript nachladen, ohne wichtige Bedienfunktionen zu verzögern.
3. Lange Aufgaben aufteilen und überflüssige DOM-Zugriffe verringern.
4. Prüfen, ob ein Event mehrfach registriert wird oder dieselbe Berechnung doppelt erfolgt.
5. Jede Optimierung mit einem echten Klickablauf erneut testen.

Achtung: defer oder async blind an jedes Skript zu hängen, kann Abhängigkeiten und die Warenkorbfunktion beschädigen. Der Warenkorb muss nach einer Performance-Änderung ebenso gut funktionieren wie zuvor.

4. CLS verbessern: Verhindere springende Inhalte

CLS bewertet unerwartete Verschiebungen der sichtbaren Seite. Gerade auf Mobilgeräten können schon kleine, wiederholte Sprünge störend sein.

Häufige Auslöser sind Bilder ohne feste Abmessungen, nachträglich eingeblendete Banner, dynamische Bewertungen oder Schriftarten, die beim Laden andere Zeilenumbrüche erzeugen.

Platz für Bilder und Komponenten reservieren

Setze für Bilder ihre tatsächlichen intrinsischen Maße, damit der Browser schon vor dem vollständigen Download den Platz berechnen kann:

<img
  src="/images/produkt-detail.webp"
  width="900"
  height="900"
  alt="Detail der Trinkflasche"
  loading="lazy"
>

Wichtig ist dabei das Verhältnis von Breite zu Höhe. CSS kann das Bild weiterhin responsiv darstellen, etwa mit max-width: 100% und height: auto.

Weitere Maßnahmen:

• Für Bewertungs- und Empfehlungskomponenten ausreichend Platz reservieren.
• Cookie-Banner und Hinweise möglichst als Overlay oder mit vorbereitetem Bereich gestalten.
• Bei Webfonts passende Fallback-Schriften und Ladeverhalten prüfen.
• Bei nachgeladenen App-Blöcken keine überraschenden großen Verschiebungen oberhalb des Inhalts erzeugen.

Nicht jede sichtbare Animation zählt als CLS. Trotzdem sollte die Bedienung stabil bleiben – besonders beim Lesen, Scrollen und Auswählen von Varianten.

5. Shopify-Apps: Der versteckte Performance-Faktor

Shopify weist selbst darauf hin, dass Apps, externe Dienste, Theme-Code, Bilder, Videos und Analysebibliotheken die Storefront-Leistung beeinflussen können. Das bedeutet nicht, dass Apps grundsätzlich schlecht sind. Entscheidend ist, ob der Nutzen die zusätzliche technische Last rechtfertigt.

Eine sinnvolle App-Prüfung beantwortet für jede Erweiterung:

• Welche Funktion erfüllt sie konkret?
• Lädt sie auf allen Seiten oder nur dort, wo sie gebraucht wird?
• Ist die Funktion bereits im Theme vorhanden?
• Fügt sie zusätzliche Skripte, Styles oder externe Netzwerkanfragen hinzu?
• Hinterlässt sie nach der Deinstallation alten Code?

Miss vor und nach der Anpassung. Eine App allein wegen einer großen Datei zu entfernen, ohne die Funktion zu prüfen, kann mehr Schaden anrichten als Nutzen bringen.

Hilfreich ist die Shopify-Dokumentation zur Verbesserung der Web-Performance.

6. Welche Optimierung zuerst?

Wenn alle drei Werte Probleme machen, ist es verlockend, zehn Dinge gleichzeitig zu ändern. Für eine saubere Analyse ist die Reihenfolge wichtiger.

Meine praktische Empfehlung:

1. Das größte aktuelle Problem im Felddatenbericht feststellen.
2. Einen häufig besuchten, betroffenen Seitentyp auswählen.
3. Eine nachvollziehbare Ursache mit DevTools oder Netzwerkanalyse ermitteln.
4. Eine überschaubare Änderung im Duplikat des Shopify-Themes testen.
5. Funktionalität prüfen: Varianten, Suche, Warenkorb, Checkout-Übergang.
6. Änderungen veröffentlichen und anschließend die Felddaten über einen längeren Zeitraum beobachten.

Die Werte verbessern sich nicht zwangsläufig am nächsten Tag in jedem Bericht. Insbesondere aggregierte Felddaten brauchen Zeit, um sich nach einem Umbau sichtbar zu verändern.

7. Core Web Vitals und SEO: Was darf man erwarten?

Gute Web-Performance kann die Nutzererfahrung verbessern und ist Teil der technischen SEO-Arbeit. Sie ersetzt aber keine verständlichen Produktinformationen, relevante Kategorien, klare Navigation oder hilfreiche Inhalte.

Ein schneller Shop mit dünnen Produktbeschreibungen wird nicht allein durch einen guten LCP zur besten Antwort auf eine Suchanfrage. Ebenso ist ein langsamer Shop nicht automatisch unsichtbar. Eine konkrete Rankingposition lässt sich aus drei Metriken nicht seriös ableiten.

Darum gehören Performance und Content zusammen. Informationen zu einer sauberen Strukturierung von Seiten und Suchintentionen findest du bei SEO & Performance.

Fazit: Messen, priorisieren, funktionierend veröffentlichen

Die drei Core Web Vitals helfen dir, Probleme besser zu unterscheiden: LCP für die sichtbare Ladeleistung, INP für Reaktionsfähigkeit und CLS für Layoutstabilität. Für Shopify lohnt es sich, zuerst Hauptbilder, App-Skripte, Produktgalerien und dynamische Komponenten zu untersuchen.

Wenn du dein Theme technisch überprüfen oder optimieren lassen möchtest, findest du unter Shopify-Shop und Theme-Entwicklung die passenden Leistungen von Digitalhaus Kunze.

Offizielle Quellen

• web.dev: Web Vitals und Schwellenwerte
• web.dev: LCP und Bildpriorität optimieren
• Shopify: Web-Performance im Onlineshop
• Shopify: Web-Performance-Berichte

Ergänzung vom 24. Oktober 2026: Prioritäten aus Shopifys Theme-Dokumentation

Shopify nennt in den aktuellen Performance Best Practices für Themes mehrere besonders wirksame Kontrollpunkte. Sie helfen, den Einstieg in eine Optimierung zu priorisieren:

1. LCP-Element prüfen: Das größte direkt sichtbare Bild nicht mit loading=“lazy” verzögern. Falls passend, fetchpriority=“high” nutzen.
2. Wesentliche Inhalte serverseitig ausgeben: Produktinformationen, Hero-Texte und Navigation möglichst nicht vollständig von später ausgeführtem JavaScript abhängig machen.
3. Liquid-Schleifen prüfen: Stark verschachtelte Loops und wiederholte Metafield-Zugriffe können die Renderzeit erhöhen. Vor Umbauten konkret profilieren.
4. Theme-JavaScript inventarisieren: Kritische Scripte identifizieren, unnötige App-Ressourcen entfernen und nicht benötigte Interaktionen später laden.
5. Bilder über Liquid-Filter ausgeben: image_url und image_tag können bei passenden Varianten und Abmessungen helfen.
6. Übermäßiges Preload vermeiden: Priorisierung funktioniert nur, wenn nicht gleichzeitig zu viele Ressourcen als dringend markiert werden.

Praxisregel: Wähle aus der Liste zuerst den Punkt, den die vorhandenen Messdaten als Ursache zeigen. Anschließend dieselbe Seitengattung erneut testen. Eine Optimierung der Startseite behebt nicht automatisch Engpässe in Produktvarianten oder Warenkorb.

Wenn du Headless als mögliche Alternative prüfst, lies auch Shopify mit Astro verbinden. Ein Architekturwechsel ist keine automatische Performance-Reparatur.

Du willst konkrete Engpässe in einem vorhandenen Theme angehen? Auf der Seite Shopify-Entwicklung und Theme-Optimierung erfährst du, welche Arbeiten sich einzeln planen lassen. Eine Verbesserung sollte immer mit demselben Seitentyp vor und nach dem Eingriff gemessen werden.

Shopify-Shop langsam: Sieben Ursachen im Schnellcheck (08.11.2026)

Du musst nicht alle Leistungskennzahlen kennen, um die ersten Ursachen systematisch einzugrenzen. Prüfe die folgende Liste vor einem teuren Theme-Wechsel. Die Reihenfolge ist eine Diagnosehilfe und keine allgemeine Rangliste der schlimmsten Fehler.

In 20 Minuten eine erste Diagnose vorbereiten

1. Drei URLs auswählen: Startseite, typische Produktseite und Collection.
2. Mobil und Desktop trennen: Mit PageSpeed Insights prüfen, ob reale Nutzerdaten vorliegen. Fehlende Felddaten nicht als „gut“ werten.
3. Eine Ursache eingrenzen: Zum Beispiel Hauptbild, App-Skript oder Layoutverschiebung – nicht alles gleichzeitig ändern.
4. Theme duplizieren: Kritische Änderungen zuerst im nicht veröffentlichten Theme testen.
5. Kaufweg prüfen: Varianten, Suche, Warenkorb und Übergang zum Checkout müssen weiterhin funktionieren.
6. Vorher und nachher dokumentieren: Immer dieselbe URL und vergleichbare Geräteeinstellungen verwenden. Aggregierte Felddaten brauchen Zeit.

Shopify stellt CDN, Caching und Bildauslieferung bereits bereit. Ein zusätzliches CDN oder pauschales Ändern von Server-Headern löst daher nicht automatisch ein Problem im Theme. Die offizielle Shopify-Hilfe zur Web-Performance nennt Theme-Code, Apps und Drittanbieter-Skripte als wichtige Ansatzpunkte.

Welche Frage kommt danach? Wenn der Shop schnell ist, aber trotzdem wenige Bestellungen entstehen, lies den CRO-Ratgeber für Shopify. Geht es dagegen um fehlende Kontaktanfragen bei einer Firmenwebsite, hilft der Beitrag Website bringt keine Anfragen. Für technische Umsetzungen gibt es die Shopify-Leistungen.

War dieser Artikel hilfreich?

Dein Feedback hilft uns, unsere Ratgeber zu verbessern.

👍 Ja, hilfreich 👎 Eher nicht

☆

Mit Digitalhaus Kunze gearbeitet?

Dann freuen wir uns über deine ehrliche Erfahrung auf Google – unabhängig davon, ob sie positiv oder kritisch war.

Auf Google bewerten ↗

Artikel teilen

Link kopieren ↗ WhatsApp ↗ LinkedIn ↗ E-Mail ↗