Ladezeit und Core Web Vitals: was für den Verkauf zählt

Warum sich Ladezeit in Umsatz bemerkbar macht

„Core Web Vitals“ wird in Frankreich 1.000-mal im Monat gesucht, „temps de chargement“ (Ladezeit) 210-mal, „vitesse site internet“ (Website-Geschwindigkeit) 170-mal. Hinter diesen Suchen steckt immer dieselbe Frage: Verliert meine Website Kunden, weil sie langsam ist?

Eine von Google bei Deloitte in Auftrag gegebene Studie von 2020 („Milliseconds Make Millions“, 37 Marken aus Europa und den USA, ohne Peer-Review) beobachtete bei Handelswebsites ein Plus von 8,4 % bei den Conversions und von 9,2 % beim durchschnittlichen Warenkorbwert für jede Zehntelsekunde, die mobil gewonnen wurde. Nehmen Sie diese Zahlen als das, was sie sind: eine Korrelation, gemessen von einem interessierten Akteur. Die Richtung selbst ist unstrittig.

Entschieden wird es auf dem Smartphone: Auf unseren eigenen verkaufenden Websites erfolgen 61 % der gemessenen Besuche mobil, oft über 4G, mit einem Daumen und wenig Geduld.

Die drei Core Web Vitals, klar erklärt

Google misst drei Signale bei echten Besuchern (Chrome-Daten) und bewertet eine Seite als gut, wenn beim 75. Perzentil ihrer Ladevorgänge der Schwellenwert erreicht wird.

1. 1
   LCP (Largest Contentful Paint): die Zeit bis zur Anzeige des größten sichtbaren Elements, oft das Produktfoto oder die Überschrift. Guter Wert: 2,5 s.
2. 2
   INP (Interaction to Next Paint): die Verzögerung zwischen einer Geste (Button antippen, Menü öffnen, Größe wählen) und der Reaktion auf dem Bildschirm. Guter Wert: 200 ms.
3. 3
   CLS (Cumulative Layout Shift): das Verrutschen von Elementen beim Laden, das einen auf den falschen Button tippen lässt. Guter Wert: 0,1 oder weniger.

Richtig messen

Es gibt zwei Arten von Messungen, und wer sie verwechselt, verliert Zeit.

• Felddaten: was Ihre echten Besucher über 28 Tage erleben. Sie erscheinen im Bericht „Core Web Vitals“ der Google Search Console und oben in PageSpeed Insights, wenn die Website genug Traffic hat. Genau diese Daten nutzt Google.
• Labordaten: ein simulierter Test zum Zeitpunkt, an dem Sie ihn starten (der Score von 100 in PageSpeed Insights, Lighthouse). Nützlich, um Ursachen zu finden, irreführend als Urteil: Ein Laborwert von 60 kann grüne Felddaten verbergen, und umgekehrt.
• Testen Sie mit realistischem Netz und Gerät: ein Mittelklasse-Smartphone mit 4G, nicht der Büro-PC am Glasfaseranschluss.
• Messen Sie die Seiten, die verkaufen (Produktseite, Leistungsseite, Checkout), nicht nur die Startseite.

Zuerst beheben: die Bilder

In einem Onlineshop ist das Produktfoto fast immer das LCP-Element und oft das schwerste der Seite. Das WebP-Format spart Gewicht ohne sichtbaren Verlust: Laut Google ist ein verlustbehaftetes WebP-Bild 25 bis 34 % kleiner als ein JPEG vergleichbarer Qualität und ein verlustfreies WebP-Bild 26 % kleiner als ein PNG.

1. 1
   Das richtige Format: WebP (oder AVIF) für Fotos, SVG für Logos und Icons.
2. 2
   Die richtige Größe: Ein Bild, das 600 Pixel breit angezeigt wird, muss nicht 4.000 Pixel haben. Liefern Sie mehrere Größen per srcset aus und lassen Sie den Browser wählen.
3. 3
   Angegebene Abmessungen: width und height an jedem Bild, damit die Seite den Platz reserviert und nicht verrutscht (CLS).
4. 4
   Lazy Loading für Bilder unterhalb des sichtbaren Bereichs (loading=„lazy“), niemals für das Hauptbild oben auf der Seite, das im Gegenteil Vorrang haben muss (fetchpriority=„high“).

Danach: Skripte und Erweiterungen

Nach den Bildern bremsen vor allem Drittanbieter-Skripte: Chat-Widgets, Pop-ups, Karussells, Werbepixel, über die Jahre gestapelte Theme-Erweiterungen. Jedes fügt Code hinzu, der geladen und ausgeführt werden muss, und verschlechtert vor allem den INP.

1. 1
   Bestandsaufnahme: Listen Sie jedes Drittanbieter-Skript auf und was es bringt. Ein Tool, das niemand nutzt, fliegt raus.
2. 2
   Verzögern: Laden Sie alles, was für den Kauf nicht nötig ist (Chat, Videos, Bewertungs-Widgets), erst nach der Anzeige.
3. 3
   Das Theme verschlanken: Ein Theme, das auf jeder Seite einen Slider, drei Schriften und eine Animationsbibliothek lädt, belastet die ganze Website.
4. 4
   Schriften: höchstens zwei Familien, im Format WOFF2, mit font-display: swap.
5. 5
   Cache und CDN: statische Dateien lange zwischenspeichern und über ein Netz nahe beim Besucher ausliefern.

Der Kaufprozess, wo jede Sekunde kostet

Die Ladezeit der Startseite misst jeder, die des Kaufprozesses wird oft vergessen. Dabei wartet genau dort der entschlossene Käufer: in den Warenkorb legen, Warenkorb öffnen, Zahlungsseite. Ein Button, der eine Sekunde zum Reagieren braucht, weckt Zweifel, und ein zweifelnder Käufer tippt zweimal oder geht.

Drei Reflexe. Der Kauf-Button reagiert sofort, auch wenn die Verarbeitung etwas dauert (ein sichtbarer Status „wird bearbeitet“). Die Zahlung läuft über eine vom Zahlungsanbieter gehostete Seite, schnell und den Käufern schon bekannt, statt über ein selbst gebautes Formular voller Skripte. Und nichts schiebt sich dazwischen: kein Newsletter-Pop-up zwischen Warenkorb und Zahlung.

Der Plan für eine Woche

1. 1
   Tag 1: Den Bericht „Core Web Vitals“ der Google Search Console auswerten, zuerst mobil, und die URL-Gruppen in Orange oder Rot auflisten.
2. 2
   Tag 2: Drei typische Seiten (Startseite, Produkt- oder Leistungsseite, Checkout) in PageSpeed Insights prüfen und jeweils das LCP-Element notieren.
3. 3
   Tag 3: Die Bilder dieser Vorlagen konvertieren und verkleinern, ihre Abmessungen angeben.
4. 4
   Tag 4: Unnötige Drittanbieter-Skripte entfernen oder verzögern.
5. 5
   Tag 5: Im Labor erneut testen und dann warten, bis sich die Felddaten aktualisieren (sie decken 28 Tage ab), bevor Sie urteilen.