Shopware 6 Performance optimieren: Core Web Vitals Guide

Google bewertet die Nutzererfahrung Ihrer Website anhand von drei Kernmetriken:

Warum sind Core Web Vitals wichtig?

• Google Ranking: Core Web Vitals sind ein offizieller Ranking-Faktor seit 2021
• Conversion Rate: Studien zeigen: 1 Sekunde schnellere Ladezeit = bis zu 7% mehr Conversions
• Bounce Rate: 53% der mobilen Nutzer verlassen eine Seite, die länger als 3 Sekunden lädt
• Nutzererlebnis: Schnelle, stabile Seiten fühlen sich professionell und vertrauenswürdig an

Prüfen Sie Ihren aktuellen Stand mit Google PageSpeed Insights oder der Google Search Console unter „Core Web Vitals".

Der LCP (Largest Contentful Paint) misst, wie schnell das größte sichtbare Element geladen wird – meist ein Hero-Bild oder eine große Überschrift. So optimieren Sie ihn:

Server-Antwortzeit reduzieren

• HTTP-Cache aktivieren: Shopware 6 bietet integriertes HTTP-Caching – stellen Sie sicher, dass es aktiv ist
• Reverse Proxy: Varnish oder nginx als Reverse Proxy vorschalten für deutlich schnellere Antwortzeiten
• PHP OPcache: Muss aktiviert und richtig konfiguriert sein
• Datenbank optimieren: Regelmäßig Indizes prüfen und langsame Queries identifizieren

Bilder optimieren

• WebP-Format nutzen: 25-35% kleiner als JPEG bei gleicher Qualität
• Responsive Images: Verschiedene Größen für verschiedene Bildschirme ausliefern (srcset)
• Lazy Loading: Bilder unterhalb des sichtbaren Bereichs erst laden, wenn der Nutzer scrollt
• Priorität setzen: Das Hero-Bild mit fetchpriority="high" und ohne Lazy Loading laden

Render-blockierende Ressourcen eliminieren

• CSS inline für Above-the-Fold-Content (Critical CSS)
• JavaScript mit defer oder async laden
• Nicht benötigte Google Fonts entfernen oder lokal hosten

CLS (Cumulative Layout Shift) misst, wie stark sich Elemente während des Ladens verschieben. Nichts ist ärgerlicher als ein Button, der im letzten Moment wegspringt.

Häufige CLS-Ursachen in Shopware

• Bilder ohne Dimensionen: Wenn Breite und Höhe nicht angegeben sind, reserviert der Browser keinen Platz
• Spät ladende Fonts: Web Fonts die nach dem initialen Rendering laden und Text-Größe ändern
• Dynamisch eingefügte Elemente: Cookie-Banner, Newsletter-Popups, dynamische Werbung
• Lazy-loaded Inhalte ohne Placeholder: Elemente die beim Laden ihre Größe ändern

Lösungen

• Feste Dimensionen: Immer width und height für Bilder und Videos angeben
• Font-Display: swap + Preload: Schriften mit font-display: swap laden und per link rel="preload" priorisieren
• Platzhalter reservieren: Für dynamische Elemente feste Container-Größen definieren
• Cookie-Banner oben fixieren: Statt am Seitenende (wo es den Content verschiebt) oben als overlay positionieren
• CSS contain: Mit contain: layout verhindern Sie, dass Änderungen eines Elements andere Elemente beeinflussen

Ziel: Ein CLS-Wert unter 0.1 – idealerweise möglichst nahe an 0.

INP (Interaction to Next Paint) misst die Reaktionszeit Ihres Shops auf Nutzer-Interaktionen wie Klicks, Taps und Tastatureingaben. Ein hoher INP-Wert bedeutet, dass sich der Shop „träge" anfühlt.

JavaScript optimieren

• Long Tasks aufbrechen: JavaScript-Ausführungen, die länger als 50ms dauern, blockieren den Main Thread. Brechen Sie große Aufgaben in kleinere Chunks auf.
• Nicht benötigtes JS entfernen: Prüfen Sie mit Chrome DevTools Coverage, welches JavaScript tatsächlich genutzt wird
• Third-Party-Scripts reduzieren: Tracking-Pixel, Chat-Widgets und Analytics sind oft die größten INP-Killer

Event Handler optimieren

• Debounce/Throttle: Suchfelder und Scroll-Events nicht bei jedem Tastendruck/Scroll-Event feuern
• Passive Event Listeners: Scroll- und Touch-Events als passive markieren
• requestAnimationFrame: Visuelle Updates mit rAF synchronisieren statt synchron auszuführen

Rendering optimieren

• CSS containment: Mit contain: content Browser-Reflows auf bestimmte Bereiche beschränken
• Virtual Scrolling: Bei langen Produktlisten nur die sichtbaren Elemente rendern
• content-visibility: auto: Browser rendert off-screen Elemente erst bei Bedarf

Ziel: INP unter 200ms für ein flüssiges, responsive Nutzererlebnis.

Neben den allgemeinen Web-Performance-Tipps gibt es Shopware-spezifische Optimierungen:

Shopware-Konfiguration

• HTTP-Cache aktivieren: Unter Einstellungen → System → Caches – der wichtigste einzelne Hebel
• Produktindexierung: Nach größeren Änderungen manuell neu indexieren
• Thumbnails generieren: Shopware generiert Thumbnails on-the-fly – für optimale Performance vorher generieren lassen
• Nicht benötigte Plugins deaktivieren: Jedes Plugin verlangsamt den Shop potenziell

Hosting-Optimierung

• PHP 8.2+: Shopware 6.5+ profitiert deutlich von PHP 8.2
• Redis/Memcached: Session- und Cache-Storage in den Arbeitsspeicher verlagern
• Elasticsearch/OpenSearch: Für Shops mit vielen Produkten die Suche und Listing-Filter beschleunigen
• CDN: Statische Assets über ein Content Delivery Network ausliefern

Theme-Optimierung

• Nicht benötigtes CSS/JS entfernen: Standard-Themes laden oft mehr als nötig
• Kritisches CSS inlinen: Above-the-Fold-Styles direkt im HTML ausliefern
• Schriften optimieren: Maximal 2 Font-Familien, nur benötigte Schriftschnitte laden

Mehr über meine Shopware Entwicklung und Performance-Optimierung erfahren Sie auf meiner Service-Seite. Gemeinsam bringen wir Ihren Shop auf Höchstgeschwindigkeit.