Im Sommer 2024 hat ein großer Elektronik-Händler seine Produktseiten radikal verschlankt. Drei Sekunden schneller Ladezeit, 40 Prozent weniger Absprünge. Das war nicht Glück – das war Core Web Vitals Optimierung. Google hat diese Metriken längst zur Norm erhoben, und 2026 wird die Messlattte noch höher gelegt. Wer jetzt nicht handelt, verliert Rankings und Conversions.
Die Realität in E-Commerce-Agenturen und Shop-Betrieben ist oft diese: Man weiß, dass Core Web Vitals wichtig sind, aber konkrete Maßnahmen bleiben vage. Dieser Artikel zeigt dir, wie du LCP, INP und CLS in deinem Shop technisch anpackst – mit echten Fallbeispielen für Shopify und WooCommerce.
1. Largest Contentful Paint (LCP) optimieren: Die erste Impression zählt
LCP misst, wann der größte sichtbare Content-Block auf der Seite vollständig geladen ist. Für E-Commerce ist das kritisch: Bei Produktseiten ist das oft das Hero-Image oder das Produktfoto. Bei Startseiten kann es ein großes Banner sein. Google fordert hier einen LCP von unter 2,5 Sekunden. Das klingt machbar – ist es aber nicht immer.
Das Kernproblem: Viele Shops laden Bilder unkomprimiert oder in falschen Formaten. Ein 4-MB-JPG vom Fotografen ist schnell online, aber auch schnell ein LCP-Killer. Hier sind die technischen Hebel:
- Image Optimization: WebP-Format für moderne Browser, JPEG für Fallback. Größe: Produktfotos auf 1200 × 1200 Pixel skalieren, nicht 3000 × 3000. Tools wie ImageOptim oder TinyPNG reduzieren Dateigröße um 60–80 Prozent ohne sichtbaren Qualitätsverlust.
- Lazy Loading deaktivieren für LCP-Image: Das größte Bild sollte nicht lazy-loaded werden. In HTML:
<img loading="eager">oder gar kein loading-Attribut für das Hero-Bild. Lazy Loading für alle anderen Bilder ist sinnvoll. - Preload kritischer Ressourcen: Im
<head>sollte das LCP-Image vorgeladen werden:<link rel="preload" as="image" href="/product.webp">. Das spart Millisekunden. - Font Loading: Wenn Überschriften auf Web-Fonts warten, verzögert das LCP. Fonts mit
font-display: swapladen, damit Text sofort sichtbar ist.
Für Shopify-Nutzer: Das Theme bestimmt viel. Viele Standard-Themes laden Bilder unoptimiert. Im Theme-Code nach img_url suchen und das Format explizit auf WebP setzen: {{ product.featured_image | img_url: '1200x1200' }}. Shopify konvertiert dann automatisch zu WebP.
Für WooCommerce: Plugins wie Smush oder ShortPixel komprimieren Bilder automatisch. Wichtig: Diese sollten beim Upload aktiv sein, nicht nur nachträglich. Außerdem sollte das Theme Lazy Loading für das erste Bild deaktivieren – das ist in vielen WooCommerce-Themes standardmäßig nicht der Fall.
2. Interaction to Next Paint (INP) senken: Schnelle Reaktion auf Nutzer-Aktionen
INP ist die neue Metrik, die 2024 FID (First Input Delay) ersetzt hat. Sie misst, wie schnell die Seite auf Klicks und Eingaben reagiert. Für Shops bedeutet das: Wenn ein Kunde auf "In den Warenkorb" klickt, sollte die Seite sofort reagieren – nicht nach 500 Millisekunden.
Das Problem ist oft JavaScript. Viele Shops laden Third-Party-Scripts (Tracking, Chats, Ads), die den Main Thread blockieren. Wenn der Browser mit diesen Scripts beschäftigt ist, kann er nicht auf Nutzer-Eingaben reagieren.
Konkrete Maßnahmen:
- JavaScript-Audit: Google Chrome DevTools → Performance Tab → Recording starten, auf Buttons klicken. Wenn die "Main" Zeile durchgehend hoch ist, läuft zu viel JS. Welche Scripts sind es? Google Analytics, Hotjar, Facebook Pixel? Alle diese sollten mit
asyncoderdefergeladen werden, nicht blockierend im<head>. - Third-Party-Scripts verzögern: Tracking-Scripts können auf Nutzer-Interaktion warten. Statt Google Analytics beim Seitenload zu laden, kann es nach 3 Sekunden geladen werden. Das spart kritische Millisekunden. Mit Google Tag Manager ist das einfach: Trigger auf "Page View – nach 3 Sekunden" setzen.
- Code Splitting: Große JavaScript-Bundles sollten aufgeteilt werden. Nicht alles beim Seitenload laden, nur das Nötigste. Das ist ein Thema für Entwickler, aber wichtig für INP.
- React/Vue Optimierung: Viele moderne Shops nutzen React. Hier sollte Code-Splitting und Lazy Loading von Komponenten Standard sein. Eine Produktseite mit 50 Varianten braucht nicht alle Daten beim Load – nur die aktuelle.
Shopify-spezifisch: Viele Apps sind JavaScript-Hogs. Eine beliebte Bewertungs-App kann 200 KB JavaScript hinzufügen. Das klingt wenig, aber wenn 10 Apps das tun, sind es 2 MB. Jede App sollte hinterfragt werden: Ist der Performance-Gewinn größer als der Verlust? Oft nicht. Im Shopify Admin → Apps & Sales Channels → die Auswirkung prüfen.
WooCommerce-Nutzer sollten Plugin-Überfluss vermeiden. Ein Shop mit 20 Plugins ist normal – aber 20 × schlecht optimierte Plugins = INP-Desaster. Jedes Plugin sollte mit Google PageSpeed Insights getestet werden, isoliert.
3. Cumulative Layout Shift (CLS) eliminieren: Stabilität ist Vertrauen
CLS misst, wie stark sich das Layout beim Laden verschiebt. Klassisches Beispiel: Nutzer will auf einen Button klicken, aber gerade lädt ein Bild und der Button rutscht nach unten. Der Nutzer klickt auf die falsche Stelle. Das ist nicht nur frustrierend – Google bewertet das negativ.
CLS sollte unter 0,1 sein (Google-Standard). Viele Shops liegen bei 0,15–0,3. Das ist ein großer Ranking-Nachteil.
Häufige CLS-Killer und Lösungen:
| Problem | Ursache | Lösung |
|---|---|---|
| Banner/Header verschiebt sich | Sticky Header lädt nach Seitenload | CSS für feste Höhe reservieren, oder Header mit position: fixed laden |
| Bilder drücken Inhalte nach unten | Bilder ohne explizite Höhe | Für jedes <img> width und height setzen oder aspect-ratio CSS |
| Werbebanner/Pop-ups erscheinen plötzlich | JavaScript lädt Inhalte nach Seitenload | Platz reservieren oder Animation nutzen, die kein Layout shiftet |
| Schriften werden ausgetauscht | Web-Fonts laden langsam | font-display: swap nutzen, damit Fallback-Font sofort sichtbar ist |
Shopify: Das Theme bestimmt CLS stark. Viele Themes haben Sticky Header, die schlecht umgesetzt sind. Im Theme-Code nach position: sticky oder position: fixed suchen und prüfen, ob Platz reserviert ist. Auch Shopify-Apps können CLS-Probleme verursachen – z.B. Bewertungs-Apps, die einen Block unten einfügen, nachdem der Rest geladen ist.
WooCommerce: Widgets in der Sidebar sind oft CLS-Killer. Wenn ein Widget langsam lädt, verschiebt es den Produkttext. Lösung: Entweder Platz reservieren (CSS min-height) oder Widget asynchron laden.
4. Server Response Time (TTFB) reduzieren: Das Fundament
LCP, INP und CLS sind die Google-Metriken. Aber TTFB (Time to First Byte) ist das Fundament. Wenn der Server langsam antwortet, nützen alle anderen Optimierungen wenig.
TTFB sollte unter 600 ms sein. Viele Shops liegen bei 1–2 Sekunden. Das ist oft nicht die Schuld des Shops, sondern des Hosting-Anbieters.
Konkrete Maßnahmen:
- Hosting prüfen: Shared Hosting (oft unter 5 Euro/Monat) ist für E-Commerce nicht geeignet. Wechsel zu Managed Hosting (Kinsta, WP Engine für WordPress, Shopify ist hier besser). Kosten: 30–100 Euro/Monat, aber 50 % schneller TTFB.
- Caching aktivieren: Browser-Cache (Bilder, CSS, JS lokal speichern) und Server-Cache (HTML-Seiten cachen). WooCommerce: WP Super Cache oder LiteSpeed. Shopify: Das ist standard.
- CDN nutzen: Cloudflare oder Bunny CDN verteilen Inhalte global. Wenn ein Kunde in München ist, bekommt er Inhalte von einem Server in München, nicht aus den USA. TTFB sinkt um 40–60 %.
- Datenbank optimieren: Bei WooCommerce können alte Revisionen, Spam-Kommentare und Transients die Datenbank aufblähen. Plugins wie WP-Optimize räumen auf.
5. Shop-spezifische Optimierungen: Produktseiten und Kategorien
Produktseiten sind komplexer als normale Blog-Posts. Sie haben Galerien, Varianten, Bewertungen, Related Products. Jedes Element kann Performance kosten.
Bildergalerien: Ein Produkt mit 20 Bildern ist normal. Aber 20 Bilder beim Load zu laden ist nicht normal. Lösung: Nur das erste Bild laden, Rest mit Lazy Loading. Für Zoom-Funktionen: Nicht das 4K-Bild laden, sondern ein 1200 × 1200 Bild mit Zoom-Effekt (CSS, nicht JavaScript).
Varianten und Optionen: Wenn ein Produkt 50 Varianten hat, sollte nicht jede Variante als separater Button geladen werden. Stattdessen: Dropdown oder dynamisches Laden. In Shopify: Liquid-Templates optimieren, nicht zu viele include statements. In WooCommerce: AJAX-basierte Varianten-Wechsel sind schneller als Seitenneuladen.
Bewertungen und Kommentare: Diese sollten lazy-loaded werden. Nicht alle 500 Bewertungen beim Load laden, sondern nur 5, Rest on-demand. Das ist ein großer Performance-Gewinn.
Related Products: Oft werden 20–30 Related Products geladen. Das ist unnötig. 4–8 reichen aus und sind schneller.
Kategorieseiten sind ähnlich problematisch. Eine Kategorie mit 200 Produkten sollte mit Pagination oder Infinite Scroll arbeiten, nicht alle 200 beim Load laden.
6. Testing und Monitoring: Messen, nicht raten
Optimierungen blind durchzuführen ist Zeitverschwendung. Google PageSpeed Insights ist ein Anfang, aber nicht ausreichend. Hier sind die richtigen Tools:
- Google PageSpeed Insights: Kostenlos, gut für Überblick. Aber: Simulated auf einem Pixel 4 Telefon mit 4G. Real-World-Daten sind anders.
- Google Search Console: Zeigt Core Web Vitals für echte Nutzer. Das ist die Wahrheit. Wenn die Metriken dort rot sind, ist Handeln nötig.
- WebPageTest: Detaillierte Wasserfall-Diagramme. Hier sieht man, welche Ressourcen wie lange laden. Sehr hilfreich für tiefe Optimierung.
- Lighthouse CI: Automatisiertes Testing in der Entwicklung. Jede neue Version wird getestet, bevor sie live geht.
- Real User Monitoring (RUM): Tools wie Sentry oder New Relic tracken echte Nutzer. Das zeigt, wo echte Probleme sind, nicht nur Labordaten.
Wichtig: Metriken sollten täglich gecheckt werden. Ein Dashboard mit Google Search Console Daten ist ideal. Wenn INP plötzlich auf 800 ms springt, ist etwas Neues kaputt – vielleicht eine neue App oder ein Plugin-Update.
7. Häufige Fehler und wie man sie vermeidet
Nach Jahren in SEO-Projekten sehe ich immer wieder dieselben Fehler:
Fehler 1: Zu viele Optimierungen gleichzeitig. Ein Shop-Betreiber optimiert Bilder, deaktiviert 10 Plugins und wechselt das CDN – alles auf einmal. Dann weiß er nicht, was geholfen hat. Besser: Eine Maßnahme pro Woche, messen, dann die nächste.
Fehler 2: Entwickler-Fokus statt Nutzer-Fokus. "Wir haben LCP auf 1,8 Sekunden optimiert" ist toll – aber wenn die Conversion Rate nicht steigt, war es umsonst. Immer messen: Steigen Conversions? Sinkt die Absprungrate? Das ist die echte Metrik.
Fehler 3: Shopify-Theme-Probleme ignorieren. Viele Shopify-Themes sind nicht optimiert. Ein Wechsel zu einem schnelleren Theme (z.B. Dawn, das Shopify-Standard-Theme) kann 30 % Performance bringen. Das ist oft schneller als einzelne Optimierungen.
Fehler 4: WooCommerce-Plugin-Bloat. Ein Shop mit 30 Plugins ist nicht selten. Jedes Plugin ist eine Sicherheits- und Performance-Risiko. Regelmäßig prüfen: Welche Plugins sind wirklich nötig? Welche können deaktiviert werden?
Fehler 5: Mobile-Optimierung ignorieren. Google misst Core Web Vitals auf Mobile. Ein Shop, der auf Desktop schnell ist, kann auf Mobile langsam sein. Immer beide testen.
Bonus: Automatisierung und Langzeitstrategie
Einmalige Optimierung ist nicht genug. 2026 werden Google und andere Browser-Hersteller noch strengere Standards setzen. Eine Langzeitstrategie ist nötig:
Automatisiertes Monitoring: Ein einfaches Skript, das täglich Google PageSpeed Insights aufruft und die Ergebnisse in ein Spreadsheet schreibt. Dann sieht man Trends. Wenn LCP steigt, ist etwas kaputt.
Performance-Budget: Definieren: "Unsere Homepage darf nicht über 2,5 MB groß sein." Jeder Pull Request wird gegen dieses Budget geprüft. Das verhindert, dass Performance wieder sinkt.
Team-Training: Entwickler, Designer, Shop-Manager sollten verstehen, wie ihre Entscheidungen Performance beeinflussen. Ein Designer, der 10 MB Bilder hochlädt, braucht Feedback. Das ist nicht böse gemeint – das ist Wissenstransfer.
Regelmäßige Audits: Alle 3 Monate sollte ein Performance-Audit stattfinden. Nicht nur Metriken, sondern auch: Welche neuen Plugins wurden installiert? Hat sich das Theme geändert? Welche neuen Integrationen gibt es? Jede Änderung kann Performance kosten.
Die Shops, die 2026 erfolgreich sind, werden nicht die sein, die einmal optimiert haben. Es werden die sein, die Performance als kontinuierliche Aufgabe verstehen – wie SEO selbst.
Kommentare (3 Kommentare)