Animierte Website ohne Ladezeit: von Lighthouse 43 auf 98
Die neue Startseite von bornvisions.de hat mir auf Anhieb gefallen. Eine Kamerafahrt durch einen Raum aus Rasterlinien, Filme hängen darin wie Werke in einer Galerie, beim Scrollen gleitet die Seite von Station zu Station. Dann kam die erste Messung auf dem Handy: Lighthouse 43. Die alte Seite, die wir ersetzen wollten, lag bei 73.
Damit hatten wir genau das Problem, das jede Marketing-Leitung kennt, die intern eine Website mit Bewegung durchbringen will. Die Geschäftsführung fragt nicht, ob es gut aussieht. Sie fragt, ob es die Seite langsamer macht. Bei 43 hätte die ehrliche Antwort Ja gelautet.
Heute ist die Seite live. Lokal gemessen kommt die Startseite mobil auf 98, und keine der zehn Kernseiten liegt unter 94. So sind wir vorgegangen.
Erst die Messlatte, dann das Bauen
Bevor wir eine Zeile optimiert haben, haben wir aufgeschrieben, was „schnell genug“ heißt. Nicht als Gefühl, sondern als Tabelle mit Lighthouse-Werten (mobil) pro Seite:
| Seite | Vorher | Ziel |
|---|---|---|
| Startseite | 73 live, 43 neu auf Staging | mindestens 85 |
| /leistungen, /blog | 99 | mindestens 95 |
| /videoproduktion, /die-crew | 77 / 75 | mindestens 90 |
| /projekte | 67 bei 11,8 MB | mindestens 85 |
| Barrierefreiheit überall | 96 bis 100 | mindestens 95 |
Dazu kam ein Budget: höchstens 60 KB JavaScript (gzip) beim Start jeder Unterseite, Videos und schwere Bilder nur bei Bedarf.
Der Satz, der darüber stand: Jede Seite ist mindestens so schnell wie vorher, die Startseite deutlich schneller. Und keine Seite, kein Menüpunkt, keine Funktion geht verloren. Menü, Fußzeile, URLs, Formulare und SEO-Daten blieben unangetastet.
Diese Messlatte war das wichtigste Werkzeug im ganzen Projekt. Sie hat jede Gestaltungsidee in eine überprüfbare Frage verwandelt: Passt das ins Budget oder nicht? Und am Ende war sie die Abnahme. Wer intern argumentieren muss, braucht genau so etwas: eine Zahl vorher, eine Zahl als Ziel, eine Zahl danach.
Der größte Hebel: eine Video-Pipeline statt Einzelfalllösungen
Bei einer Agentur, die von Bewegtbild lebt, ist das Video der schwerste Teil der Seite. Beim Prüfen fiel auf, wie schlecht unser Hero-Video eigentlich ausgeliefert wurde: Es war HEVC mit Tonspur, obwohl es stumm lief, und in Firefox spielte es überhaupt nicht.
Statt dieses eine Video zu reparieren, haben wir eine feste Strecke gebaut. Jeder Film für die Website läuft jetzt durch dieselbe ffmpeg-Pipeline und kommt heraus als:
- AV1 für moderne Browser, plus H.264 als Rückfall,
- ohne Tonspur, weil Hintergrundvideos ohnehin stumm laufen,
- in eigener Größe für Handy und Desktop,
- mit einem Poster als AVIF und JPG, das sofort steht, bevor der Film lädt.
Die Pipeline hat nebenbei auch die Projekte-Seite gerettet: Sie lag bei 11,8 MB und Lighthouse 67, weil dort volle Filme hingen. Mit kurzen Vorschau-Clips aus derselben Pipeline steht sie jetzt bei 96. Wie wir Filme selbst denken und produzieren, steht unter Videoproduktion.
Bewegungsregeln, die nicht verhandelbar sind
Das zweite Werkzeug waren feste Regeln für Bewegung, festgehalten im Designsystem, bevor das Motion-Kit für alle Seiten entstand. Ein paar davon sind reine Performance-Entscheidungen, andere Barrierefreiheit. In der Praxis hängen beide eng zusammen:
- three.js nur auf der Startseite und nur am Desktop. Die 3D-Fahrt lädt erst, wenn sie gebraucht wird und WebGL vorhanden ist. Auf dem Handy gibt es eine Wisch-Galerie im CSS-Linienraum statt einer 3D-Fahrt.
- Skripte nach dem ersten Bild. Das weiche Scrollen und die Szenen starten, nachdem die Seite sichtbar ist.
- Keine fremden Server. Bibliotheken kommen über npm statt CDN, Schriften liegen lokal. Das ist schneller und spart nebenbei eine DSGVO-Diskussion.
- Keine Pins unter 768 px. Gepinnte Szenen gibt es nur auf großen Bildschirmen.
- Eine ruhige Fassung. Wer im Betriebssystem „Bewegung reduzieren“ eingestellt hat, bekommt eine vollständige, ruhige Seite, keine kaputte. Lenis ist dann aus, und auf dem Handy wird normal gewischt.
- Pause-Knopf für alles, was sich länger als fünf Sekunden bewegt, dazu Tastaturbedienung, sichtbarer Fokus und Kontrast AA.
Dazu kam ein Performance-Durchgang speziell für die Startseite: auf dem Handy die kleine Video-Fassung oder ein Standbild, Szenen-Code nur bei Bedarf, verkleinerte Logos und eine Layoutverschiebung (CLS) am Desktop unter 0,1.
Die Abnahme dazu war streng: ohne JavaScript, ohne WebGL, mit reduzierter Bewegung und auf dem Handy muss die Seite vollständig lesbar und bedienbar sein.
Prototyp zuerst, die echte Seite zuletzt
Was viel Zeit gespart hat, war die Reihenfolge. Die neue Startseite entstand zuerst als Prototyp mit echten Texten, Bildern und kurzen Clips, abgeleitet aus zehn Referenzen. Den haben wir in 14 Versionen geschärft, ohne die echte Website anzufassen.
In diesen Runden sind auch Ideen rausgeflogen. Kachelwände, die aufklappen, habe ich verworfen, weil ich einen begehbaren Raum wollte. Ein unscharfer Foto-Hintergrund wirkte grau und matschig und wich einem dunklen Grund mit Liniengitter und farbigem Licht. Kino-Balken gibt es nur noch in der Showroom-Fahrt, weil sie sonst mit dem Kopf der Seite kollidierten. Und das weiche Scrollen kam bewusst nicht sofort auf alle Seiten, sondern erst mit dem gemeinsamen Motion-Kit, weil Modale und Formulare mitspielen müssen.
Erst nach dem „passt“ ging es an den Code: Sicherung der alten Seite, Einbau auf einem eigenen Branch, Vorschau zum Prüfen. Live ging es dann über drei Pull Requests, jeder mit meinem ausdrücklichen Go: zuerst die Startseite, dann das gemeinsame Motion-Kit, zuletzt die Unterseiten zusammen mit der Gesamtprüfung.
Wo wir gelandet sind
Die Messung auf dem fertigen Stand, Lighthouse mobil:
| Seite | Wert |
|---|---|
| Startseite | 98 |
| /leistungen | 96 |
| /projekte | 96 |
| /die-crew | 94 |
| /blog | 99 |
| /videoproduktion | 98 |
| /design | 98 |
| /event | 94 |
| /frankfurt | 99 |
| /kontakt | 100 |
Alle Ziele der Messlatte sind erreicht. Seit dem 12. Oktober ist die neue Website live, und ein Lighthouse-Gate prüft diese zehn Seiten bei jeder Änderung. Fällt eine unter ihre Grenze, geht die Änderung nicht durch. Das ist der eigentliche Gewinn: Die Werte sind kein Zufallsfoto vom Launch-Tag, sie werden gehalten.
Was du davon intern mitnehmen kannst
Wenn bei dir eine Website mit mehr Bewegung, Video oder 3D ansteht, sind das die drei Argumente, die bei uns getragen haben:
- Eine Messlatte vor dem ersten Entwurf. Lighthouse-Werte pro Seite und ein JavaScript-Budget machen aus „sieht toll aus, aber …“ eine überprüfbare Abnahme.
- Video als Pipeline, nicht als Upload. Formate, Größen und Poster einmal festlegen, dann gilt es für jeden Film.
- Bewegung mit Regeln. Schwere Technik nur dort, wo sie wirkt, eine ruhige Fassung für alle anderen. Das schützt Ladezeit und Barrierefreiheit gleichzeitig.
Das Prinzip dahinter gilt nicht nur für Websites, sondern für jedes System, das wir bauen: erst messen, dann bauen, dann dauerhaft prüfen. Mehr dazu, wie wir Abläufe und Systeme aufsetzen, steht unter AI-Transformation, alle Leistungen unter Leistungen.
Wenn du wissen willst, wo deine eigene Website heute steht, mach den Sichtbarkeits-Check. Du bekommst einen Report, mit dem du intern argumentieren kannst, bevor überhaupt ein Gespräch nötig ist.