Die Korrelation zwischen Umsatz und Ladezeit einer Webseite.

Die Realität.

53% aller Nutzer verlassen eine Webseite, die länger als 3 Sekunden lädt.

Ein potenzieller Kunde landet auf deiner Webseite. Er hat nach genau deinem Produkt gesucht. Aber nach längerer Ladezeit ist er weg. Für immer. Das kostet Geld.

Aber kleiner Trost. Während ich hier Wasser predige, war es bei mir bis vor einiger Zeit nicht so viel besser.
Meine eigene Webseite lief nicht zu 100% flüssig. (kleines Wortspiel).
Beim Testen auf einem älterem Endgerät habe ich das erst bemerkt.
Daraufhin habe ich mich natürlich direkt an die Arbeit gemacht.

15 Minuten und einige Tests später: Die Ladezeit hat sich um das 15-fache verbessert.
Die Total Blocking Time sank von 1.490 ms auf blitzschnelle 10 ms.
Das zeigt auch der PageSpeed-Score: von zuvor 63 auf nun 98 von insgesamt 100 möglichen Punkten.

In diesem Artikel zeige ich dir, welche Vorteile eine verbesserte Ladezeit deiner Webseite mit sich bringt.
Außerdem zeige ich Schritt für Schritt, welche konkrete Optimierungen zukunftsberatung.net schneller gemacht haben.

Was schnelle Webseiten wirklich wert sind.

Rakuten24: Case Study

Das japanische Unternehmen Rakuten 24 hat Analysen durchgeführt.
Das Ziel war herauszufinden, was optimierte Core Web Vitals bringen.

Kurz vorab einige Erklärungen für technische Begriffe.
LCP: Ladezeit für das größte sichtbare Element, z.B. auf zukunftsberatung.net der violette Nebel im Hero.
FIP/INP: Visuelle Reaktion, z.B. kleine Animation wenn etwas in Warenkorb hinzugefügt wird.

So wurden beim A/B-Test mit optimierten Webseiten festgestellt:

• + 53,37 % Umsatz pro Besucher

• + 33,13 % Conversion Rate

• + 15,20 % durchschnittlicher Bestellwert

• - 35,12 % Absprungrate
  
  

Das sind keine theoretischen Spielereien. Das ist pures ROI und bei einer Größenordnung wie von Rakuten24 ziemlich beeindruckend. (Quelle: wpostats.com)

Weitere Case Studies.

Die Rakuten-Studie ist kein Einzelfall. Ähnliche Ergebnisse bei anderen Firmen:

• Vodafone: 31% Verbesserung des LCP führten zu 8% mehr Verkäufen (!!)

• T-Mobile: Durch Fokus auf Core Web Vitals +60% Visit-to-Order-Rate (!!!)

• Walmart: Jede Sekunde schnellere Ladezeit = +2% Conversion Rate

Laut Deloitte & Google Research: Bereits 0,1 Sekunden schnellere Ladezeit führen zu:

• +8,4% Conversion Rate im E-Commerce

• +9,2% höherer durchschnittlicher Bestellwert

Portent-Studie 2024: Eine Webseite, die in 1 Sekunde statt 5 lädt, hat eine 2,5x höhere Conversion Rate.

Schnelle Webseiten verkaufen mehr. Punkt.

(Quelle blog.hubspot.com)

Core Web Vitals Richtwerte.

1. LCP / Largest Contentful Paint (Ladegeschwindigkeit)

Wie lange dauert es, bis der Hauptinhalt einer Seite sichtbar ist?
Die üblichen Verdächtigen für schlechte LCP: Große Bilder im Hero oder falsche Reihenfolge beim Laden.
Auf meiner Seite ist das der animierte Hintergrund gewesen, der viel Zeit gekostet hat.

Richtwert:

• Gut: unter 2,5 Sekunden

• Verbesserungswürdig: 2,5 - 4 Sekunden

