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.