Core Web Vitals für E-Commerce: So beheben Sie LCP, INP und CLS in Ihrem Shop

Core Web Vitals sind Googles Methode, um zu messen, wie sich eine Seite für echte Nutzer anfühlt. Für Online-Shops sind sie doppelt wichtig: Sie sind Teil von Googles Seiten-Erlebnis-Signalen und, noch wichtiger, langsame und ruckelige Seiten verlieren Verkäufe.

Die gute Nachricht: Auf E-Commerce-Websites verursachen die gleichen wenigen Probleme die meisten Ausfälle. Dieser Leitfaden erklärt jede Kennzahl in Bezug auf den Shop und zeigt, wie man sie behebt.

Die drei Kennzahlen und ihre Ziele

Metrik	Was es misst	„Guter“ Schwellenwert
LCP – Größte inhaltliche Darstellung	Wie schnell der Hauptinhalt (oft das Produktbild oder das Hero-Banner) erscheint	≤ 2,5 s
INP – Interaktion bis zur nächsten Darstellung	Wie schnell die Seite auf Taps und Klicks reagiert	≤ 200 ms
CLS – Kumulativer Layout-Verschiebung	Wie stark das Layout beim Laden springt	≤ 0.1

Google bewertet diese im 75. Perzentil der echten Besuche. Das bedeutet, dass drei von vier Besuchern eine gute Erfahrung benötigen, nicht nur deinen schnellen Bürocomputer.

INP ersetzte die First Input Delay (FID) als Core Web Vital im März 2024. Viele Shops, die unter FID bestanden, fallen jetzt unter INP durch, da INP jede Interaktion misst, nicht nur die erste.

Wo Sie Ihre echten Daten finden können

• Google Search Console → Core Web Vitals-Bericht: Gruppen von URLs mit Problemen, basierend auf echten Chrome-Nutzern
• PageSpeed Insights: Felddaten für eine einzelne URL sowie Labordiagnosen
• CrUX-Dashboard: Verlauf über die Zeit
• Ihr eigenes echtes Benutzer-Monitoring (RUM): die web-vitals JavaScript-Bibliothek kann Daten an GA4 oder ein anderes Tool senden

Verwenden Sie Labortools (Lighthouse), um Ursachen zu finden, aber bewerten Sie den Erfolg mit Felddaten.

Behebung von LCP auf Produkt- und Kategorieseiten

Auf einer Produktseite ist das LCP-Element normalerweise das Hauptproduktbild. Auf Kategorieseiten ist es oft ein Banner oder die ersten Produktbilder.

Häufige Ursachen:

• Das Hauptbild wird lazy-loaded.
• Das Bild ist zu groß oder in einem alten Format.
• Das Bild wird von JavaScript (Slidern und Galerien) geladen.
• Langsame Serverantwort (hohe TTFB)
• Render-blockierende CSS und Schriftarten

Fehlerbehebungen:

1. LCP-Bild niemals lazy-loaden. Verwenden Sie loading="eager" und fetchpriority="high" dafür.
2. WebP oder AVIF bereitstellen mit korrektem srcset und sizes.
3. Rendern Sie das erste Galerie-Bild in reinem HTML, dann übernehmen Sie den Slider.
4. TTFB mit vollständiger Seitenzwischenspeicherung beheben (Varnish, ein CDN oder der Cache Ihrer Plattform).
5. Laden Sie die Haupt-Webschrift vor oder verwenden Sie font-display: swap.

Fixing INP: das JavaScript-Problem

INP-Probleme entstehen fast immer durch zu viel JavaScript, das im Haupt-Thread ausgeführt wird.

Häufige Ursachen in Geschäften:

• Schwere Themen (zum Beispiel Magento Luma, aufgeblähte WordPress-Seitenbauer)
• Viele Tag-Manager-Skripte: Analytik, Anzeigen-Pixel, Heatmaps, Chat-Widgets, A/B-Tests
• Produktoptionsauswähler und Filter, die die gesamte Seite neu rendern
• Große Drittanbieter-Bewertungs- und Empfehlungs-Widgets

