Bei farbenmeer haben wir vor einiger Zeit ein Rebranding durchgeführt, das mit einer vollständigen Neugestaltung unserer Website einherging – einschließlich eines umfangreichen Design-Overhauls und vieler neuer Inhalte. Wir sahen darin die Gelegenheit, unsere Website mit dem neuesten Tech-Stack auf den aktuellen Stand zu bringen und gleichzeitig eine Reihe neuer Tools zu evaluieren, bevor wir sie unseren Kund:innen empfehlen. Ich habe im vergangenen Jahr die technische Konzeption, Architektur und einen großen Teil der Umsetzung dieses Projekts geleitet.
Seit unserem Soft-Launch wurden wir von mehreren Leuten gefragt, warum sich unsere Website so „snappy“ – also schnell und reaktionsfreudig – anfühlt. Hier ist die Antwort:
Einführung
Hinter der Performance unserer Website steckt kein Zaubertrick. Sie ist das Ergebnis erheblicher technischer Arbeit eines ganzen Teams sehr erfahrener Frontend-Entwickler:innen. Wenn sich auch deine Website so anfühlen soll – kontaktiere uns!
Technologie-Stack
Unsere Website basiert auf Next.js und verwendet Tailwind CSS (erweitert mit CSS Modules) für das Styling. Sämtliche Inhalte werden in DatoCMS verwaltet, und wir nutzen Plausible Analytics, um minimale Statistiken zur Websitenutzung zu erhalten – ohne Benutzer-Tracking oder Leistungseinbußen. Keine dieser Entscheidungen ist jedoch entscheidend dafür, warum sich die Seite so schnell anfühlt.
Neben diesen grundlegenden technischen Entscheidungen haben wir besonders darauf geachtet, nur wirklich notwendige Abhängigkeiten einzuführen und die ausgelieferten JavaScript-Bundles zur Laufzeit so klein wie möglich zu halten.
Erster Seitenaufruf
Um Inhalte so schnell wie möglich anzuzeigen, nutzen wir die statischen Optimierungsfunktionen von Next.js. Dabei werden die meisten Daten bereits zur Build-Zeit abgerufen und die Seiten als statisches HTML gerendert. Diese Inhalte werden über das CDN von Vercel ausgeliefert, um die Nutzer so schnell wie möglich zu erreichen.
Unsere Website enthält viele Assets – die meisten davon sind handgezeichnete Skizzen. Diese Zeichnungen liegen als SVG-Dateien vor und wurden mit SVGO – teils auch manuell direkt im Markup – optimiert.
Für alle anderen Bilder nutzen wir die integrierte Bildoptimierung von Next.js, um diese mit der bestmöglichen Kompression und in optimaler Größe für das jeweilige Gerät bzw. den Viewport auszuliefern.
Auch das Laden der Schriftart ist optimiert: Es werden nur die tatsächlich benötigten Zeichen der wunderbaren CI-Schrift Aeonik geladen.
Und dann ist da noch der Vorhang.
Der Vorhang
Der Vorhang ist eigentlich ein Designelement mit einem dramatischen Effekt beim Herabfallen – aber er erfüllt noch einen weiteren Zweck:
Da das Vorhang-SVG direkt in die Seite eingebettet ist und zu den ersten Elementen gehört, die geladen werden, kann der Browser fast sofort eine einfarbige Fläche darstellen. Die Seite bleibt leer, während im Hintergrund der Inhalt des ersten Viewports geladen wird. Sobald das JavaScript-Bundle im Browser ausgeführt ist, fällt der Vorhang und gibt eine vollständig gerenderte, interaktive Seite frei.
So überbrücken wir die visuell störende Phase, in der üblicherweise eine unvollständige Seite gezeigt wird, während Inhalte noch nachgeladen werden. Stattdessen wirkt der Ladevorgang schnell – ganz ohne ein klassisches Ladesymbol.
Weitere Seitenaufrufe
Die Navigation innerhalb unserer Website erfolgt über die clientseitige Navigation von Next.js – also direkt im Browser. Das bedeutet: Anstelle einer vollständigen HTML-Seite werden bei jedem Seitenwechsel nur die notwendigen Daten und etwas JavaScript nachgeladen.
Das ist die Art von Komplexität, über die sich heutzutage viele beschweren oder die gerne belächelt wird. Doch sie sorgt dafür, dass sich Seitenwechsel butterweich und nahtlos anfühlen. Natürlich bringt clientseitige Navigation gar nichts, wenn eine Seite von einem langsamen Backend oder großen Assets abhängt. Sie funktioniert nur in Kombination mit all den anderen Optimierungen, die die Gesamtgröße des Bundles reduzieren.
Individueller Code vs. flexible Inhalte
Jedes Team, das an einer Website arbeitet, steht vor dem gleichen Konflikt: wieviel Freiheit brauchen Redakteur:innen bei der Inhaltspflege und wieviel Kontrolle braucht es, um spezialisierte, reaktionsschnelle und optimierte Komponenten zu entwickeln. Für uns als Entwicklungsagentur liegt der ideale Schwerpunkt eindeutig auf der technischen Seite.
Dank relativ statischer Inhalte, einem moderaten inhaltlichen Gesamtumfang und einem sehr detailverliebten Design war für uns schnell klar, worauf wir den Fokus legen sollten.
