Core Web Vitals für E-Commerce: Lösungen für LCP, INP und CLS
Langsame Produktseiten kosten Conversions. Hier ist, was LCP, INP und CLS für Online-Shops tatsächlich bedeuten — und die wirkungsvollsten Maßnahmen für jede Metrik.
Sie haben PageSpeed Insights auf Ihrer Produktseite ausgeführt. Drei rote Anzeigen starren Sie an. Der Score ist 41. Die Seite lädt auch auf Ihrem Testtelefon langsam, aber Sie sind sich nicht sicher, welche der drei Metriken Ihnen tatsächlich Umsätze kostet — oder welche Sie zuerst beheben sollten.
Core Web Vitals sind die drei Lade- und Interaktionsmetriken, die Google für jede Site veröffentlicht. Sie beeinflussen das Ranking am Rand. Die Conversion beeinflussen sie sehr viel stärker. Für einen Online-Shop, in dem jede Sekunde Verzögerung Vertrauen vom Kaufbutton abkratzt, rechtfertigt allein der Conversion-Effekt das Beheben, noch bevor man SEO berücksichtigt.
Die drei Metriken, kurz erklärt
- LCP (Largest Contentful Paint) misst, wie lange es dauert, bis das größte sichtbare Element fertig geladen ist — meist Ihr Hero-Produktbild. Gut: unter 2,5 Sekunden. Schlecht: über 4 Sekunden.
- INP (Interaction to Next Paint) misst, wie reaktionsschnell Ihre Seite auf Tipps und Klicks wirkt. Es hat im März 2024 FID abgelöst. Gut: unter 200 ms. Schlecht: über 500 ms.
- CLS (Cumulative Layout Shift) misst, wie stark Elemente beim Laden der Seite herumspringen. Gut: unter 0,1. Schlecht: über 0,25.
Der web.dev-Leitfaden zu Core Web Vitals von Google deckt die formalen Definitionen ab; der Rest dieses Artikels konzentriert sich darauf, was man in einem echten Shop dagegen tun kann.
Warum es E-Commerce stärker trifft als Blogs
Ein Blogbeitrag ist Text, vielleicht ein Hero-Bild, vielleicht ein Embed. Eine Produktseite ist ein Hero-Bild, eine Thumbnail-Galerie, ein Review-Widget, ein Empfehlungs-Karussell, eine Chat-Bubble, ein Upsell-Popup, eine Cart-Drawer, Analytics für drei Plattformen, ein Heatmap-Recorder und ein A/B-Test-Framework. Jedes davon liefert JavaScript aus. Jedes davon konkurriert um den Main Thread.
Ein typischer Shopify-Storefront im Jahr 2026 liefert irgendeine Kombination aus:
- Klaviyo (E-Mail-Erfassung, Popups)
- Privy oder OptinMonster (Exit-Intent)
- Smile.io oder Loyalty Lion (Reward-Widget)
- Yotpo oder Judge.me (Bewertungen)
- Tidio oder Gorgias (Chat)
- Hotjar oder Microsoft Clarity (Session-Recording)
- GA4, Meta Pixel, TikTok Pixel (Analytics)
Jedes davon fühlt sich beim Installieren kostenlos an. Keines davon ist kostenlos. Die Kosten zeigen sich zuerst beim INP, dann beim LCP und dann in Ihrer Conversion-Rate.
LCP-Lösungen für Produktseiten
LCP ist auf einer Produktseite fast immer das Hero-Bild. Drei Änderungen in der Reihenfolge ihrer Wirkung:
1. Liefern Sie das richtige Format und die richtige Größe aus. Ein 4000×4000-PNG direkt vom Produktfotografen ist 6 MB groß. Dasselbe Bild als korrekt dimensioniertes WebP oder AVIF in den tatsächlich gerenderten Abmessungen liegt oft unter 150 KB. Sowohl Shopify als auch WooCommerce erledigen das, wenn Sie aufhören, deren Resizing zu überschreiben.
2. Preloaden Sie das Hero-Bild. Fügen Sie einen Preload-Hinweis im <head> hinzu, damit der Browser es abruft, bevor der Rest der Seite geparst wird:
<link rel="preload" as="image"
href="/products/wallet-hero.webp"
imagesrcset="/products/wallet-hero-400.webp 400w,
/products/wallet-hero-800.webp 800w,
/products/wallet-hero-1200.webp 1200w"
imagesizes="(max-width: 768px) 100vw, 50vw">
3. Bilder above-the-fold nicht lazy-loaden. loading="lazy" auf Ihrem Hero ist der mit Abstand häufigste LCP-Killer auf Produktseiten. Lazy-laden Sie Thumbnails und Galeriebilder unterhalb der Falz; niemals das erste sichtbare Bild.
Referenz: Optimize LCP auf web.dev.
INP-Lösungen für Produktseiten
Beim INP haben die meisten Shops die größten Schwierigkeiten. Das Muster ist konsistent: Die Seite sieht geladen aus, der Nutzer tippt auf "In den Warenkorb", und es gibt einen 600-ms-Freeze, bevor irgendetwas passiert. Dieser Freeze ist JavaScript, das auf dem Main Thread läuft.
1. Verschieben Sie unkritische Skripte. Fügen Sie defer hinzu oder laden Sie via async für alles, was nicht zum Rendern des Kaufbuttons benötigt wird. Bewertungs-Widgets, Chat-Bubbles, Empfehlungs-Engines — sie alle sollten geladen werden, nachdem die Seite interaktiv ist, nicht währenddessen.
2. Auditieren Sie Drittanbieter-Widgets schonungslos. Die meisten Shops tragen zwei Widgets, die denselben Job machen (zwei Analytics-Tools, zwei Popup-Anbieter). Wählen Sie eines. Entfernen Sie das andere. Jedes zusätzliche Widget summiert sich.
3. Ersetzen Sie schwere Bewertungs-Widgets durch serverseitig gerenderte Bewertungen. Ein Bewertungs-Widget, das clientseitig 500 Bewertungen ins DOM hydratisiert, ist einer der Top-3-INP-Übeltäter. Rendern Sie die aggregierte Bewertung und die obersten drei Bewertungen serverseitig; laden Sie die vollständige Bewertungsliste verzögert, wenn der Nutzer dorthin scrollt.
Für Shops auf Next.js-/React-Basis sind die React-Dokumente zur schweren Hydratisierung und Next.js' Streaming SSR die richtigen Tiefen, in die man eintauchen sollte.
CLS-Lösungen für Produktseiten
Layout Shift ist von den drei Metriken am günstigsten zu beheben und am peinlichsten, wenn man es kaputt lässt. Drei Änderungen:
1. Setzen Sie explizite Maße auf jedes Bild. Geben Sie immer width- und height-Attribute (oder CSS aspect-ratio) an, damit der Browser den Platz reserviert, bevor das Bild geladen ist:
<img src="/products/wallet.webp"
width="800" height="800"
alt="Hand-stitched leather wallet, front view">
2. Verwenden Sie font-display: swap mit Bedacht. Ein Flash of Unstyled Text verschiebt das Layout, wenn die Custom-Font geladen wird. Entweder Sie preloaden die Font oder verwenden font-display: optional, um späte Swaps zu verhindern.
3. Reservieren Sie Platz für Embeds. Bewertungs-Widgets, Empfehlungs-Karussells und Werbeflächen, die sich oberhalb bestehender Inhalte einfügen, verursachen kaskadierende Shifts. Wickeln Sie sie während des Ladens in einen Container mit fester Höhe.
Referenz: Optimize CLS.
Wie EshopAuditor diese aufdeckt
Der CWV-Score von EshopAuditor spiegelt die Performance Ihrer Startseite wider, gemessen von Google PageSpeed Insights sowohl in der Mobile- als auch in der Desktop-Strategie. Die übrigen gecrawlten Seiten werden auf HTML-Struktur, Schema, Metadaten und On-Page-SEO-Probleme hin analysiert — aber ohne einen Lighthouse-Lauf pro Seite. Lighthouse pro Seite ist rechnerisch teuer, wenn es im großen Stil ausgeführt wird; der Startseiten-CWV ist das aussagekräftige Signal für das typische seitenweite Performance-Profil.
Der Startseiten-CWV ist indikativ, nicht erschöpfend: Wenn Ihre Startseite langsam ist, sind Ihre Produktseiten fast immer langsamer (gleiches Theme, gleiche Widgets, gleiche Skript-Last). Für exakte CWV-Werte pro Seite über Ihren gesamten Katalog kombinieren Sie diesen Report mit der Core-Web-Vitals-Ansicht der Google Search Console, die echte CrUX-Felddaten über jede URL hinweg nutzt, für die Google Impressionen hat.
Die unbequeme Wahrheit über CWV und Ranking
Google war klar: Core Web Vitals sind ein Ranking-Signal, aber ein geringfügiges. Zwei Seiten mit vergleichbarer Inhaltsqualität werden bei einer Suchanfrage, bei der CWV nahe beieinander liegen, CWV als Tiebreaker wirken sehen. Das war's.
Worauf Core Web Vitals dramatisch wirken, ist die Conversion-Rate. Eine Verzögerung von 1 Sekunde beim LCP wirft Sie nicht von Seite 1 auf Seite 2 von Google. Aber sie schadet messbar der Checkout-Rate — und beim E-Commerce-Traffic stellt dieser Conversion-Einbruch jeden SEO-Vorteil oder -Nachteil in der Regel in den Schatten. Über ein Quartal Traffic hinweg zahlt das Delta Ihr Tooling, Ihre Anzeigenausgaben und Ihre Zeit mehrfach.
Beheben Sie Core Web Vitals, weil sie Ihren Shop profitabler machen, nicht weil Google es sagt. Der SEO-Gewinn ist ein Bonus.
Führen Sie einen kostenlosen Audit Ihres Shops auf eshopaudit.io durch — keine Anmeldung für den ersten Scan erforderlich.