Core Web Vitals für Shopify

Shopify nimmt Händlern die Teile der Web-Performance ab, an denen Betreiber anderer Plattformen scheitern: Hosting, ein weltweites CDN, Bildskalierung und die Kasse. Die Serverantwortzeit ist bei einem Shopify-Shop selten das Problem. Über die Core Web Vitals entscheidet, was der Händler obendrauf setzt: das Theme, die Apps, die Bilder und das Tracking. Dieser Ratgeber nutzt die Messungen von PerfDelta an Shopify-Shops, um zu zeigen, wo sie stehen, warum die Shops, die scheitern, meist scheitern und was ein Händler ändern kann, ohne die Plattform anzufassen.

Aus den Messungen von PerfDelta: 59 % der 280 gemessenen Shopify-Websites bestehen alle drei Core Web Vitals (alle gemessenen Websites: 49 %). Gut sind 81 % beim LCP, 74 % beim INP und 80 % beim CLS. Alle Werte, weitere Plattformen und Regionen zeigt die Shopify Pagespeed-Statistik. Mehr dazu im Datenblock unten.

Wo Shopify-Shops stehen

In unseren Messungen bestehen Shopify-Shops die Core Web Vitals häufiger als die durchschnittliche Website und gehören zugleich zu den schwersten Seiten, die wir sehen. Beides hat dieselbe Ursache: eine Plattform, die schnell rendert und Bilder gut ausliefert, kombiniert mit Händlern, die Hero-Videos, App-Skripte und Marketing-Pixel darauf stapeln. Der Datenblock unten nennt die aktuelle Bestehensquote und die Verteilung der Metriken; die Shopify Pagespeed-Statistik ergänzt Seitengewicht, die häufigsten Drittanbieter und die Lighthouse-Befunde, dazu einen Regionsvergleich für Deutschland, Österreich und die Schweiz und Großbritannien.

Was Shopify-Shops typischerweise bremst

Apps

Jedes Bewertungs-Widget, jedes Upsell-Werkzeug, jede Wunschliste, Größentabelle, jeder Chat-Starter und jede App für Benachrichtigungen bei Wiederverfügbarkeit fügt ein Skript ins Theme ein, und die meisten laden auf jeder Seite, ob ihre Funktion dort erscheint oder nicht. Zehn Apps sind zehn Skripte, die mit dem Produktbild und dem Warenkorb-Button um den Hauptthread konkurrieren. Das ist die größte Einzelursache für einen schlechten INP bei Shopify.

Bilder und Video im Hero-Bereich

Das Bild-CDN von Shopify skaliert und konvertiert Bilder, aber nur, wenn das Theme die richtigen Größen anfordert. Hero-Bilder in voller Breite bei maximaler Auflösung, Slideshows mit allen geladenen Folien und automatisch abspielende Hintergrundvideos setzen den LCP spät und das Seitengewicht hoch.

Theme-JavaScript und renderblockierende Dateien

Ältere oder stark angepasste Themes laden jQuery, eine Slider-Bibliothek und das Theme-Bundle synchron im Kopf. Neuere Themes aus dem Theme Store sind deutlich schlanker, aber Jahre an Anpassungen und „vorübergehenden“ Snippets summieren sich. Renderblockierende Ressourcen sind in unseren Daten der häufigste Lighthouse-Befund bei Shopify-Shops.

Tracking und Marketing-Pixel

Google Tag Manager, Meta- und TikTok-Pixel, Klaviyo, Microsoft Clarity und ein A/B-Test-Werkzeug sind eine typische Ausstattung. Jedes ist für sich klein; zusammen sind sie oft der größte Anteil an der Hauptthread-Zeit. Siehe Drittanbieter-Code.

Layout-Verschiebungen durch spät geladene Elemente

Ankündigungsleisten, Cookie-Banner, Bewertungssterne, die erst nach der API-Antwort erscheinen, und Produktbilder ohne Seitenverhältnis schieben Inhalte nach dem ersten Paint nach unten und erhöhen den CLS.

Maßnahmen, die ein Händler selbst umsetzen kann