Fehlerbehebungen:

1. Überprüfen Sie Ihren Tag-Manager. Entfernen Sie Tags, die niemand verwendet. Laden Sie nicht kritische Tags nach Benutzerinteraktion oder im Leerlauf.
2. Verzögerung von Chat-Widgets, bis der Benutzer scrollt oder auf eine Chat-Schaltfläche klickt.
3. Teilen Sie lange Aufgaben auf. Entwickler können den Haupt-Thread freigeben, damit Klicks schneller verarbeitet werden.
4. Wählen Sie ein leichteres Frontend, wenn das Thema selbst das Problem ist. Bei Magento ist der Wechsel zu Hyvä oft der größte INP-Vorteil. Siehe meinen Luma zu Hyvä Migrationsleitfaden.

CLS beheben: Verhindern, dass die Seite springt

Häufige Ursachen:

• Bilder ohne Breite und Höhe
• Cookie-Banner und Promo-Leisten, die Inhalte nach unten schieben
• Schriftarten wechseln und Textgröße ändern
• Spät ladende Bewertungssterne, Abzeichen oder „Das könnte Ihnen auch gefallen“ Blöcke

Fehlerbehebungen:

1. Setzen Sie immer width und height (oder aspect-ratio) bei Bildern.
2. Zeigen Sie Cookie-Banner als Overlays an, nicht indem Sie die Seite verschieben.
3. Reservieren Sie Platz für dynamische Blöcke mit einer Mindesthöhe.
4. Verwenden Sie Schriftarten-Fallbacks mit übereinstimmenden Metriken.

Nach Vorlage priorisieren, nicht nach URL

Ein Shop kann Tausende von URLs haben, aber nur wenige Vorlagen: Startseite, Kategorie, Produkt, Suche, Warenkorb, CMS. Wenn Sie die Vorlage reparieren, reparieren Sie jede URL, die sie verwendet. Beginnen Sie mit der Vorlage, die den meisten organischen Traffic erhält, normalerweise Kategorie- oder Produktseiten.

Wie Core Web Vitals mit Umsatz verbunden sind

Geschwindigkeit ist nicht nur ein SEO-Thema. Schnellere Seiten bedeuten im Allgemeinen mehr aufgerufene Seiten und weniger abgebrochene Sitzungen. Um es für Ihren eigenen Shop zu beweisen, vergleichen Sie die Konversionsrate und die Absprungrate nach Gerät und nach Seitenladegeschwindigkeit in Ihrer Analyse vor und nach der Arbeit.

Häufig gestellte Fragen

Beeinflussen Core Web Vitals direkt die Rankings?

Sie sind Teil von Googles Page Experience-Signalen. Die Relevanz des Inhalts ist wichtiger, aber wenn die Wettbewerber nah beieinander liegen, hilft eine bessere Erfahrung, und sie hilft immer bei der Conversion.

Warum zeigt PageSpeed Insights jedes Mal eine andere Punktzahl an?

Der Laborwert ist eine Simulation und variiert. Die Felddaten oben (von echten Nutzern) sind das, was Google für die Core Web Vitals verwendet.

Wie lange dauert es, bis die Search Console Verbesserungen anzeigt?

Felddaten basieren auf einem rollierenden 28-Tage-Zeitraum, daher erwarten Sie etwa vier Wochen nach einer Behebung, bevor der Bericht dies vollständig widerspiegelt.

Möchten Sie, dass Ihr Shop die Core Web Vitals besteht?

Ich überprüfe und behebe die Core Web Vitals auf Magento-, WooCommerce- und Shopify-Shops, von LCP-Bildern bis zur Bereinigung des Tag-Managers. Siehe meinen technischen SEO-Service oder fordere ein Audit an.