Core Web Vitals für Shopify: Kompletter Leitfaden (2026)

Shopify und Core Web Vitals: Du kontrollierst den Server nicht

Bei der Optimierung der Core Web Vitals unterscheidet sich Shopify grundlegend von WordPress oder individuell entwickelten Seiten. Bei WordPress kontrollierst du alles: den Server, die Datenbank, das Caching und jede Zeile Code. Bei Shopify arbeitest du auf einer Managed-Plattform – manche Dinge liegen komplett außerhalb deiner Kontrolle.

Laut dem Core Web Vitals Technology Report liegt Shopify bei den mobilen CWV-Bestehensquoten vor WordPress (rund 65 % gegenüber 44 % Stand Ende 2025). Das liegt an Shopifys starker Standard-Infrastruktur: schnelle Server, ein globales CDN über Cloudflare, automatische Bildformat-Konvertierung und voroptimierte Basis-Themes. Die Serverseite hat die Plattform im Griff.

Probleme entstehen erst durch das, was Händler selbst hinzufügen: Apps, Drittanbieter-Skripte, eigene Theme-Anpassungen, zu große Bilder und zu viele Webfonts. Hier scheitern Shopify-Shops an den Core Web Vitals. Da dein Zugriff auf den Server und den Kern-Code beschränkt ist, muss deine Optimierungsstrategie anders ansetzen.

Shopifys Core Web Vitals in Zahlen

Im CrUX Technology Report belegt Shopify bei den CWV-Bestehensquoten insgesamt Platz 2 – nur geschlagen von Duda (einer weit weniger genutzten Plattform). Die Zahlen aus CrUX und unabhängigen Benchmark-Daten:

Quellen: CrUX Technology Report (Juni 2025), SearchEngineJournal-CMS-Analyse, Shero Commerce Benchmark über 1.000 Shops (Nov. 2025). *Medianwerte aus dem Shero-Benchmark, nicht CrUX p75.

Der Benchmark von Shero Commerce mit 1.000 echten Shopify-Shops ergab: Nur 48 % bestehen alle drei Core Web Vitals auf Mobilgeräten. Das ist deutlich weniger als der CrUX Technology Report für Shopify insgesamt ausweist. Der Grund: Shops im CrUX-Datensatz benötigen ein Mindestmaß an Chrome-Traffic, weshalb dort größere, besser optimierte Shops überrepräsentiert sind. Der mediane mobile LCP von 2,26 Sekunden liegt gefährlich nah am Schwellenwert von 2,5 Sekunden für „gut“. Schon kleine Änderungen (eine zusätzliche App, ein unoptimiertes Hero-Bild) lassen einen Shop durchfallen.

CLS und INP sind nicht das Problem: Shopifys medianer CLS von 0,01 ist hervorragend, und der mediane INP von 153 ms liegt sicher im guten Bereich. Beim LCP scheitern Shopify-Shops an den Core Web Vitals.

Echte Nutzerdaten von CoreDash aus Shopify-Shops bestätigen dieses Muster: Shops, die die CWV verfehlen, scheitern fast immer am LCP. Werden mehr als 8 Skripte von Drittanbieter-Apps geladen, liegt der mediane mobile LCP über 3,0 Sekunden. Shops mit 3 oder weniger App-Skripten halten den medianen LCP unter 2,0 Sekunden. Der Zusammenhang zwischen der Anzahl installierter Apps und dem LCP ist in unseren Daten der stärkste Indikator für durchgefallene Core Web Vitals.

Was du bei Shopify nicht kontrollieren kannst

Bevor du optimierst, musst du die Grenzen kennen. Bei Shopify kannst du Folgendes nicht:

• Den Server oder das Hosting ändern. Shopify läuft auf eigener Infrastruktur. Du kannst weder zu einem schnelleren Hoster wechseln noch Caching auf Serverebene konfigurieren oder PHP-Einstellungen anpassen. Der Vorteil: Shopifys TTFB ist generell exzellent (unter 300 ms in den meisten Regionen).
• content_for_header entfernen. Über dieses Liquid-Tag bindet Shopify zwingend erforderliches JavaScript auf jeder Seite ein. Dazu gehören Shopifys eigene Webanalyse, Checkout-Skripte und die Lade-Infrastruktur für Apps. Du kannst das Tag nicht entfernen. Wenn du es verzögert lädst, riskierst du Fehler im Checkout und bei App-Funktionen.
• Das CDN kontrollieren. Shopify nutzt Cloudflare als CDN. Du kannst Caching-Regeln, Edge-Worker oder eigene HTTP-Header nicht so konfigurieren wie bei einem eigenen Cloudflare-Setup.
• Auf die Datenbank oder den Backend-Code zugreifen. Shopifys Template-Sprache Liquid läuft zwar serverseitig, aber du kannst Datenbankabfragen oder serverseitiges Rendern nicht über das hinaus optimieren, was Liquid vorgibt.

Deine gesamte Optimierungsstrategie konzentriert sich daher auf das, was du kontrollieren kannst: deinen Theme-Code, installierte Apps, Bilder, Schriften und Drittanbieter-Skripte.

Das größte CWV-Problem bei Shopify: App-Bloat

Installierte Shopify-Apps sind die mit Abstand häufigste Ursache für verfehlte Core Web Vitals in Shopify-Shops. Jede App kann JavaScript und CSS auf jeder einzelnen Seite deines Shops einbinden – selbst dort, wo sie gar nicht gebraucht wird. Eine Bewertungs-App lädt auf der Startseite. Ein Produktempfehlungs-Widget lädt auf der Kontaktseite. Ein Countdown-Timer lädt auf jeder Produktseite, obwohl keine Rabattaktion läuft.

Wie Apps Code einschleusen

Shopify-Apps binden Code auf unterschiedliche Weise ein – und das ist entscheidend für das Aufräumen:

• App Embeds (Theme-Editor): Diese lassen sich im Theme-Editor unter „App Embeds“ einfach ausschalten. Das ist die sauberste Methode und am leichtesten zu verwalten.
• Theme-Snippets: Manche Apps schreiben bei der Installation Code direkt in deine Theme-Dateien. Eine Deinstallation entfernt diesen Code oft nicht. Du musst snippets/ und sections/ manuell nach übrig gebliebenen Dateien durchsuchen.
• ScriptTag-API: Apps können Skripte programmatisch einbinden, ohne Theme-Dateien zu berühren. Diese laden über Shopifys content_for_header. Das Deinstallieren der App entfernt sie zwar, aber das Skript liegt oft noch im Cache.
• Drittanbieter-Loader: Einige Apps laden externes JavaScript von ihrem eigenen CDN nach. Das erzeugt zusätzliche DNS-Lookups und Netzwerkanfragen.

Der App-Audit

So analysiere ich den Performance-Einfluss von Shopify-Apps:

1. Teste deine Startseite, eine Produktseite, eine Kategorieseite und den Warenkorb mit PageSpeed Insights. Notiere dir die Werte für LCP, INP und CLS.
2. Öffne die Chrome DevTools und wechsle zum Tab Coverage. Lade die Seite neu und prüfe den Anteil an ungenutztem JavaScript. Bei überladenen Shopify-Shops bleiben auf einer Seite oft 60 % bis 80 % des geladenen JavaScripts ungenutzt.
3. Öffne den Tab Network und filtere nach JavaScript. Sortiere nach Dateigröße. Finde heraus, welche Skripte von Apps stammen und welche aus deinem Theme. Die Spalte „Initiator“ zeigt dir, wer das jeweilige Skript geladen hat.
4. Deaktiviere Apps nacheinander (oder schalte ihre App Embeds aus) und teste erneut. Miss den Einfluss jeder einzelnen App auf INP und LCP.
5. Entscheide bei jeder App: Rechtfertigt der geschäftliche Nutzen den Performance-Verlust? Gibt es eine leichtgewichtigere Alternative? Lässt sich die App auf bestimmte Seitentypen beschränken?

Daten aus Optimierungsprojekten mit CoreDash zeigen den typischen Effekt einer App-Bereinigung: Das Entfernen eines einzigen überflüssigen Bewertungsskripts verbesserte den medianen INP eines Shops um 45 ms. Das Löschen von drei ungenutzten Apps (ein deaktiviertes Pop-up-Tool, ein Treueprogramm und ein veraltetes Chat-Widget) reduzierte das JavaScript um 380 KB und verbesserte den mobilen LCP um 1,1 Sekunden. Jede App, die du nicht mehr aktiv nutzt, bremst deinen Shop grundlos aus. Entferne sie.