1. Apps prüfen. Listen Sie jede installierte App, notieren Sie, auf welchen Seiten ihre Funktion tatsächlich erscheint, und deinstallieren Sie, was ungenutzt ist. Prüfen Sie danach den Theme-Code auf verbliebene Snippets; Apps räumen nicht immer auf. Bei den Apps, die bleiben, bevorzugen Sie solche auf Basis von Theme App Extensions, die nur dort laden, wo der Block platziert ist.
2. Den Hero-Bereich in Ordnung bringen. Ein Bild, für den Viewport dimensioniert mit srcset, als WebP oder AVIF, mit fetchpriority="high" und ohne verzögertes Laden. Ersetzen Sie Autoplay-Video durch ein Vorschaubild mit Abspielknopf. Aktuelle Themes aus dem Theme Store machen das von Haus aus; prüfen Sie, dass Anpassungen es nicht rückgängig gemacht haben.
3. Alles unterhalb des sichtbaren Bereichs verzögert laden. Produktraster, Slideshows ab der zweiten Folie und Footer-Inhalte. Die meisten Themes unterstützen loading="lazy" für Kollektionsbilder; der Ratgeber zum verzögerten Laden hat die Details.
4. Tracking spät laden. Verschieben Sie Marketing-Pixel in die Kundenereignisse von Shopify (Web Pixels) oder in den Tag Manager mit Triggern, die nach dem Laden feuern, und halten Sie das Consent-Werkzeug leicht. Meiden Sie A/B-Test-Werkzeuge, die die Seite verstecken, bis sie gelaufen sind.
5. Platz für dynamische Elemente reservieren. Geben Sie Ankündigungsleisten, Bewertungs-Widgets und App-Blöcken eine feste Höhe oder min-height und Produktbildern ein aspect-ratio, damit spät geladener Inhalt das Layout nicht verschiebt.
6. Theme aktualisieren oder ersetzen. Ist das Theme mehrere Jahre alt oder trägt es viele Anpassungen, entfernt der Wechsel auf ein aktuelles Theme aus dem Theme Store mit anschließendem Nachziehen nur der noch nötigen Anpassungen den größten Teil des renderblockierenden und ungenutzten Codes in einem Schritt.
7. Bei der Shopify-Schriftbibliothek bleiben und die Hauptschrift vorab laden. Shopify liefert seine Schriften mit font-display: swap aus; eigene Schriften im Theme brauchen dieselbe Behandlung (Ratgeber zu font-display).

Das Ergebnis messen

Testen Sie Startseite, eine Kollektionsseite und eine Produktseite getrennt; das Produkt-Template trägt meist die meisten Apps. Beobachten Sie den INP im Feld am genauesten, weil er auf App-Skripte reagiert, und vergleichen Sie jeden Shop mit den Shopify-Medianen auf der Plattformseite statt mit dem gesamten Web.

Häufige Fragen

Warum hat mein Shopify-Shop einen niedrigen Lighthouse-Score, besteht aber die Core Web Vitals?

Der mobile Labortest simuliert ein langsames Smartphone, auf dem App-Skripte und schwere Bilder Sekunden kosten. Echte Käufer haben meist schnellere Geräte, deshalb sehen die Felddaten besser aus. Der Score zeigt trotzdem auf echte Probleme: Dieselben Skripte bremsen Käufer mit günstigeren Smartphones.

Wie viele Apps sind zu viele?

Zählen Sie Skripte, nicht Apps. Apps auf Basis von Theme App Extensions, die nur dort laden, wo sie genutzt werden, sind billig; Apps, die auf jeder Seite ein Skript einfügen, nicht. Zehn oder mehr skript-einfügende Apps sind ein verbreitetes Muster bei Shops, die am INP scheitern.

Kann ich die Shopify-Kasse beschleunigen?

Die Kasse wird von Shopify gehostet und optimiert. Was Sie kontrollieren, ist der Weg dorthin: Produkt- und Warenkorbseiten. Konzentrieren Sie sich darauf.

Ist der Shopify-Geschwindigkeitswert wichtig?

Der eigene Geschwindigkeitswert von Shopify ist ein Lighthouse-basierter Laborwert für eine Auswahl von Seiten. Nutzen Sie ihn wie jeden Lab-Score als Diagnose und beurteilen Sie den Shop nach seinen Core-Web-Vitals-Felddaten.