• Schlecht: über 4 Sekunden

Wenn der erste Inhalt schon langsam lädt, brechen Nutzer den Besuch aus Ungeduld ab.

(Quelle web.dev)

2. INP / Interaction to Next Paint (Interaktivität)

Wie schnell reagiert die Webseite auf Interaktionen NACH dem Laden? Also Klicks oder Eingaben.

Richtwert:

• Gut: unter 200 ms

• Verbesserungswürdig: 200-500 ms

• Schlecht: über 500 ms

Eine Webseite, die nicht schnell reagiert, fühlt sich kaputt an. Da reichen schon 300 ms Verzögerung.

(Quelle web.dev)

3. CLS / Cumulative Layout Shift (Visuelle Stabilität)

Verschieben sich Elemente beim Laden, z.B. Button rutscht nach unten führt das zu Irritation.

Richtwert:

• Gut: unter 0,1

• Verbesserungswürdig: 0,1-0,25

• Schlecht: über 0,25

Ein Trauerspiel, wenn eine Webseite beim Laden aussieht wie die Tanzfläche im Technoclub.

Performance Problem: Animationen.

Moderne Website-Builder, aber auch traditionelle CMS Builder wie WordPress machen es einfach, Seiten zu erstellen.
Eine visuell ansprechendes, aber vor allem funktionales Webdesgin benötigt jedoch Erfahrung.
Von der richtigen Reihenfolge der Inhalte, über Typografie, die gestalterische Nutzung von Farben und Weißraum usw.

