TL;DR
- Die Core Web Vitals sind drei von Google gemessene Nutzererlebnis-Metriken: LCP (Ladezeit, Ziel ≤ 2,5 s), INP (Reaktionszeit auf Eingaben, Ziel ≤ 200 ms) und CLS (visuelle Stabilität, Ziel ≤ 0,1).
- Bewertet werden echte Nutzerdaten (CrUX-Felddaten) am 75. Perzentil - ein guter Lighthouse-Laborwert allein reicht nicht.
- Die größten Shopify-Hebel: Bilder (LCP-Bild nicht lazy laden, Breiten/Höhen setzen), Apps und Third-Party-Scripts reduzieren, Fonts optimieren und das Theme aktuell halten.
- Core Web Vitals sind Teil des Google-Ranking-Systems (Page Experience) und wirken direkt auf die Conversion-Rate.
Was sind Core Web Vitals?
Google misst mit den Core Web Vitals, wie schnell, reaktionsfreudig und stabil sich eine Seite für echte Besucher anfühlt. Seit März 2024 gilt das Trio:
| Metrik | Misst | Gut | Verbesserungswürdig | Schlecht |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Wann das größte sichtbare Element geladen ist | ≤ 2,5 s | 2,5-4,0 s | > 4,0 s |
| INP (Interaction to Next Paint) | Wie schnell die Seite auf Klicks/Taps reagiert | ≤ 200 ms | 200-500 ms | > 500 ms |
| CLS (Cumulative Layout Shift) | Wie stark Inhalte beim Laden springen | ≤ 0,1 | 0,1-0,25 | > 0,25 |
INP hat 2024 den älteren FID ersetzt - und ist deutlich strenger, weil es alle Interaktionen über den gesamten Seitenbesuch bewertet, nicht nur die erste.
Wichtig für die Einordnung: Google bewertet die Felddaten aus dem Chrome User Experience Report (CrUX), also echte Besucher auf echten Geräten, am 75. Perzentil. Ein Shop „besteht", wenn 75 % der Besuche den Grenzwert einhalten.
Warum Core Web Vitals für Shopify-Shops zählen
- Ranking: Die Metriken fließen in Googles Page-Experience-Bewertung ein. Bei ähnlich relevantem Content entscheidet die Nutzererfahrung mit.
- Conversion: Branchenstudien zeigen seit Jahren denselben Zusammenhang - jede zusätzliche Sekunde Ladezeit kostet messbar Conversion, gerade mobil.
- Werbekosten: Schnellere Landingpages verbessern Quality Scores und senken effektiv den CPC bei Google Ads.
Core Web Vitals richtig messen
- Google Search Console → Nutzerfreundlichkeit der Seite: zeigt CrUX-Felddaten gruppiert nach URL-Mustern - der wichtigste Report, weil Google genau diese Daten bewertet.
- PageSpeed Insights: kombiniert Felddaten (oben) und Labordaten (unten) für einzelne URLs. Immer zuerst auf die Felddaten schauen.
- Shopify Admin → Web-Performance-Dashboard: Shopify zeigt LCP, CLS und INP für deinen Shop direkt im Admin, inklusive Verlauf.
- Chrome DevTools (Performance-Panel): für die Detailanalyse einzelner Interaktionen und Long Tasks.
Miss immer mobil zuerst - dort sind die Werte fast immer schlechter und dort findet der Großteil des Shopify-Traffics statt.
LCP in Shopify verbessern
Das LCP-Element ist in Shops fast immer das Hero-Bild oder das erste Produktbild.
- LCP-Bild niemals lazy laden.
loading="lazy"gehört auf Bilder unterhalb des sichtbaren Bereichs - nicht auf das Hero-Bild. Moderne Themes setzen auf das erste Bildloading="eager"oderfetchpriority="high". - Shopify-CDN-Parameter nutzen: Bilder über
image_urlmit passenderwidthausliefern statt Originalgrößen. Shopify generiert dann automatischsrcset-Varianten und moderne Formate (WebP/AVIF). - Slider im Hero vermeiden: Karussells laden mehrere große Bilder plus JavaScript und verzögern das LCP fast immer. Ein statisches Hero-Bild mit klarer Botschaft konvertiert in A/B-Tests regelmäßig besser.
- Render-blockierendes JavaScript reduzieren: Jede App, die synchron im
<head>lädt, schiebt das LCP nach hinten (siehe Abschnitt Apps).
INP in Shopify verbessern
INP leidet unter JavaScript-Überlastung des Main Threads - in Shopify fast immer verursacht durch Apps und Tracking-Skripte.
- App-Inventur machen: Jede installierte App mit Storefront-Anteil lädt eigenes JavaScript. Apps, die du nicht aktiv nutzt, deinstallieren - und prüfen, ob das Theme danach sauber ist.
- Tracking-Pixel konsolidieren: Mehrfache Analytics-, Pixel- und Heatmap-Skripte erzeugen Long Tasks. Was nicht nachweislich Erkenntnisse liefert, fliegt raus.
- Schwere Theme-Features hinterfragen: Mega-Menüs mit hunderten Knoten, animierte Produkt-Grids und Quick-View-Modals kosten Interaktionsbudget.
- Theme-Updates einspielen: Theme-Entwickler optimieren laufend - ein zwei Jahre altes Theme-Release schleppt oft unnötig schweres JavaScript mit.
CLS in Shopify verbessern
Layout-Sprünge entstehen, wenn Elemente ohne reservierten Platz nachladen.
- Breite und Höhe für alle Bilder setzen (
width/heightbzw.aspect-ratio), damit der Browser den Platz vorab reserviert. - Announcement-Bars und Banner mit fester Höhe rendern statt nachträglich einzuschieben.
- Web-Fonts:
font-display: swapund Preload für die wichtigste Schnittdatei verhindern sowohl unsichtbaren Text als auch späte Sprünge. Noch besser: mit System-Fonts oder wenigen Schnitten auskommen. - App-Inhalte prüfen: Reviews-Widgets, Countdown-Timer und Pop-ups, die Inhalte verschieben, sind klassische CLS-Treiber. Solche Elemente brauchen reservierte Container.
Die typischen Fehler
- Nur Lighthouse-Scores optimieren. Der Laborwert ist ein Diagnose-Werkzeug - Google bewertet Felddaten. Ein 95er-Lighthouse-Score mit schlechten CrUX-Werten hilft nicht.
- Apps installieren und nie wieder anfassen. Der App-Bestand ist der häufigste Performance-Killer in Shopify-Shops. Quartalsweise Inventur lohnt sich.
- Bilder in Originalgröße hochladen und ausliefern. 4000-Pixel-Fotos für 400-Pixel-Slots sind immer noch der häufigste LCP-Fehler.
- Alles gleichzeitig ändern. Erst messen, dann einen Hebel umsetzen, dann wieder messen - sonst weißt du nie, was gewirkt hat. CrUX-Daten reagieren mit rund 28 Tagen Verzögerung.
FAQ
Wie schnell wirken sich Verbesserungen aus? Die CrUX-Felddaten sind ein rollierender 28-Tage-Schnitt. Nach einer Optimierung dauert es also bis zu vier Wochen, bis die Search Console den vollen Effekt zeigt.
Reicht ein schnelles Theme? Ein gutes Theme ist die Basis, aber Apps, Bilder und Fonts liegen in deiner Verantwortung. Auch das schnellste Theme wird durch 20 Storefront-Apps langsam.
Muss ich auf Hydrogen/Headless wechseln? Nein. Für die allermeisten Shops holt ein aufgeräumtes Liquid-Theme mit optimierten Bildern und schlankem App-Stack mehr heraus als ein Headless-Umbau - zu einem Bruchteil der Kosten. Mehr dazu: Headless Commerce mit Hydrogen.
Weiterführend: