Revolutionierung der Website-Performance: Unsere Reise mit Storyblok und Astro

Einführung:

In der ständig weiterentwickelnden Welt der Webentwicklung steht die Leistung an erster Stelle. Ich werde Sie auf eine aufschlussreiche Reise mitnehmen, die die Herausforderungen beleuchtet, mit denen wir konfrontiert waren. Next.js. die strategische Entscheidung, anzunehmen Astro, und die transformative Integration von Storyblok ist ein Headless Content Management System (CMS), das es Entwicklern und Redakteuren ermöglicht, Inhalte einfach zu erstellen, zu verwalten und zu veröffentlichen. Mit Storyblok können Benutzer Inhalte in einer benutzerfreundlichen Oberfläche erstellen und dann über eine API in ihre Websites oder Anwendungen integrieren. in unseren Content-Workflow für Incresco WebseiteSchnallen Sie sich an, während wir enthüllen, wie diese Entscheidungen dazu geführt haben, dass wir einen beeindruckenden Website-Performance-Score von 99% erreicht haben.

Die Herausforderungen von Next.js:

Unsere Geschichte beginnt mit Next.js, einem weit verbreiteten Framework. Doch je tiefer wir eintauchten, desto mehr erkannten wir seine Grenzen, insbesondere hinsichtlich der mobilen Leistung. Das Streben nach Geschwindigkeit drängte uns dazu, Alternativen zu erkunden, die die Reaktionsfähigkeit unserer Website auf das nächste Level heben könnten. Wenn Sie unseren Leistungswert vor der Überarbeitung sehen möchten, schauen Sie sich diesen Artikel an. LinkedinBitte geben Sie einen Text ein, den ich für Sie übersetzen soll.

Der Astro-Faktor:

Inmitten der Auswahl verschiedener Technologien erwies sich Astro als unser Hoffnungsschimmer. Sein Versprechen von dynamischem Pre-Rendering und unübertroffener Geschwindigkeit überzeugte uns, dass es die perfekte Wahl war. Doch die Entscheidung für Astro war nicht ohne ihren Gegenpart. Qwik von Builder.ioObwohl Qwik für zukünftige Projekte vielversprechend war, war die Anziehungskraft von Astro für unser aktuelles Vorhaben zu verlockend, um widerstehen zu können.

Erstellen mit Astro und Tailwind:

Mit unserer Technologie-Grundlage festgelegt, haben wir uns auf eine Reise begeben, um unsere Website neu zu gestalten. Die Verschmelzung der Fähigkeiten von Astro und Tailwind's Die optimierte Gestaltung führte zu einer Benutzeroberfläche, die sowohl Ästhetik als auch Geschwindigkeit ausstrahlte. Um das Ganze abzurunden, haben wir Astro's nativen Support für Blogs durch ein Content-Ordner-basiertes CMS genutzt.

Die Leistungserkenntnis:

Wir haben unsere überarbeitete Website auf die Probe gestellt, indem wir ihre Leistung sorgfältig analysiert haben, unter Verwendung von Erkenntnissen, die aus zwei leistungsstarken Tools gesammelt wurden - Performance Analytics von. Pagespeed-Insights und Builder.ioBitte geben Sie einen Text ein, den ich übersetzen soll.

Unsere Reise begann mit einem hohen Niveau, mit einer beeindruckenden Punktzahl von über 90. Allerdings stellte sich bei unserem Streben nach Perfektion ein Hindernis heraus - unsere Drittanbieter-Skripte warfen Schatten auf unsere Punktzahl.

Die Partytown-Lösung:

Wir haben mehrere Optionen erkundet, um die Auswirkungen dieser Skripte zu mildern, und einmal mehr, Builder.io kam uns zu Hilfe mit PartystadtDiese innovative Lösung verlagerte alle ressourcenintensiven Skripte vom Hauptthread auf einen Worker-Thread. Die Ergebnisse waren nichts weniger als bemerkenswert – ein nahezu perfektes Ergebnis, das unsere strategischen Entscheidungen bestätigte. Unsere Bemühungen wurden belohnt, und wir konnten deutlich sehen, wie unsere Seiten auf mobilen Geräten blitzschnell geladen wurden.

Das Inhaltsdilemma:

Jedoch bringen mit jedem Erfolg auch neue Herausforderungen. Die Einführung eines Inhaltsordners für das Blog-Management, obwohl entwicklerfreundlich, stellte unsere Marketing-, Business-Analyse- und Vertriebsteams vor Schwierigkeiten. Das Erlernen von MDX und das Verwalten von GitHub-Pull-Anfragen wurde zu einem Engpass, den wir nicht ignorieren konnten.

Enter Storyblok:

Angesichts dieser Herausforderungen ließen wir uns von unserer Erfahrung mit der Verwendung von Storyblok für eines unserer Enterprise-Projekte EF inspirieren, bei dem die Anwendung 15+ Sprachen und 1000+ Seiten in Storyblok unterstützt. Da wir ihr Potenzial erkannten, das Content-Management zu optimieren, wagten wir es, sie in unsere Website zu integrieren. Diese Entscheidung reduzierte nicht nur die Abhängigkeit von Entwicklern, sondern ermöglichte es auch nicht-technischen Teams, mühelos Inhalte beizutragen und zu verwalten.

Unser Umzug zu Vercel und SSR:

Diese Erfahrung hat uns auch dazu veranlasst, unsere Website auf umzustellen. VercelDurch die Aktivierung der Server-seitigen Rendering (SSR)-Funktionen haben wir unser Engagement für die Bereitstellung von blitzschnellen, SEO-freundlichen Web-Erlebnissen weiter verstärkt. Mit SSR sind wir in der Lage, dynamische Inhalte schnell zu liefern und sicherzustellen, dass unsere Benutzer die bestmöglichen Interaktionen mit unserer Website haben.

Was kommt als nächstes:

Aber unsere Reise endet hier nicht. Es ist ein Sprungbrett, um diese Erfahrung auf unsere Partnerseiten zu übertragen und die neuesten Technologiestacks zu erkunden. Unser Blogbeitrag ist eine Chronik der Transformation - eine, die mit der Verfolgung von Leistung begann und zur Verschmelzung von Astro und Storyblok führte. Während wir voranschreiten, streben wir nicht nur danach, die bemerkenswerte Leistung unserer Website aufrechtzuerhalten, sondern auch zu verstärken. Wir werden weiterhin verschiedene Stacks erkunden, insbesondere mit Fokus auf Qwik und Astro sowie. React.js was es uns ermöglicht, Türen zur Innovation und Exzellenz in der Webentwicklung zu öffnen.

Kontaktiere uns:

Bei Incresco sind wir bestrebt, Innovation und Exzellenz zu fördern. Egal, ob Sie ein Entwickler sind, der nach Inspiration sucht, oder ein Profi, der sich mit Inhalten auseinandersetzt, unsere Reise bietet wertvolle Einblicke in die Navigation durch die komplexe Welt des Webentwicklungs.