Leuchtmoment: WebGL-Showcase mit Lighthouse 100

Eigenes Projekt – kein Kunden-Case. Leuchtmoment ist ein eigener Showcase rund um 3D-Mapping. Wir zeigen ihn hier als Beleg dafür, dass aufwendige Optik und maximale Performance kein Widerspruch sind.

Ausgangslage

Aufwendige Web-Optik gilt als Performance-Killer: Wer 3D und Animation will, kauft sich – so die verbreitete Annahme – lange Ladezeiten ein. Mit Leuchtmoment, einem eigenen Showcase rund um 3D-Mapping, wollten wir das Gegenteil belegen.

Engpass

Ein WebGL-Hero – also eine in Echtzeit gerenderte 3D-Szene direkt im sichtbaren Einstiegsbereich – ist technisch das Anspruchsvollste, was man einer Startseite zumuten kann. Genau deshalb eignet er sich als Belastungsprobe.

Hebel

Astro als Framework mit dem Grundsatz „kein unnötiges JavaScript”: Die 3D-Szene bekommt exakt die Ressourcen, die sie braucht – der Rest der Seite bleibt statisch und schnell.

Umsetzung

• Framework: Astro-Site, statisch ausgeliefert.
• WebGL-Hero: in Echtzeit gerenderte 3D-Szene im Einstiegsbereich der Seite.

Ergebnis

Lighthouse-Performance-Wert 100 (Desktop) – trotz WebGL-Hero. Der Showcase belegt, was wir auch in Kundenprojekten anstreben: Gestaltung, die auffällt, auf einem technischen Fundament, das nichts davon bezahlt.