Veröffentlicht: 24. Juni 2026
Nuvemshop (im spanischsprachigen Lateinamerika als Tiendanube bekannt) ist die führende E-Commerce-Plattform in der Region und unterstützt über 180.000 Onlineshops. Händler passen ihre Storefronts mit verschiedenen Designs und dynamischen Inhaltsanordnungen an. Es ist eine technische Herausforderung, dafür zu sorgen, dass die Seiten trotz dieser Vielfalt schnell geladen werden.
- Der Largest Contentful Paint (LCP)-Status verbesserte sich innerhalb eines Jahres um 68 %, von 57 % auf 96 %. Dies spiegelt eine wesentliche Veränderung bei der Darstellung von Inhalten im oberen Bereich des Darstellungsbereichs für echte Nutzer wider.
- Die Erfolgsquote bei den Core Web Vitals stieg von 48 % auf 72 %, was bedeutet, dass fast 3 von 4 Shops jetzt den grundlegenden Leistungsschwellenwert von Google erreichen.
- Messbare Verbesserung der Shopping-Interaktionen: Bei der Analyse derselben Kohorte brasilianischer Geschäfte, die im Januar 2025 und Januar 2026 aktiv waren, zeigten mobile Besucher aus der organischen Google-Suche Folgendes:
- 8,9 % höhere Conversion-Rate (Sitzung zu bezahlter Bestellung)
- 8,4 % höhere Interaktionsrate im Einkaufswagen (Sitzung zu Einkaufswagen)
- Die größten Verbesserungen wurden auf Mobilgeräten erzielt, was mit den Bereichen übereinstimmt, in denen die LCP-Verbesserungen am deutlichsten waren.
Diese Ergebnisse decken sich mit einer von Google in Auftrag gegebenen Deloitte-Studie (über 30 Millionen Sitzungen bei 37 Marken), die ergab, dass eine Verbesserung der Ladegeschwindigkeit um 0,1 Sekunden die Conversion-Raten im Einzelhandel um 8,4 % steigern kann. Das bestätigt die Richtung unserer Investitionen.
Die Herausforderung: LCP-Erkennung in dynamischen E-Commerce-Layouts
Anfang 2025 haben nur 48 % unserer Shops die Core Web Vitals-Grenzwerte eingehalten und 57 % hatten gute LCP-Werte. Unsere ursprüngliche Hypothese war, dass es an der Bildgröße oder der Serverlatenz liegt. Wir haben uns geirrt.
Durch die Analyse von PageSpeed Insights für Tausende von Shops haben wir festgestellt, dass Händler auf unserer Plattform die Bereiche der Startseite dynamisch anordnen können: Karussells, Banner, Produktraster und benutzerdefinierte Module können in beliebiger Reihenfolge angezeigt werden.
Diese Flexibilität führte zu einem unvorhergesehenen Problem: Das richtige Element wurde nicht immer als LCP identifiziert. In Geschäften mit Karussells, die 85 % unserer Schaufenster ausmachten, wurde manchmal ein Banner weiter unten im Darstellungsbereich als LCP markiert, anstatt des ersten Karussellbilds. Dies hing davon ab, wie die Seite auf verschiedenen Bildschirmen und Geräten gerendert wurde. Das bedeutete, dass unsere Optimierungsbemühungen nicht die beabsichtigte Wirkung hatten: Wir haben Elemente optimiert, die eigentlich keine LCP-Elemente waren.
Im Gegensatz zu typischen SaaS-Plattformen konnten wir nicht einfach die Startseite korrigieren. Wir brauchten eine Lösung, die mit allen möglichen Designkonfigurationen, Abschnittsanordnungen und Händleranpassungen funktioniert, ohne bestehende Shops zu beeinträchtigen oder die kreative Freiheit einzuschränken.
Auswirkungen dynamischer Layouts auf die Auswahl des LCP-Elements
Durch die Analyse mit PageSpeed Insights und das Monitoring echter Nutzer haben wir festgestellt, dass CSS-Übergänge bei Karussells und Bannern verzögert wurden, wenn Elemente für den LCP-Erkennungsalgorithmus des Browsers sichtbar wurden. Obwohl die Nutzer das Karussell als erstes geladenes Element wahrnahmen, markierte der Browser manchmal ein Banner im zweiten Abschnitt als LCP-Element, da die Sichtbarkeit dieses Elements nicht durch Übergangseffekte verzögert wurde.
Wir haben drei Ursachen identifiziert:
- CSS-Übergänge wurden verzögert, wenn Elemente als sichtbar eingestuft wurden, was dazu führte, dass die LCP-Erkennung auf den falschen Frame verschoben wurde.
- Lazy Loading wurde auf Bilder oben im Darstellungsbereich angewendet, die sofort geladen werden mussten.
- Da keine Prioritätssignale vorhanden waren, wurden die wichtigsten Bilder nicht zuerst geladen.
Außerdem haben wir festgestellt, dass ein erheblicher Teil der LCP-Messungen von Kategorie- und Produktseiten und nicht nur von Startseiten stammte. Das bedeutete, dass unsere Korrekturen auf allen Seitentypen mit hohem Traffic konsistent angewendet werden mussten.
Implementierung: Behebung der drei Hauptursachen im großen Maßstab
Nachdem die Ursachen identifiziert waren, waren die Korrekturen unkompliziert. Wir haben sie einheitlich auf alle Kernthemen und Seitentypen angewendet, aber für jeden Bereich war eine sorgfältige Planung erforderlich, um neue Probleme zu vermeiden.
- CSS-Übergänge für Abschnitte an erster Position wurden entfernt. Abschnitte, die zuerst auf der Seite erscheinen, werden jetzt sofort gerendert. So werden sie vom Browser ohne künstliche Verzögerungen als LCP-Kandidaten erkannt.
Lazy Loading für Bilder oben im Darstellungsbereich entfernt. Bei Bildern im ersten Abschnitt entfernen wir
loading="lazy"bedingt, um Verzögerungen beim Laden von Ressourcen zu vermeiden. Wir haben dies sorgfältig auf das erste Bild in Abschnitten an erster Position beschränkt:<!-- Before --> <img src="slide-1.webp" loading="lazy" al>t<="Featu>r<ed product" !-- After -- img src="s>lide-1.webp" alt="Featured product"Explizite Prioritätssignale hinzugefügt. Durch das Hinzufügen von
fetchpriority="high"teilen wir dem Preload-Scanner des Browsers mit, dass das LCP-Bild eine Ressource mit höchster Priorität ist. So kann es früher erkannt und heruntergeladen werden, bevor Layout und Rendering abgeschlossen sind. Wir haben eine Validierungslogik hinzugefügt, um sicherzustellen, dass Prioritätssignale nur dann angewendet werden, wenn sich das Element tatsächlich an einer Position befindet, an der es der LCP-Kandidat sein könnte: Das Hinzufügen vonfetchpriority="high"zu zu vielen Bildern wäre kontraproduktiv, da nichts mehr Priorität hat, wenn alles eine hohe Priorität hat.<!-- Before --> <img src="slide-1.webp" alt="Fe>a<tured produc>t<" !-- After -- img src="slide-1.webp" fetchpriority>="high" alt="Featured product"Geringere Latenz durch Edge-Caching. Caching ist effektiv, um Ladezeiten zu reduzieren, birgt im E-Commerce jedoch ein echtes Risiko: Die Bereitstellung veralteter Preis- und Inventardaten wirkt sich direkt auf das Vertrauen der Kunden und den Umsatz aus. Wir sind dabei vorsichtig vorgegangen und haben die Geschäftsmesswerte zusammen mit den Leistungsdaten im Blick behalten. So konnten wir die Cache-Trefferraten maximieren und gleichzeitig sicherstellen, dass wir keine Inhalte im Cache speichern, die sich negativ auf die Händler- oder Käufererfahrung auswirken könnten.
Auswirkungen und Ergebnisse: LCP-Verbesserung von 57 % auf 96 %
| Messwert (Januar 2025 bis Januar 2026) | Relative Verbesserung |
|---|---|
| LCP (gut) | +68 % (57 % bis 96 %) |
| Core Web Vitals (Bestehensquote) | +50 % (48 % bis 72 %) |
| Conversion-Rate (Sitzung zu bezahlter Bestellung) – Google Organic (mobil) | +8,9 % |
| Warenkorb-Interaktionen (Sitzung bis Warenkorb) – Google Suche (organisch, mobil) | +8,4 % |
Durch diese Verbesserungen wurden Nuvemshop und Tiendanube zur leistungsstärksten E-Commerce-Plattform in Brasilien, Argentinien und Mexiko.
Wichtige Erkenntnisse und Post-Mortem-Reflexionen
Aufgrund der hochgradig anpassbaren Architektur von Nuvemshop konnten wir uns nicht auf Standard-Optimierungs-Playbooks verlassen. Das eigentliche Problem war nicht die Bildgröße oder die Serverlatenz, sondern dass Browser aufgrund von CSS-Übergängen, fehlenden Prioritätssignalen und Lazy Loading für Bilder am oberen Rand des Darstellungsbereichs unerwartete Elemente als LCP ausgewählt haben.
Die Lösung war einfach, nachdem wir die Ursachen verstanden hatten: Übergänge aus Abschnitten an der ersten Position entfernen, Lazy Loading von Bildern oben im Darstellungsbereich entfernen und explizite Prioritätssignale hinzufügen. Wir haben dies einheitlich auf alle Kernthemen, Seitentypen und die über 180.000 Geschäfte auf unserer Plattform angewendet.
Die Ergebnisse sprechen für sich: Die LCP-Bestehensraten stiegen von 57 % auf 96 %, die Gesamtbestehensraten für Core Web Vitals von 48 % auf 72 % und die Händler verzeichneten messbare Verbesserungen: Die Conversion-Rate stieg um 8,9 % und die Interaktionen mit dem Einkaufswagen auf Mobilgeräten um 8, 4 %. Schnelle Schaufenster sind nicht nur eine technische Errungenschaft, sondern tragen auch direkt zum Erfolg von Händlern bei.