A/B-Test-Kreativ: Klickrate von JPG vs. WebP-Banner und Landingpages

Hypothese: Schnellere Bilder, mehr Klicks

Wir wissen, dass die Seitenladegeschwindigkeit ein entscheidender Faktor für die Nutzererfahrung und die Konversionsrate ist. Langsam ladende Seiten führen zu einer höheren Absprungrate. Da Bilder in der Regel die größten Elemente auf einer Landingpage sind, ist die Bildoptimierung eine oberste Priorität.

Moderne Bildformate wie WebP weisen bei gleicher visueller Qualität eine deutlich kleinere Dateigröße als herkömmliche JPEGs auf. Dies führt zu kürzeren Ladezeiten.

Unsere Hypothese lautet: Durch den Austausch des standardmäßigen JPG-Hauptbanners durch eine hochoptimierte WebP-Version reduzieren wir die Seitenladezeit, verbessern damit die Nutzererfahrung und erzielen einen messbaren Anstieg der Klickrate (CTR) für die zentrale Call-to-Action (CTA) der Seite.

Warum dieser Test wichtig ist

• Verifizierung der Wirkung von Leistungsoptimierungen: Er liefert konkrete Daten, die belegen, dass Bildoptimierungsmaßnahmen direkte Auswirkungen auf das Nutzerverhalten und die Geschäftsziele haben.
• Verbesserung der Kern-Web-Metriken: Ein schneller ladendes Hero-Bild verbessert direkt den Largest Contentful Paint (LCP)-Wert Ihrer Seite – eine zentrale Metrik von Google.
• Kleinste Verbesserungen summieren sich: Selbst ein geringer Anstieg der Klickrate (z. B. 0,5 %) kann bei skalierter Nutzung zu einem deutlichen Umsatzwachstum führen.

So richten Sie den A/B-Test ein

Sie benötigen ein A/B-Test-Tool wie Google Optimize (demnächst einzustellen, aber die Prinzipien gelten für andere Tools), VWO oder Optimizely.

Schritt 1: Vorbereitung Ihrer Bildassets

1. Erstellung der Kontrollgruppe (JPG): Nutzen Sie Ihr ursprüngliches Hero-Banner und speichern Sie es als hochwertiges JPG. Dies ist Ihre „Version A“.
2. Erstellung der Variantengruppe (WebP): Nutzen Sie dasselbe ursprüngliche Banner und konvertieren Sie es mit unserem Bildkonverter-Tool in das WebP-Format. Passen Sie die Qualitätsoptionen so an, dass die Dateigröße mindestens 30–40 % kleiner ist als die des JPGs, ohne die visuelle Klarheit einzubüßen. Dies ist Ihre „Version B“.
3. Hosten der beiden Bilder: Laden Sie das JPG- und das WebP-Bild hoch und stellen Sie sicher, dass beide über eine URL zugänglich sind.

Schritt 2: Konfiguration des A/B-Tests

1. Einrichtung des Experiments: Erstellen Sie in Ihrer A/B-Test-Software einen neuen A/B-Test für die Ziel-Landingpage.

2. Definition Ihrer Varianten:

   • Ursprungsversion (Kontrollgruppe): Dies ist Ihre aktuelle Seite mit dem JPG-Banner. Keine Änderungen erforderlich.
   • Variante 1 (WebP): Ändern Sie im Editor das src-Attribut des <img>-Tags des Hero-Banners so, dass es auf die URL Ihres neuen WebP-Bildes verweist.

   Erweiterte Option: Für einen besonders zuverlässigen Test nutzen Sie im Rahmen der Variante das <picture>-Element, um das WebP-Bild bereitzustellen und das JPG als Fallback. Dadurch wird sichergestellt, dass der Test nicht aufgrund von Nutzern mit sehr alten Browsern fehlschlägt.

   <!-- Code für Variante 1 -->
   <picture>
     <source srcset="your-banner.webp" type="image/webp">
     <img src="your-banner.jpg" alt="...">
   </picture>

3. Einrichtung des Hauptziels: Das Hauptziel besteht darin, die Klicks auf die zentrale Call-to-Action-Taste zu messen. Konfigurieren Sie den Test so, dass er die Klicks auf diese spezifische Taste oder den Link verfolgt. Dies ist Ihre primäre Konversionsmetrik (CTR).

4. Hinzufügen von sekundären Zielen (optional, aber empfohlen):

   • Seitenladezeit: Verfolgen Sie die durchschnittliche Seitenladezeit oder den LCP-Wert jeder Variante.
   • Absprungrate: Prüfen Sie, ob die schneller ladende Seite die Anzahl der Nutzer reduziert, die die Seite sofort verlassen.

Schritt 3: Start und Analyse

1. Traffic-Verteilung: Beginnen Sie mit einer 50/50-Verteilung – die Hälfte der Besucher wird zur Ursprungsseite, die andere Hälfte zur Variantenseite geleitet.
2. Durchführung des Tests: Lassen Sie das Experiment laufen, bis eine statistische Signifikanz erreicht ist (in der Regel ein Konfidenzniveau von mindestens 95 %). Dies kann je nach Traffic einige Tage oder Wochen dauern.
3. Analyse der Ergebnisse:
   • Zeigt die WebP-Variante einen statistisch signifikanten Anstieg der Klickrate?
   • Wurde die Seitenladezeit der Variantengruppe reduziert?
   • Ist die Absprungrate gesunken?

Interpretation möglicher Ergebnisse

• Deutlicher Erfolg: Die WebP-Variante weist einen signifikanten Anstieg der Klickrate und kürzere Ladezeiten auf. Aktion: Rollen Sie WebP als neuen Standard für alle Hero-Bilder Ihrer Website flächendeckend aus.
• Kein signifikanter Unterschied: Auch bei schnellerer Seitenladegeschwindigkeit ist die Klickrate nahezu identisch. Analyse: Dies könnte bedeuten, dass der Unterschied in der Ladezeit für Ihre spezifische Zielgruppe oder Seite nicht ausreicht, um das Nutzerverhalten zu beeinflussen. Dennoch sind die Leistungsvorteile (bessere Kern-Web-Metriken) an sich wertvoll – der Wechsel zu WebP ist daher für SEO und Nutzererfahrung immer noch empfehlenswert.
• Misserfolg: Die WebP-Variante performt schlechter. Analyse: Dies ist extrem unwahrscheinlich, könnte aber auf Probleme mit dem Bild selbst (z. B. übermäßige Komprimierung mit unscharfen Ergebnissen) oder technische Fehler bei der Testeinrichtung hinweisen.

Dieser einfache A/B-Test ist eine effektive Methode, um die technischen Maßnahmen zur Website-Leistungsoptimierung direkt mit messbaren geschäftlichen Ergebnissen zu verbinden.

---