Shopify Performance: Core Web Vitals verbessern ohne Geschwindigkeits-Mythen

Ein schneller Shop verkauft angenehmer. Besucher warten ungern, springen weniger ab und finden schneller, was sie suchen. Google bezieht die Core Web Vitals zudem in die Bewertung der Seitenerfahrung ein. Aber: Es geht nicht um grüne Zahlen im Test-Tool, sondern um einen Shop, der sich für echte Menschen gut anfühlt.

Die drei Core Web Vitals kurz erklärt

Die Werte beziehen sich auf das 75. Perzentil: Drei von vier Besuchern sollen den guten Wert erreichen. INP hat im März 2024 den Wert FID abgelöst. Schwellen können sich ändern, schau bei wichtigen Entscheidungen in die aktuelle Google-Dokumentation.

Messen: Labor und Feld unterscheiden

Wer optimiert, ohne richtig zu messen, rät. Diese Quellen helfen:

• PageSpeed Insights: Zeigt oben Felddaten (falls genug Besucher vorhanden sind) und darunter Labordaten aus Lighthouse. Prüfe beide getrennt.
• CrUX (Chrome User Experience Report): Daten echter Chrome-Nutzer der letzten Wochen. Bei kleinen Shops fehlen sie manchmal, dann bleibt nur das Labor.
• Google Search Console: Der Bericht zu Core Web Vitals gruppiert Seiten und zeigt, welche Seitentypen auffallen.
• Shopify-Geschwindigkeitsbericht: Im Admin unter Onlineshop findest du einen Speed-Bericht. Er ist ein grober Anhaltspunkt für die Theme-Performance, kein Ersatz für die Felddaten.

Miss immer mehrere Seitentypen: Startseite, Kollektion, Produktseite, Warenkorb. Eine schnelle Startseite sagt wenig über eine langsame Produktseite aus.

LCP: das größte Element schnell liefern

Bei Shops ist das LCP-Element fast immer ein Bild. Typische Ursachen für schlechte Werte:

• Zu große Bilder: Shopify liefert Bilder über sein CDN in verschiedenen Größen aus. Das Theme muss die passenden Größen mit srcset und sizes anfordern.
• Hero-Bild wird lazy geladen: Das Bild im sichtbaren Bereich sollte nicht verzögert laden, sondern priorisiert werden. Alle Bilder darunter dürfen lazy laden.
• Blockierende Skripte: Skripte im Head, die vor dem Rendern laufen.
• Webfonts: Zu viele Schriftschnitte oder fehlende Preload-Hinweise verzögern Text.
• Slider: Karussells mit mehreren großen Bildern laden oft mehr, als sichtbar wird. Ein einziges, gutes Hero-Bild ist meist schneller.

CLS: nichts darf springen

Layoutverschiebungen nerven und führen zu Fehlklicks. Häufige Verursacher:

• Bilder ohne feste Breite und Höhe oder ohne aspect-ratio
• Banner, Cookie-Hinweise und Pop-ups, die nachträglich Platz verdrängen
• Apps, die Inhalte nachladen, etwa Bewertungssterne oder Versandhinweise
• Webfonts, die beim Laden die Schriftgröße ändern

Reserviere für alles, was später erscheint, von Anfang an den Platz.

INP: Reaktionsfähigkeit

INP leidet, wenn der Browser mit JavaScript beschäftigt ist, während Besucher klicken. In Shopify-Shops liegt das meist an:

• vielen Drittanbieter-Skripten (Tracking, Chat, Pop-ups, Bewertungen)
• schwerem Theme-JavaScript, etwa für Varianten, Mega-Menü oder Filter
• aufwendigen Warenkorb-Drawern mit Rechenlogik im Browser

Weniger Skripte und schlankerer Code sind die wirksamsten Hebel.

App-Ballast: oft der größte Hebel

Jede installierte App kann Skripte, Styles und Netzwerkanfragen ins Frontend bringen, auch wenn sie nichts Sichtbares tut. Und nach dem Deinstallieren bleibt manchmal Restcode im Theme zurück. So gehst du vor:

1. Liste alle Apps auf und notiere, wofür du sie wirklich brauchst.
2. Schau im Browser-Entwicklertool (Reiter Netzwerk), welche Skripte von welchen Anbietern geladen werden.
3. Deinstalliere, was du nicht nutzt, und lass Restcode aus dem Theme entfernen.
4. Prüfe, ob eine native Shopify-Funktion die App ersetzt.

Mehr dazu im Artikel Shopify-Apps für den Launch.

Bilder und Medien

• Moderne Formate nutzt Shopify über sein CDN automatisch, wenn das Theme die Bild-Helfer sauber verwendet.
• Lade nicht größer hoch, als du brauchst. Extrem große Originale helfen nicht.
• Videos nur laden, wenn sie gestartet werden, und nicht als Autoplay-Hintergrund auf jeder Seite.
• Alt-Texte pflegen: Das hilft SEO und Barrierefreiheit, ist aber kein Performance-Thema.

Theme-Code

Ein Theme ist nicht automatisch schnell, nur weil es aus dem Theme Store kommt. Funktionsreiche Themes bringen Code für viele Einsatzfälle mit, den dein Shop nie nutzt. Hilfreich:

• ungenutzte Sektionen, Skripte und Styles entfernen
• kritisches CSS früh laden, Rest später
• Skripte mit defer oder async einbinden, wo es sicher ist
• Liquid-Schleifen schlank halten, etwa keine Schleife über alle Produkte einer Kollektion ohne Grund

Wenn Theme und Design neu entstehen, lässt sich Performance von Anfang an mitdenken. Das ist deutlich günstiger als späteres Aufräumen. Siehe auch unsere Leistung Performance-Optimierung.

Was ist realistisch?

Ehrlich gesagt: Ein Shop mit Tracking, Consent-Banner, Bewertungs-App und Chat erreicht selten einen Lighthouse-Wert von 100. Das ist auch nicht nötig. Realistisch sind:

• gute Felddaten bei LCP, CLS und INP für die wichtigsten Seitentypen
• stabile Werte, auch nach dem Hinzufügen neuer Apps
• ein klares Budget: Jede neue App muss ihren Platz rechtfertigen

Eine Optimierung ist ein Prozess, kein Einmal-Projekt. Nach größeren Änderungen lohnt sich ein erneuter Check.

So starten wir

Wenn du nicht weißt, wo dein Shop steht, beginnt es mit einer Bestandsaufnahme: Messwerte, Skriptanalyse, Theme-Review. Daraus entsteht eine priorisierte Liste mit Aufwand und Wirkung. Auf Wunsch setzen wir die Punkte zum Festpreis um. Einen ersten Überblick gibt auch unser Shopify-Audit.

Kostenloses Erstgespräch buchen →

Wie Performance und Verkaufszahlen zusammenhängen, liest du im Artikel Shopify Conversion-Optimierung: 12 Hebel.