Das Team testete die Website im Büro mit schnellem WLAN. Alles lief flüssig. Bilder luden sofort, Formulare reagierten ohne Verzögerung. Niemand verstand das Problem, bis jemand vorschlug, die Seite mal mit gedrosselter Verbindung zu testen.
Chrome DevTools bietet eine Netzwerkdrosselung an. Die Einstellung auf "Slow 3G" zeigte ein komplett anderes Bild: 22 Sekunden bis zur vollständigen Ladung der Startseite. Das Hero-Bild allein brauchte 8 Sekunden. Das Buchungsformular erschien erst nach 15 Sekunden. Für jemanden mit instabiler Verbindung war die Seite praktisch unbenutzbar.
Der Vergleich zwischen Netzwerktypen:
- 4G LTE: 10-50 Mbps Download, Latenz um 50ms, konstante Verbindung
- 3G: 0,4-2 Mbps Download, Latenz 100-500ms, häufige Schwankungen
- Gedrosseltes 3G: unter 0,4 Mbps, Latenz über 500ms, simuliert schlechte Bedingungen
Die Sprachschule hatte ihre Website nie unter realistischen Bedingungen getestet. Alle Entwickler und Designer arbeiteten mit schnellen Verbindungen. Die Zielgruppe in ländlichen Gebieten kämpfte dagegen oft mit schwachem Empfang.
Die Lösung brauchte mehrere Schritte. Zuerst wurden alle Bilder komprimiert und in moderne Formate wie WebP konvertiert. Das Hero-Bild schrumpfte von 2,4 MB auf 180 KB. Dann kam Lazy Loading für Bilder unterhalb der Falzlinie. Schriften wurden auf zwei Varianten reduziert und mit font-display: swap geladen.
Das Buchungsformular wurde in einen separaten Chunk ausgelagert und lädt nur bei Bedarf. JavaScript-Bibliotheken wurden geprüft. Moment.js flog raus und wurde durch date-fns ersetzt, was 200 KB sparte. Critical CSS wurde inline eingebettet, der Rest asynchron nachgeladen.
Nach diesen Änderungen: Ladezeit auf 3G sank auf unter 5 Sekunden für den initialen Content. Die Absprungrate in ländlichen Regionen fiel auf 32%. Buchungen aus diesen Gebieten stiegen um 47%.
Teste deine Website nicht nur mit deiner eigenen Verbindung. Chrome DevTools, WebPageTest und Lighthouse bieten alle Optionen, um langsame Netzwerke zu simulieren. Schau dir an, was zuerst lädt und ob das wirklich das Wichtigste ist. Priorisiere Content, der Nutzern sofort weiterhilft. Der Rest kann warten.