Core Web Vitals entwickelten sich zwischen 2021 und 2024 von einem „wichtigen Signal“ zu einem Rankingfaktor. In 2026 verliert ein E-Commerce-Shop mit schlechten Core Web Vitals sowohl organischen Traffic (SEO) als auch Conversion (Besucher, die aufgeben, weil die Seite zu langsam ist). Dieser Leitfaden behandelt die drei aktuellen Metriken, wie man sie misst und die konkreten Hebel, um sie auf PrestaShop und WooCommerce in den grünen Bereich zu bringen.
Die 3 Core Web Vitals-Metriken in 2026
Google hat sein Vitals-Set über die Jahre verfeinert. Ab 2026 sind drei Metriken entscheidend:
- LCP (Largest Contentful Paint) — Zeit bis zur Darstellung des größten sichtbaren Elements. Zielwert: unter 2,5 Sekunden. Über 4 Sekunden sind Sie im „schlechten“ Bereich.
- CLS (Cumulative Layout Shift) — visuelle Stabilität beim Laden. Zielwert: unter 0,1. Über 0,25 springt die Seite zu stark.
- INP (Interaction to Next Paint) — Reaktionszeit auf Nutzerinteraktionen. Zielwert: unter 200 ms. INP ersetzte FID im März 2024.
Wichtiger Hinweis: Google misst diese Metriken bei echten Nutzern (CrUX-Felddaten), nicht im Labor. Ein simulierter PageSpeed-Test gibt eine Indikation, aber der für SEO relevante Score basiert auf den echten Besuchen der letzten 28 Tage.
Wie man Core Web Vitals misst
Drei kostenlose Tools für den Einstieg:
PageSpeed Insights
Kostenloses Google-Tool unter pagespeed.web.dev. Testet eine Seite und zeigt sowohl Labordaten als auch Felddaten (echte Nutzer) an, sofern verfügbar. Granulare Optimierungsvorschläge. Praktisch für die Schnellprüfung einer bestimmten Seite.
Search Console — Core Web Vitals-Bericht
In der Google Search Console aggregiert der Bericht Nutzererfahrung > Core Web Vitals Felddaten für jede von Google gecrawlte Seite. Identifiziert „URL-Gruppen“ mit ähnlichen Problemen. Die erste Anlaufstelle, um den tatsächlichen Zustand Ihrer Website zu prüfen.
Web Vitals JavaScript-Bibliothek
Für kontinuierliches Monitoring erlaubt die web-vitals-Bibliothek (Google), die Core Web Vitals Ihrer echten Nutzer an Google Analytics 4 zu senden. In 5 Minuten installiert, RUM-Daten (Real User Monitoring) in Ihrem GA4 abrufbar. Unverzichtbar für eine seriöse Website.
LCP optimieren (Largest Contentful Paint)
Das LCP ist bei einem E-Commerce-Shop fast immer ein Bild: der Homepage-Hero, das Hauptproduktfoto oder das erste Banner einer Kategorieseite. Fünf Gewinner-Hebel:
1. Bilder in WebP/AVIF konvertieren
WebP spart bei gleicher Qualität 25-35 % Dateigröße, AVIF geht noch weiter (-50 %). Beide Formate werden von jedem modernen Browser unterstützt (95%+). Nutzen Sie ImageMagick, Squoosh oder ein dediziertes Modul für die Batch-Konvertierung Ihrer Bibliothek.
2. Bilder korrekt dimensionieren
Ein Bild, das bei 800×600 px angezeigt wird, muss nicht 2400×1800 px wiegen. Generieren Sie mehrere Größen über srcset und sizes-Attribute – der Browser wählt automatisch die richtige aus.
3. Lazy Loading außer für das LCP
Lazy Loading (loading="lazy") verzögert das Laden von Bildern außerhalb des sichtbaren Bereichs. Kritische Regel: Das LCP-Bild niemals lazy-loaden. Das erste Bild der Startseite und das Hauptproduktfoto haben immer loading="eager" + fetchpriority="high".
4. Das LCP-Bild vorladen
Fügen Sie <link rel="preload" as="image" href="hero.webp" fetchpriority="high"> im Seitenheader ein. Der Browser beginnt den Download parallel zum HTML, Gewinn von 200-500 ms beim LCP.
5. Kritisches CSS inline einbetten
Das CSS, das für die Darstellung des sichtbaren Bereichs benötigt wird, sollte direkt in den <head> eingebettet werden, nicht über eine externe Datei geladen. Das übrige CSS lädt asynchron. Tools zur Generierung von Critical CSS (Penthouse, Critical, dediziertes PrestaShop-Modul) automatisieren das.
CLS optimieren (Cumulative Layout Shift)
Der CLS misst visuelle Sprünge beim Laden. Die fünf häufigsten Ursachen:
1. Bilder ohne angegebene Dimensionen
Geben Sie stets width und height-Attribute bei Ihren <img>-Tags an. Der Browser reserviert den richtigen Platz, bevor das Bild ankommt – kein Sprung.
2. Webfonts, die spät geladen werden
Webfonts (Google Fonts, Adobe Fonts) verursachen „FOUT“ (Flash of Unstyled Text) – die Seite rendert zunächst mit dem Systemfont und springt dann, wenn der Webfont lädt. Lösung: font-display: swap + preload für den Hauptfont.
3. Lazy-geladene Werbeanzeigen
Anzeigenplatzierungen, die nach dem Seitenrendering erscheinen, schieben bestehenden Inhalt. Reservieren Sie vorab Platz mit einem Container mit fester Höhe.
4. Cookie-Banner, die Inhalte verschieben
Ein Anti-Pattern: Ein Cookie-Banner, der nach 500 ms oben auf der Seite erscheint und alles nach unten schiebt. Entweder erscheint er als position: fixed-Overlay, oder er wird von Anfang an auf der Seite reserviert.
5. Buttons, die die Größe verändern
„In den Warenkorb“-Buttons, die ihre Größe ändern, wenn ihr Text geladen wird (Übersetzung, dynamischer Preis), verursachen CLS. Reservieren Sie eine feste Mindestgröße mit min-width und min-height.
INP optimieren (Interaction to Next Paint)
Der INP misst, wie schnell Ihre Website auf einen Klick, Tap oder Tastendruck reagiert. Häufigste Ursachen für einen schlechten INP:
1. Schweres oder unoptimiertes JavaScript
JavaScript, das den Main Thread für mehr als 50 ms blockiert, verschlechtert den INP. Lösung: JS in kleinere Chunks aufteilen, nicht-kritisches Laden verzögern, async und defer verwenden.
2. Drittanbieter-Skripte
Google Analytics, Facebook Pixel, Chat-Widgets, A/B-Testing-Tools – jedes Skript kostet INP. Verzögern Sie sie mit dem Tag Manager und laden Sie sie nach Möglichkeit nur bei Nutzerinteraktion.
3. Schweres DOM
Eine Seite mit 3000+ DOM-Elementen hat Mühe, schnell zu reagieren. Verschachtelung reduzieren, Virtualisierung für lange Listen verwenden (Suchergebnisse, große Kataloge).
PrestaShop-spezifische Optimierungen
PrestaShop hat bekannte Schwächen bei Core Web Vitals: schweres Standard-Theme, jQuery überall, manchmal schlecht gecacht. Konkrete Maßnahmen:
- Smarty-Cache und CCC (Combine, Compress, Cache) unter Erweiterte Parameter → Performance aktivieren
- Auf ein modernes Theme wechseln (Hummingbird, Warehouse, Wojo), das Core-Web-Vitals-optimiert ist
- Einen Critical-CSS-Generator installieren
- Alle Bilder per dediziertem Modul in WebP konvertieren
- OPcache und Redis auf Ihrem Server aktivieren
WordPress / WooCommerce-spezifische Optimierungen
WooCommerce hat die gleichen Probleme, verstärkt durch die jQuery-Abhängigkeit. Best Practices:
- Ein seriöses Cache-Plugin installieren: WP Rocket, LiteSpeed Cache oder W3 Total Cache
- WebP/AVIF-Konvertierungs-Plugin
- Image-CDN (Cloudflare R2, Bunny CDN, KeyCDN)
- Unbenutzte Plugins deaktivieren (jedes Plugin = geladenes JS/CSS)
- Zu einem „modernen“ Theme auf Gutenberg-Block-Basis wechseln statt einem schweren Page Builder
Häufige Fehler, die Sie vermeiden sollten
- Für den Lab-Score optimieren, nicht den Field-Score. PageSpeed 95 im Simulator bedeutet nichts, wenn echte Nutzer auf langsamem 4G 50 bekommen.
- Mobile vergessen. Googles Core Web Vitals schauen primär auf den Mobile-Score, nicht Desktop.
- Visuelle Qualität opfern. Bilder auf 30 % WebP-Qualität zu komprimieren spart Bytes, ruiniert aber das Erlebnis.
- Optimierungs-Plugins stapeln. Drei aktive Caching-Plugins gleichzeitig = Chaos. Ein seriöses Plugin, gut konfiguriert.
Weiterführende Ressourcen
Die Optimierung der Core Web Vitals ist iterative Arbeit. Entdecken Sie unsere Kategorie Performance & Core Web Vitals für monatliche Vertiefungen. Für dedizierte Module zu Critical CSS, Bildkonvertierung und globaler Performance-Optimierung besuchen Sie unsere Kategorien PrestaShop-Module und WordPress SEO & Performance.