LCP bei Shopify optimieren

In Shopify-Shops ist das LCP-Element fast immer das Hero-Banner auf der Startseite, das Hauptproduktbild auf Produktseiten oder das Kategorie-Banner auf Kategorieseiten. Shopifys CDN liefert Bilder automatisch im WebP-Format aus – das hilft. Einige Optimierungen musst du jedoch selbst in die Hand nehmen.

Preload für das Hero-Bild einrichten

Shopifys Liquid-Filter image_tag bietet einen integrierten preload-Parameter. Steht dieser auf true, sendet Shopify direkt vom Server einen Link-HTTP-Header mit rel=preload. Der Browser empfängt dieses Signal noch vor dem Parsen des HTML – früher geht es nicht. Zudem übernimmt der Tag automatisch imagesrcset und imagesizes. So funktioniert responsives Preloading sauber und ohne das Risiko abweichender URLs.

Kombiniere das mit fetchpriority: 'high' am <img>-Tag und loading: 'eager', um Shopifys standardmäßiges Lazy Loading für Abschnitte unterhalb des sichtbaren Bereichs zu überschreiben. Beim Hero-Bild sieht das so aus:

{{ section.settings.hero_image | image_url: width: 1200 | image_tag:
    preload: true,
    fetchpriority: 'high',
    loading: 'eager',
    sizes: '100vw'
}}

Diese eine Zeile liefert dir: HTTP-Header-Preload (frühestmöglicher Zeitpunkt), fetchpriority="high" am <img>-Tag, sofortiges Laden (eager) statt Lazy Loading, automatische width- und height-Attribute gegen CLS sowie ein automatisch generiertes srcset. Setze beim Hero-Bild immer fetchpriority="high", selbst wenn du kein Preload nutzt.

Wenn dein Theme ein CSS-Hintergrundbild für den Hero nutzt

Einige Shopify-Themes binden das Hero-Banner als CSS-background-image statt über ein <img>-Tag ein. Für den LCP ist das ein Antipattern: Du verlierst fetchpriority, automatisches srcset und Shopifys HTTP-Header-Preload. Zudem kann der Browser das Bild erst anfordern, wenn er die CSS-Datei heruntergeladen und geparst hat.

Die saubere Lösung: Ersetze das CSS-Hintergrundbild durch ein <img>-Tag, um image_tag korrekt zu nutzen. Das erfordert eine Anpassung im Theme-Code, ist aber der einzig richtige Weg.

Wenn du das Template absolut nicht ändern kannst, kannst du einen manuellen Preload-Hinweis in theme.liquid einfügen:

{%- if template == 'index' -%}
  <link rel="preload" as="image" href="{{ section.settings.hero_image | image_url: width: 1200 }}">
{%- endif -%}

Achtung: Die URL im Preload muss exakt mit der URL im CSS übereinstimmen – inklusive Shopifys Versions-Parameter ?v= und &width=. Weichen sie auch nur um ein Zeichen ab, lädt der Browser das Bild doppelt herunter. Das verschlechtert die Performance, statt sie zu verbessern.

Die vollständige Strategie zum Vorabladen von LCP-Bildern findest du in unserer Anleitung wie du das LCP-Bild per Preload lädst.

Kein Lazy Loading im sichtbaren Bereich

Viele Shopify-Themes setzen loading="lazy" pauschal auf alle Bilder – auch auf den Hero. Das signalisiert dem Browser, das wichtigste Bild der Seite herabzustufen. Stelle sicher, dass dein Theme Bilder im sichtbaren Bereich (Above the fold) vom Lazy Loading ausschließt. Bei modernen Themes mit Shopifys image_tag-Filter nutzt du loading: 'eager' für Hero-Bilder.

Bildgrößen optimieren

Shopifys CDN kann Bilder über URL-Parameter dynamisch anpassen. Deine Liquid-Templates müssen jedoch die passende Größe anfordern. Lade kein 2.000 Pixel breites Bild, wenn es nur mit 800 Pixeln angezeigt wird. Nutze Shopifys responsives Bild-Markup mit sauberen srcset- und sizes-Attributen. Siehe dazu unsere Anleitung über das Optimieren von Bildern.

INP bei Shopify optimieren

Ein schlechter INP entsteht bei Shopify fast immer dadurch, dass JavaScript den main thread blockiert. Shopifys eigene Einbindung über content_for_header bringt bereits ein Grundrauschen an JavaScript mit, das du nicht entfernen kannst. Alles, was du zusätzlich installierst, verschärft das Problem.

Nicht kritische Drittanbieter-Skripte verzögern

Chat-Widgets (Tidio, Zendesk, Intercom), Bewertungs-Apps (Judge.me, Yotpo, Loox), Personalisierungs-Tools (Klaviyo-Pop-ups, Privy) und Tracking (Google Analytics, Facebook Pixel, Hotjar) dürfen das initiale Rendern der Seite nicht blockieren. Der richtige Ansatz ist requestIdleCallback: Der Browser lädt diese Skripte erst, wenn der main thread im Leerlauf (idle) ist – meist einige Sekunden nach dem Rendern der Seite.

Nutze kein interaktionsbasiertes Nachladen (Skripte erst beim ersten Scrollen, Klick oder Tippen laden). Wenn ein Nutzer auf einen Button tippt und deine Website genau bei diesem Event 500 KB Drittanbieter-JavaScript nachlädt, blockiert der main thread. Die Interaktion erhält einen miserablen INP-Wert. Der Sinn des Verzögerns liegt darin, den main thread für Nutzerinteraktionen freizuhalten – nicht, mit ihnen zu konkurrieren.

Ersetze bei unkritischen Skripten das src-Attribut durch data-src und setze es zurück, sobald der Browser im Leerlauf ist:

<script>
(window.requestIdleCallback || function(cb) { setTimeout(cb, 1); })(function() {
  document.querySelectorAll('script[data-src]').forEach(function(s) {
    s.src = s.dataset.src;
  });
});
</script>

Der setTimeout-Fallback deckt Safari ab, da Apple requestIdleCallback nicht unterstützt. Er wartet zwar nicht auf eine echte Leerlaufphase wie requestIdleCallback, entlastet aber dennoch den main thread. Dynamisch eingeschleuste Skripte umgehen ohnehin den Preload-Scanner – in der Praxis reicht dieser Fallback völlig aus.

Weitere Methoden zum Verzögern von JavaScript findest du unter 14 Methoden, um JavaScript zu verzögern.

Theme-JavaScript reduzieren

Shopifys „Online Store 2.0“-Themes (wie Dawn) sind von Grund auf schlank gebaut. Viele Drittanbieter-Themes bringen jedoch massenhaft JavaScript für Mega-Menüs, Produkt-Slider, Quick-View-Modals und Animationen mit. Prüfe das JavaScript deines Themes im Coverage-Tab der Chrome DevTools. Lädt dein Theme mehr als 200 KB JavaScript, deaktiviere unnötige Funktionen oder ersetze sie durch reine CSS-Lösungen.

CLS bei Shopify beheben

Cumulative Layout Shift wird in Shopify-Shops typischerweise durch drei Dinge verursacht: Bilder ohne Größenangaben, das Austauschen von Schriften (Font Swapping) und dynamisch nachgeladene App-Inhalte.

Bildabmessungen in Liquid-Templates festlegen

Prüfe deine Liquid-Templates auf <img>-Tags ohne width- und height-Attribute. Shopifys image_tag-Filter gibt diese automatisch aus:

{{ product.featured_image | 
   image_tag: widths: '200,400,800', sizes: '(max-width: 768px) 100vw, 50vw' }}

Das erzeugt responsive Bilder mit festen Abmessungen und verhindert Layout-Verschiebungen beim Laden der Bilder.

Platz für dynamische Inhalte reservieren

App Embeds, die Bewertungssterne, Trust-Badges, Countdown-Timer oder Ankündigungsleisten nachträglich einbinden, erzeugen CLS. Reserviere für jedes dynamische Element per CSS mit min-height den nötigen Platz. So verschiebt sich der umliegende Inhalt beim Erscheinen nicht. Das gilt besonders für Elemente, die oberhalb bereits sichtbarer Inhalte eingefügt werden.

