Core Web Vitals im Onlineshop verbessern

Warum Laborwerte allein nicht ausreichen

Performance-Optimierung im Onlineshop beginnt häufig mit einem einzelnen Lighthouse-Test. Das ist nützlich, bildet aber nur eine konkrete Umgebung ab. Echte Besucher nutzen unterschiedliche Geräte, Netzwerke, Browser und Interaktionsmuster. Deshalb sollten Labordaten und Felddaten gemeinsam betrachtet werden.

Die Core Web Vitals konzentrieren sich auf drei Aspekte der Nutzererfahrung: Largest Contentful Paint misst die wahrgenommene Ladezeit des größten sichtbaren Inhalts, Interaction to Next Paint bewertet die Reaktionsfähigkeit auf Interaktionen und Cumulative Layout Shift erfasst unerwartete Layoutverschiebungen. Im Commerce wirken sich diese Metriken unmittelbar auf Orientierung, Produktauswahl und Checkout aus.

Eine schnelle Startseite genügt nicht. Entscheidend ist, wie zuverlässig der gesamte Kaufprozess reagiert.

PMMB Engineering

LCP: den wichtigsten sichtbaren Inhalt priorisieren

Auf Produkt- und Kategorieseiten ist das LCP-Element häufig ein Hero, ein Produktbild oder eine große Überschrift. Verzögerungen entstehen durch langsame Serverantworten, blockierende Stylesheets, nicht priorisierte Bilder oder unnötige Client-Logik. Der erste Schritt ist deshalb, das tatsächliche LCP-Element in Felddaten und DevTools zu identifizieren.

• Das LCP-Bild nicht verzögert laden.
• Responsive Bildgrößen und moderne Formate bereitstellen.
• Kritische Styles früh ausliefern.
• Serverantwort und Cache-Strategie überprüfen.
• Wichtige Ressourcen mit passenden Prioritäten versehen.
• Hero-Slider vermeiden, wenn mehrere große Assets konkurrieren.

INP: Interaktionen im gesamten Besuch beschleunigen

INP betrachtet nicht nur den ersten Klick. Filter, Variantenwechsel, Offcanvas-Navigation, Warenkorb und Formularinteraktionen können die schlechteste wahrgenommene Reaktion erzeugen. Häufig ist nicht das Netzwerk der Hauptgrund, sondern ein zu langer Task im Browser.

Große JavaScript-Bundles, wiederholte Layoutberechnungen und komplexe Event-Handler blockieren den Hauptthread. Besonders kritisch sind Komponenten, die bei jeder Eingabe große DOM-Bereiche aktualisieren. Die Lösung besteht nicht nur im Minifizieren, sondern im Reduzieren und Aufteilen der Arbeit.

import { onCLS, onINP, onLCP } from 'web-vitals';

const reportMetric = (metric) => {
    navigator.sendBeacon(
        '/performance-metrics',
        JSON.stringify({
            name: metric.name,
            value: metric.value,
            id: metric.id,
            path: location.pathname,
        })
    );
};

onCLS(reportMetric);
onINP(reportMetric);
onLCP(reportMetric);

CLS: Layout von Beginn an reservieren

Layoutverschiebungen entstehen, wenn Elemente nachträglich Raum beanspruchen. Typische Auslöser sind Bilder ohne definierte Abmessungen, nachgeladene Schriftarten, Cookie-Banner, Bewertungswidgets oder Preisblöcke, die erst nach einer API-Antwort erscheinen.

• Für Bilder und Videos feste Seitenverhältnisse definieren.
• Platz für dynamische Hinweise und Fehlermeldungen reservieren.
• Schriftarten mit sinnvollen Fallback-Metriken konfigurieren.
• Inhalte nicht oberhalb bereits sichtbarer Bereiche einfügen.
• Skeletons nur verwenden, wenn ihre Größe dem finalen Inhalt entspricht.

Drittanbieter konsequent bewerten

Consent-Tools, Tracking, Chat, Personalisierung und Bewertungen können einen großen Anteil der Client-Last verursachen. Jede Integration benötigt deshalb einen fachlichen Nutzen, ein Ladeverhalten und einen Verantwortlichen. Ein Tag-Manager darf nicht zum unkontrollierten Deployment-System werden.

Skripte sollten erst geladen werden, wenn sie benötigt und rechtlich zulässig sind. Nicht kritische Integrationen können nach der ersten Interaktion oder in einer ruhigen Browserphase starten. Wichtig ist, ihre Wirkung mit realen Daten zu messen und nicht nur anhand der Dateigröße zu bewerten.

Nach Seitentyp und Nutzergruppe auswerten

Ein globaler Mittelwert verdeckt Probleme. Produktdetailseiten, Suchergebnisse, Checkout und Kundenkonto haben unterschiedliche technische Pfade. Auch mobile Nutzer können deutlich andere Werte als Desktop-Nutzer besitzen. Eine sinnvolle Auswertung gruppiert deshalb nach Seitentyp, Gerät, Browser und Release.

Performance als kontinuierlichen Prozess etablieren

Ein einmaliger Optimierungssprint wird durch neue Features, Tracking-Tags und Inhalte schnell wieder aufgehoben. Deshalb gehören Performance-Budgets und Felddaten in den normalen Entwicklungsprozess. Auffällige Änderungen werden einem Release zugeordnet und nicht erst Wochen später untersucht.

1. Felddaten erfassen und nach Seitentyp segmentieren.
2. Das konkrete LCP-, INP- oder CLS-Problem reproduzieren.
3. Die größte Ursache statt vieler kleiner Symptome beheben.
4. Auswirkung in Labor und Produktion prüfen.
5. Budgets und automatische Kontrollen für künftige Releases ergänzen.

Fazit

Gute Core Web Vitals entstehen aus einem schnellen Backend, priorisierten Inhalten, kontrolliertem JavaScript und stabilen Layouts. Im Onlineshop muss dabei der gesamte Kaufprozess betrachtet werden. Wer reale Nutzerdaten mit technischen Messungen verbindet, verbessert nicht nur einen Score, sondern die tatsächliche Bedienbarkeit der Plattform.