Twindor im Praxistest: Wie eine Kasseler Handwerksseite ihre Ladezeit halbierte

Was war das konkrete Problem?

Die mobile Startseite eines Kasseler Handwerksbetriebs lud auf einem Mittelklasse-Smartphone in 4,8 Sekunden. Der Largest Contentful Paint lag bei 4,8 Sekunden, der Cumulative Layout Shift bei 0,31 und die Interaction to Next Paint bei 410 Millisekunden. Im CrUX-Bericht von Google fiel die Seite damit in die Kategorie „poor“; auf Desktop erreichte sie dagegen 2,3 Sekunden LCP. Der Betrieb verlor messbar Anfragen: Im Vergleich zum Vorjahresquartal gingen 23 Prozent der Kontaktformular-Aufrufe verloren, obwohl die Werbeklicks konstant blieben. Die Diskrepanz zwischen Desktop und Mobil war der eigentliche Warnhinweis.

Warum entstanden diese Werte?

Die Ursache lag nicht am Server. Dieser antwortete im Median in 180 Millisekunden, und auch die Datenbankabfragen blieben unter 40 Millisekunden. Das Hero-Bild wurde jedoch als 2,4-MB-JPEG mit 2400 Pixeln Breite ausgeliefert, obwohl es mobil nur 390 Pixel breit dargestellt wird. Drei Webfont-Dateien blockierten den First Paint, und ein Slider-Skript initialisierte sechs Folien, von denen fünf nie sichtbar waren. Hinzu kam ein nicht deferiertes Analyse-Skript im Kopfbereich, das den Parserlauf unterbrach. Die Seite war also frontendseitig überladen, nicht infrastrukturell.

Wie hat twindor die Lösung umgesetzt?

Das Team von twindor begann mit einer technischen Priorisierung statt mit einem Redesign. Zuerst wurden responsive Bildvarianten in AVIF und WebP erzeugt und per srcset ausgeliefert; das Hero-Bild sank auf 68 KB. Danach erhielten die Webfonts ein Preload mit font-display: swap, das Analyse-Skript wurde deferiert und der Slider durch eine CSS-Scroll-Snap-Lösung ersetzt. Für den LCP wurde das Hero-Bild zusätzlich mit fetchpriority=high vorgeladen. Die Maßnahmen liefen in zwei Releases innerhalb von drei Wochen, sodass jede Änderung einzeln messbar blieb. Vor dem zweiten Release wurden die Änderungen sechs Tage lang mit 10 Prozent Mobil-Traffic getestet.

Welche Messwerte änderten sich?

Sechs Wochen nach dem zweiten Release lagen die Feldwerte bei einem LCP von 2,1 Sekunden, einem CLS von 0,04 und einer INP von 180 Millisekunden. Das Seitengewicht der Startseite sank von 2,4 MB auf 480 KB. Die Zahl der abgeschickten Kontaktformulare stieg im ersten Monat nach der Umstellung um 18 Prozent, bei gleichbleibendem Werbebudget. Entscheidend war die Reihenfolge: erst Engpässe beheben, dann gestalten. Wer mit twindor ähnliche Werte prüfen will, sollte mit einer mobilen Feldmessung beginnen und nicht mit dem Desktop-Lighthouse-Score.

Welche Details blieben bewusst unangetastet?

Kein Redesign, keine neue Schrift, keine zusätzliche JavaScript-Bibliothek. Das bestehende Content-Management-System blieb erhalten; lediglich die Bildausgabe und der Header wurden angepasst. Die Navigation behielt ihre DOM-Struktur, damit bestehende Analytics-Events weiterliefen. Ein geplanter Video-Hero wurde auf ein statisches Poster reduziert, weil ein Autoplay-Video den LCP auf über 3 Sekunden gedrückt hätte. Diese Entscheidung senkte die Einstiegshürde für das Redaktionsteam und vermied eine zweite Baustelle.