Wo es an Erfahrung fehlt, wird oft überladen. Ganz nach dem Motto: Viel hilft viel, so oft auch bei Animationen.
Und hey, ich verstehe es, ich liebe schöne Animationen.
Vor allem jene, die mich zum entdecken einer Webseite animieren (Gib's zu, der war gut!)

Beispiel: Framer.

Framer bietet wunderschöne Möglichkeiten und ist von Haus aus extrem gut optimiert.
Sowohl für SEO als auch Ladegeschwindigkeit. Dazu gibt es alles was das Auge begehren mag.
Liquid-Effekte, Parallax-Scrolling: Elemente sehen wirklich fantastisch aus und funktionieren i.d.R. reibungslos.

Aber jede kleine Animation kostet eben Leistung.

Der "Main Thread" des Browsers muss immer mehr arbeiten.
Dieser ist für die Klient-seitige Darstellung einer Webseite verantwortlich.

Jeder einzelne Pixel muss ständig berechnet werden, in Echtzeit.
Das sind bei Full-HD schnell mal mehrere Millionen animierte kleine Pixelchen.

Mein eigenes Debakel…

Anfangs habe ich selber genau mich selber in diese Falle manövriert, bis mir aufgefallen ist…

• PageSpeed Score: 63/100

• Total Blocking Time: 1.490 ms (!!) :(

• First Contentful Paint: 0,6 s

• Largest Contentful Paint: 1,1 s

Klingt nicht dramatisch? Ist es aber.
Mit diesen Werten verliere ich Conversions und Rankings.
Aber das Schlimmste: Als jemand, der anderen hilft, ihre Online-Präsenz zu optimieren, ist das einfach nur peinlich.

Kleine Ausrede: Man spricht auch von sogenannter "Domain Dependence".
Also, das eigene Wissen nicht bei sich anzuwenden. Bestes Beispiel: Der Nobelpreisträger Harry Markowitz.
1990 ausgezeichnet für seine ausgeklügelten Portfolio Strategien, hat er privat diese nicht angewendet.
(Quelle: S.109 "Die Kunst des klugen Handelns" von Rolf Dobelli, Hanser Verlag. Buch kann ich empfehlen.)

Lösung: Der Trick mit der Auflösung in Framer.

Ich stand vor einer Entscheidung: Entweder die Animationen entfernen, oder einen Weg finden, sie effizienter zu machen.

Der Trick: "Berechne weniger, aber zeig' genauso viel".

Der Trick basiert auf einem einfachen Prinzip: Wir lassen weniger Pixel berechnen.
Die Größe des berechneten Objektes skalieren wir aber optisch hoch.

So funktioniert es in Framer.

Schritt 0: Finde das Element, welches am meisten Ladezeit frisst. Du kannst dafür das kostenlose Tool PageSpeed Insights nutzen. Den Link dazu findest du hier: Google PSI bei web.dev entdecken.

Schritt 1: Größe der in Schritt 0 identifizierten Komponente manuell auf 50% reduzieren (Breite und Höhe).

• Beispiel: aus 1920×1080 werden dann 960×540

• Das sind nur noch 25% der ursprünglichen Pixel

Schritt 2: Bei Framer in der Styles-Sidebar die "Transform" Funktion nutzen, und mit dem Wert 2 skalieren.

Das war's! Fertig.

So habe ich es mit der Komponente gemacht, die den violetten Nebel bei mir im Hero animiert.

• Die GPU berechnet nur noch ein Viertel der Pixel

• Der Browser skaliert das Ergebnis optisch hoch

• Bei organischen Formen (wie Rauch) ist der Qualitätsunterschied kaum sichtbar

• Die Performance ist viel besser.

Beweis: Meine Ergebnisse nach der Optimierung.

• PSI Score: 98/100 - eine Verbesserung um 55%

• TBT: 10 ms - eine Reduktion um 99,3%

• FCP: 0,6 s - unverändert gut

• LCP: 1,0 s - minimal verbessert

• SEO Score: 100/100

• Best Practices: 100/100

Warum dich Performance-Optimierung interessieren sollte.

Selbst wenn du nicht mit Framer arbeitest, sind die Prinzipien universell anwendbar:

1. Performance ist ein Wettbewerbsvorteil.

Konkurrenten optimieren selten und weniger radikal.
Laut Daten von 2024 haben von allem Webseiten:

• Nur 53% bei Desktop

• Nur 41% bei mobilen Versionen

…gute Core Web Vitals, also angemessene Performance.

Wenn deine Webseite schneller ist, hast du also einen direkt sichtbaren Vorteil.
Sowohl im Ranking als auch bei der Conversion Rate.

Dein Schaufenster ist sauber und zieht Kunden an.

2. Mobile Performance ist kritisch.

Mobile Seiten sind 70,9% langsamer.
Das ist der Unterschied zwischen Desktop und Mobile-Versionen.

Dabei findet über 50% des Web-Traffics auf Mobilgeräten statt.

3. Umsatz Rechenbeispiel.

Ausgangssituation:
Deine Webseite hat 10.000 Besucher pro Monat
Eine Conversion Rate von 2% (Branchendurchschnitt).
Das sind 200 Conversions, mit 10% davon werden Verträge über 1.000€ geschlossen.

Szenario 1: Du verbesserst "nur" die Ladezeit und Core-Web-Vitals. (zu dem "nur" komme ich nochmal)
Nach Portent und den Daten aus dem Rakuten24 Case Study hättest du dann statt 2% nun ca. 4% Conversions.
Das sind doppelt so viele Conversions.

Bei einem durchschnittlichen Kundenumsatz von 1.000 € sind das 240.000€ zusätzlicher Umsatz pro Jahr. Stimmt, "nur".

Und das "nur" durch Performance-Optimierung.
Das zeigt: Performance-Optimierung ist keine Kostenstelle, sondern eine Investition.

Best Practices: Weitere Optimierungen.

Auch wenn der gezeigte Trick spezifisch für Animationen in Framer ist, gibt es universelle Prinzipien:

1. Mobile First.

Wenn eine Animation oder ein Effekt auf Mobilgeräten zu langsam ist, sollte auf Smartphones stattdessen ein statisches Bild oder eine vereinfachte Version gezeigt werden.

2. Bilder optimieren.

• Komprimiere alle Bilder (TinyPNG, ImageOptim)

• Nutze moderne Formate (WebP, AVIF)

• Implementiere Lazy Loading

• Verwende responsive Images mit srcset

3. JavaScript minimieren und defer.

Jedes Script, das beim Laden ausgeführt wird, blockiert das Rendering.

Die Lösung:

• Minimiere JavaScript-Dateien

• Nutze defer oder async für nicht-kritische Scripts

4. Third-Party-Scripts konsolidieren.

Faustregel: Jedes Third-Party-Script (Google Analytics, Pixel, Chat-Widget) kostet Performance.

• Welche Scripts brauchst du wirklich?

• Scripts asynchron laden lassen

5. Messen, optimieren, wiederholen.

• PageSpeed Insights für schnelle Checks

• Chrome DevTools für detaillierte Analysen

• Search Console für Monitoring über 28 Tage

• Chrome User Experience Report (CrUX) für echte Nutzerdaten

Wichtig: Es gibt einen Unterschied zwischen Lab Data (Lighthouse, PageSpeed) und Field Data (echte Nutzer).
Änderungen an einer Webseite brauchen 28 Tage, bis sie sich in der Search Console widerspiegeln. Sei geduldig.

Tipps für beliebte Plattformen:

• WordPress/Elementor: Verwende CSS statt JavaScript

• Webflow: Lottie-Animationen sparsam und komprimiert nutzen

Häufige Fehler.

Fehler 1: Performance gegen Funktionalität ausspielen.

"Wir können die Funktion nicht entfernen, die ist wichtig für unsere Webseite!"
Optimieren, statt sie zu entfernen. Fast alles lässt sich verbessert implementieren.

Fehler 2: Einmalige Optimierung.

Optimierung ist kein Projekt, sondern ein kontinuierlicher Prozess.
Lasse es von Profis machen, falls in deinem Unternehmen die Expertise oder Zeit fehlt.
Gerne eine kurze Nachricht schreiben, und ich schaue es mir unverbindlich an. Link zum Kontaktformular.

Fehler 3: Nur Desktop optimieren.

Mobile Nutzer werden oft vergessen. Mobile First. Immer.

Fazit.

1. Performance hat messbaren Business-Impact.

• +61% Conversion Rate (Rakuten)

• +53% Umsatz pro Besucher (Rakuten A/B-Test)

• 2,5x höhere Conversion Rate bei 1s vs. 5s Ladezeit (Portent)

2. Die meisten Webseiten sind zu langsam.

• Nur 53% der Desktop- und 41% der mobilen Ansichten haben gute Werte.

• Das ist eine Chance, sich abzuheben.

3. Optimierung ist möglich. Auch ohne Kompromisse.

• Schöne Webseiten müssen performant sein. Langsam ist hässlich.

• Mit den richtigen Tricks lassen sich Design und Speed vereinen.

• Mein Beispiel: Von PageSpeed 63 auf 98, ohne visuelle Abstriche.

4. Performance ist eine Investition.

• Bessere Conversions = mehr Umsatz.

• Besseres Ranking = mehr Besucher = mehr Umsatz.

• Zufriedenere Nutzer = mehr Umsatz.

Die nächsten Schritte.

Es gibt drei Optionen:

Option 1: Selbst optimieren.
Option 2: Externe Expertise holen.

• Lasse einen kostenlosen Performance-Audit durchführen. Link dazu hier.

• Falls gewünscht: Ich setze anschließend um.

Option 3: Nichts tun.

• Verliere weiterhin 40-50% potenzieller Conversions

• Überlasse der Konkurrenz den Markt

• Wundere dich im November 2026 über fehlende Umsätze.

Die Wahl liegt bei dir.
Ansonsten wünsche ich einen guten Rutsch in das neue Jahr!

Tim Akihiro Heinrich
zukunftsberatung.net

PSI Werte vor der Optimierung	PSI Werte nach der Optimierung