Website-Performance mit Astro und Storyblok

In der sich ständig weiterentwickelnden Welt der Webentwicklung ist Performance entscheidend. Wir nehmen Sie mit auf eine aufschlussreiche Reise: von den Herausforderungen mit Next.js über die strategische Entscheidung für Astro bis zur wegweisenden Integration von Storyblok in den Content-Workflow der Incresco-Website.

Erfahren Sie, wie uns diese Entscheidungen zu einem beeindruckenden Performance-Score von 99 % führten.

Die Herausforderungen mit Next.js

Unsere Geschichte beginnt mit Next.js, einem weithin anerkannten Framework. Als wir uns intensiver damit beschäftigten, erkannten wir jedoch seine Grenzen – insbesondere bei der mobilen Performance. Der Wunsch nach mehr Geschwindigkeit brachte uns dazu, Alternativen zu prüfen, die die Reaktionsfähigkeit unserer Website auf ein neues Niveau heben konnten. Den Performance-Score vor der Überarbeitung zeigt dieser Beitrag auf LinkedIn.

Warum wir uns für Astro entschieden

Unter den verschiedenen Technologien wurde Astro zu unserem Hoffnungsträger. Das Versprechen von dynamischem Pre-Rendering und unübertroffener Geschwindigkeit überzeugte uns davon, dass es die richtige Wahl war. Mit Qwik von Builder.io gab es allerdings einen ernst zu nehmenden Gegenkandidaten. Qwik zeigte Potenzial für künftige Projekte, doch für unser damaliges Vorhaben war Astro zu attraktiv, um darauf zu verzichten.

Website-Performance mit Astro und Tailwind

Nachdem unser Technologie-Stack feststand, begannen wir, unsere Website neu zu denken. Die Verbindung der Funktionen von Astro mit dem schlanken Styling von Tailwind führte zu einer Benutzeroberfläche, die Ästhetik und Geschwindigkeit vereinte. Zusätzlich nutzten wir Astros native Unterstützung für Blogs über ein auf Content-Ordnern basierendes CMS.

Der Durchbruch bei der Website-Performance

Wir stellten die erneuerte Website auf den Prüfstand und analysierten ihre Performance sorgfältig anhand der Erkenntnisse aus zwei leistungsfähigen Werkzeugen: Performance Analytics von PageSpeed Insights und Builder.io.

Unsere Reise begann vielversprechend mit einem beeindruckenden Score von über 90. Auf dem Weg zur Perfektion zeigte sich jedoch ein Hindernis: Skripte von Drittanbietern beeinträchtigten den Wert.

Mit Partytown zu einem nahezu perfekten Score

Wir untersuchten mehrere Möglichkeiten, die Auswirkungen dieser Skripte zu verringern. Erneut kam uns Builder.io mit Partytown zu Hilfe. Diese innovative Lösung verlagerte alle rechenintensiven Skripte aus dem Main-Thread in einen Worker-Thread. Das Ergebnis war bemerkenswert: ein nahezu perfekter Score, der unsere strategischen Entscheidungen bestätigte. Unsere Arbeit zahlte sich aus, und wir konnten deutlich sehen, dass unsere Seiten auf Mobilgeräten rasend schnell luden.

Die Herausforderung beim Content-Management

Mit jedem Erfolg entstehen jedoch neue Herausforderungen. Der Content-Ordner für die Verwaltung unserer Blogbeiträge war zwar entwicklungsfreundlich, erschwerte aber den Arbeitsalltag unserer Teams in Marketing, Business-Analyse und Vertrieb. Das Erlernen von MDX und die Verwaltung von Pull Requests auf GitHub wurden zu einem Engpass, den wir nicht ignorieren konnten.

Wie Storyblok unseren Content-Workflow veränderte

Angesichts dieser Herausforderungen ließen wir uns von unseren Erfahrungen mit Storyblok in einem unserer Enterprise-Projekte für EF inspirieren. Dort unterstützt die Anwendung mehr als 15 Sprachen und über 1000 Seiten in Storyblok. Wir erkannten das Potenzial für ein effizienteres Content-Management und wagten die Integration in unsere eigene Website. Diese Entscheidung verringerte nicht nur die Abhängigkeit von Entwicklerinnen und Entwicklern, sondern ermöglichte auch nichttechnischen Teams, Inhalte mühelos beizutragen und zu verwalten.

Unser Wechsel zu Vercel und SSR

Diese Erfahrung veranlasste uns außerdem, unsere Website zu Vercel zu migrieren und damit Server-Side Rendering (SSR) zu ermöglichen. Der Schritt bekräftigte unser Ziel, blitzschnelle und SEO-freundliche Web-Erlebnisse bereitzustellen. Mit SSR sind wir in der Lage, dynamische Inhalte zügig auszuliefern und unseren Nutzerinnen und Nutzern bestmögliche Interaktionen mit der Website zu bieten.

Die nächsten Schritte mit Astro, Qwik und React.js

Unsere Reise endet hier nicht. Die Erfahrungen bilden ein Sprungbrett, um dieses Wissen auf die Websites unserer Partner zu übertragen und neueste Technologie-Stacks zu erkunden. Dieser Blogbeitrag dokumentiert eine Transformation, die mit dem Streben nach Performance begann und zur Verbindung von Astro und Storyblok führte. Auf unserem weiteren Weg wollen wir die bemerkenswerte Performance unserer Website nicht nur erhalten, sondern weiter steigern. Wir werden weiterhin unterschiedliche Stacks untersuchen und uns dabei besonders auf Qwik und Astro sowie React.js konzentrieren, die uns neue Wege zu Innovation und Exzellenz in der Webentwicklung eröffnen.

Sprechen Sie mit uns über Website-Performance

Bei Incresco setzen wir uns für Innovation und Exzellenz ein. Ganz gleich, ob Sie als Entwicklerin oder Entwickler Inspiration suchen oder als Fachkraft Content-Herausforderungen bewältigen: Unsere Reise bietet wertvolle Einblicke in die komplexe Welt der Webentwicklung.