Core Web Vitals für E-Commerce-Katalogseiten

Katalogseiten in E-Commerce-Shops, also Kategorieseiten, Suchergebnisseiten und Produktlisten, haben ein besonderes Core-Web-Vitals-Problem, das bei einfacheren Seitentypen nicht auftaucht. Sie rendern viele Bilder, viele Produktkarten und oft dynamische Filter, und sie müssen bei Largest Contentful Paint, Interaction to Next Paint und Cumulative Layout Shift gleichzeitig gut abschneiden. Dieser Artikel zeigt den konkreten Core-Web-Vitals-Ablauf für Katalogseiten.

Warum Katalogseiten besonders schwierig sind

Ein Blogartikel hat ein zentrales Inhaltselement. Eine Katalogseite hat 20 bis 50 Produktkarten, jeweils mit Bild, Preis, Call-to-Action und manchmal interaktiven Elementen wie Schnellansicht oder „In den Warenkorb“. Jede Karte kann eine Layoutverschiebung auslösen und trägt zum Gesamtgewicht der Seite bei. Die Seite kann auf Ebene der einzelnen Assets technisch optimiert sein und trotzdem bei den Core Web Vitals durchfallen, weil die Summe vieler Elemente die Schwellenwerte überschreitet. Eine Website-Analyse kann helfen, diese Probleme zu finden.

Largest Contentful Paint auf Katalogseiten

Der LCP ist auf Katalogseiten meist die erste Reihe der Produktbilder (oberhalb des Falzes). Drei Maßnahmen helfen am meisten. Erstens: Laden Sie die erste Reihe der Produktbilder ausdrücklich vor (Preload), denn der Browser weiß ohne Hilfe nicht, welche Bilder oberhalb des Falzes liegen. Zweitens: Liefern Sie Produktbilder in modernen Formaten (WebP, AVIF) in der dargestellten Größe aus, nicht in der Originalgröße. Drittens: Stellen Sie sicher, dass das Hauptbild der Kategorie (falls vorhanden) das LCP-Element ist und konsequent optimiert wird. Mehr zur Bildoptimierung finden Sie in unserem Leitfaden Technical SEO Fixes for JavaScript-Heavy and Headless Sites.

Cumulative Layout Shift auf Katalogseiten

CLS ist der häufigste Core-Web-Vitals-Fehler auf Katalogseiten. Die Ursachen sind meist: Produktbilder, die ohne Größenangaben im HTML laden (die Seite wird neu aufgebaut, sobald ein Bild eintrifft), Filter, die nach dem ersten Rendern oberhalb des Produktrasters eingefügt werden, sowie Anzeigen oder Empfehlungs-Widgets, die spät erscheinen und Inhalte nach unten schieben. Für jede Ursache gibt es eine bekannte Lösung: Bildgrößen im HTML angeben, Filter serverseitig rendern, Platz für spät ladende Widgets reservieren. Mehr zu CLS lesen Sie in unserem Artikel Lighthouse Audit: A Step-by-Step Guide.

Interaction to Next Paint auf Katalogseiten

INP ist der neuere Core Web Vital, der First Input Delay abgelöst hat. Auf Katalogseiten fällt er meist durch, wenn Filter-Interaktionen eine lange Task auslösen. Das Sortieren nach Preis löst eine JavaScript-Ausführung von 500 ms aus. Das Umschalten eines Filters löst ein Neurendern von 300 ms aus. Einzeln fühlt sich das in Ordnung an, zusammen überschreiten diese Zeiten die INP-Schwellenwerte. Die Lösung: lange Tasks in kleinere Abschnitte zerlegen und für aufwendige Berechnungen Web Worker einsetzen.

Lazy Loading oder Preloading

Der Standardrat „alles per Lazy Loading laden“ ist für Inhalte oberhalb des Falzes auf Katalogseiten falsch. Wer die erste Reihe der Produktbilder per Lazy Loading lädt, verzögert den LCP. Richtig ist, die erste Reihe sofort zu laden (oder loading="eager", wenn Sie es ausdrücklich angeben wollen) und alles unterhalb des Falzes per Lazy Loading nachzuladen. Die meisten E-Commerce-Plattformen machen das standardmäßig falsch. Um die Performance Ihrer Website zu verbessern, können Sie ein Website-Audit-Tool einsetzen, das Verbesserungspotenzial aufzeigt.

Skripte von Drittanbietern auf Katalogseiten

Auf Katalogseiten sammeln sich tendenziell Skripte von Drittanbietern an: Analytics, A/B-Tests, Personalisierung, Chat-Widgets, Marketing-Pixel. Jedes davon erhöht die Total Blocking Time. Prüfen Sie die Skripte auf einer Katalogseite und finden Sie heraus, welche erst nach dem Hauptinhalt geladen werden können. Die meisten Marketing-Pixel lassen sich verzögern, ohne dass Funktionen verloren gehen.

Paginierung oder Infinite Scroll

Paginierung lässt sich für die Core Web Vitals leichter optimieren als Infinite Scroll. Die Paginierung lädt jeweils eine begrenzte Seite, Infinite Scroll fügt laufend neue Inhalte ein, was sich gerade für CLS schwerer optimieren lässt. Wenn Ihre Katalogseiten Infinite Scroll nutzen und beim CLS durchfallen, sollten Sie als Performance-Maßnahme den Wechsel zur Paginierung erwägen.

CDN-Konfiguration

Produktbilder kommen auf den meisten E-Commerce-Plattformen von einem CDN. Die Bildtransformations-Einstellungen des CDN sind wichtig: automatische Formatkonvertierung, automatische Größenoptimierung und Edge-Caching beeinflussen alle die Performance der Katalogseiten. Prüfen Sie die CDN-Konfiguration gezielt für die Domain der Produktbilder.

Serverseitiges oder clientseitiges Filtern

Clientseitiges Filtern (JavaScript blendet Produkte beim Ändern der Filter ein und aus) ist für Nutzer schnell, bringt aber keinen SEO-Wert, weil Filterkombinationen nicht als eigene Seiten crawlbar sind. Serverseitiges Filtern (jede Filterkombination hat eine eigene URL) schafft mehr SEO-Möglichkeiten, lädt aber langsamer. Hybride Ansätze, die serverseitig starten und clientseitig aktualisieren, bieten beides, sind aber schwerer korrekt umzusetzen.

Das Performance-Budget

Legen Sie ein Performance-Budget speziell für Katalogseiten fest: LCP unter 2,5 Sekunden, CLS unter 0,1, INP unter 200 ms. Bauen Sie das Budget in die Deployment-Pipeline ein, sodass ein fehlgeschlagener Lighthouse-Test den Build scheitern lässt. So fallen Verschlechterungen auf, bevor sie live gehen.

Laufendes Monitoring

Ein Site-Auditor, der die Core Web Vitals pro Seite über die Zeit verfolgt, erkennt Verschlechterungen genau auf den Seiten, auf die es ankommt. UtilitySEO und ähnliche Tools erledigen das automatisch. Entscheidend ist die Benachrichtigung bei Verschlechterungen, gerade bei E-Commerce-Shops, wo die Core Web Vitals die Conversion-Rate direkt beeinflussen.

Die Arbeit an den Core Web Vitals auf Katalogseiten gehört zu den Performance-Investitionen mit dem höchsten ROI für jeden E-Commerce-Shop. Der kombinierte Effekt auf Conversion, Ranking und Crawl-Effizienz macht den Aufwand lohnend, und die oben genannten Muster decken die meisten tatsächlich nötigen Korrekturen ab.