Laden von Schriftarten optimieren

Falls dein Shopify-Theme eigene Webfonts lädt, stelle sicher, dass sie font-display: swap mit einer passenden Fallback-Schriftart nutzen. Lade deine primären Font-Dateien per Preload, damit der Text schneller in der richtigen Schrift gerendert wird. Lade nur die Schriftschnitte und Stile, die du wirklich brauchst. Siehe dazu unsere Anleitung über die Schriftoptimierung.

Theme-Auswahl und Performance bei Shopify

Die Wahl deines Themes bestimmt das Performance-Fundament deines Shops. Das Projekt ThemeVitals erfasst echte CrUX-Daten für Shopify-Themes. Die wichtigsten Erkenntnisse:

• Dawn (Shopifys kostenloses Standard-Theme) schneidet bei den Core Web Vitals dauerhaft gut ab, da Performance bei der Entwicklung Priorität hatte.
• Themes mit vielen Abschnitten, Animationen und integrierten Funktionen (Mega-Menüs, Produkt-Quick-View, AJAX-Warenkörbe) schleppen mehr JavaScript mit und haben einen schlechteren INP.
• „Online Store 2.0“-Themes sind generell schneller als ältere Themes, weil sie Shopifys moderne Section-Architektur und optimiertes Asset-Loading nutzen.

Wenn du ein neues Theme suchst, prüfe vor dem Kauf die CrUX-Daten auf ThemeVitals. Die günstigste Performance-Optimierung ist ein Theme, das von Haus aus schnell ist.

Was Shopify von Haus aus gut macht

Shopify macht ab Werk vieles richtig:

• Schnelle Infrastruktur: Shopifys Server und das Cloudflare-CDN liefern weltweit konstant niedrige TTFB-Werte.
• Automatisches WebP: Shopifys CDN konvertiert Bilder automatisch in das WebP-Format, sobald der Browser dies unterstützt.
• HTTP/2 und Brotli: standardmäßig in allen Shopify-Shops aktiviert.
• Bilder-CDN mit Echtzeit-Skalierung: Du kannst jedes Bild über URL-Parameter in beliebiger Breite anfordern.
• Preconnect-Hinweise: Shopify setzt Preconnect-Hinweise für seine CDN-Domains automatisch.

Dank dieser Voreinstellungen ist die Basis-Performance von Shopify stark. Deine Aufgabe ist es, diese Vorteile nicht durch zu viele Apps und Skripte zunichtezumachen.

Monitoring für deinen Shopify-Shop

Das Shopify-Admin-Dashboard enthält zwar einen „Speed Score“, dieser basiert jedoch auf vereinfachten Lighthouse-Werten und spiegelt deine echten Core Web Vitals nicht wider. Für ein aussagekräftiges Monitoring nutzt du:

• Google Search Console: Prüfe den Core-Web-Vitals-Bericht auf field data für deinen gesamten Shop.
• CoreDash: Installiere das schlanke RUM-Snippet (eine Zeile Code in theme.liquid), um Core-Web-Vitals-Daten in Echtzeit nach Seitentyp, Gerät und Land aufzuschlüsseln.
• PageSpeed Insights: Teste einzelne Produkt-, Kategorie- und Startseiten-URLs für detaillierte Diagnosedaten.

Miss die Performance nach jeder App-Installation, jedem Theme-Update und jedem Start einer saisonalen Kampagne. Performance-Einbrüche bei Shopify entstehen fast immer durch etwas, das kurz zuvor hinzugefügt wurde.

Monitoring-Daten von CoreDash zeigen: Die häufigste Ursache für schlechtere CWV-Werte bei Shopify ist eine neu installierte App, die global JavaScript einschleust. Im Schnitt bringt eine neue Shopify-App 50 KB bis 150 KB zusätzliches JavaScript auf jeden Seitenaufruf. Liegt ein Shop ohnehin nah am LCP-Schwellenwert (2,3 bis 2,5 Sekunden), lässt ihn oft schon eine einzige App durchfallen. Die zweithäufigste Ursache sind saisonale Änderungen: Black-Friday-Banner, Feiertags-Pop-ups und Countdown-Timer, die für eine Rabattaktion eingebaut und danach vergessen wurden.