)
Introduction:
In the ever-evolving world of web development, performance reigns supreme. I will take you on an illuminating journey that traverses the challenges we faced with Next.js, the strategic choice to embrace Astro, and the transformative integration of Storyblok into our content workflow for Incresco website. Buckle up as we unveil how these decisions led us to achieve a staggering 99% site performance score.
The Hurdles of Next.js:
Our story begins with Next.js, a widely acclaimed framework. However, as we delved deeper, we realized its limitations, particularly concerning mobile performance. The need for speed nudged us towards exploring alternatives that could catapult our site's responsiveness to the next level. If you want to see our performance score before revamping, checkout this article in Linkedin.
The Astro Factor:
Amidst the choices of various technologies, Astro emerged as our beacon of hope. Its promise of dynamic pre-rendering and unmatched speed convinced us that it was the perfect fit. But the decision to go with Astro was not without its counterpart, Qwik by Builder.io. While Qwik showed promise for future projects, Astro's allure for our current endeavor was too enticing to resist.
Building with Astro and Tailwind:
With our technology stack solidified, we embarked on a journey to reimagine our website. The amalgamation of Astro's capabilities and Tailwind's streamlined styling resulted in an interface that exuded both aesthetics and speed. To top it off, we harnessed Astro's native support for blogs through a content folder-based CMS.
The Performance Epiphany:
Putting our revitalized website to the test, we meticulously analyzed its performance using insights gathered from two powerful tools—Performance Analytics from Pagespeed insights and Builder.io.
Our journey began on a high note, with an impressive score exceeding 90. However, our quest for perfection revealed a hurdle—our third-party scripts were casting shadows on our score.
The Partytown Solution:
We explored multiple options to mitigate the impact of these scripts, and once again, Builder.io came to our aid with Partytown. This innovative solution relocated all intensive scripts from the main thread to a worker thread. The results were nothing short of remarkable—a near-perfect score that validated our strategic decisions. Our efforts were rewarded, and we could clearly see our pages loading blazing fast on mobile devices.
The Content Conundrum:
However, with every success comes new challenges. The introduction of a content folder for blog management, while developer-friendly, posed difficulties for our marketing, business analysis, and sales teams. Learning MDX and managing GitHub pull requests became a bottleneck that we couldn't ignore.
Enter Storyblok:
Faced with these challenges, we drew inspiration from our experience with using Storyblok for one of our enterprise projects EF, where the application supports 15+ languages and 1000+ pages in Storyblok. Recognizing its potential to streamline content management, we made the audacious move to integrate it into our website. This decision not only reduced developer dependencies but also empowered non-technical teams to effortlessly contribute and manage content.
Our Move to Vercel and SSR:
This experience also prompted us to transition our website to Vercel, enabling Server-Side Rendering (SSR) capabilities. This move further solidified our commitment to providing lightning-fast, SEO-friendly web experiences. With SSR in place, we're equipped to deliver dynamic content swiftly, ensuring our users have the best possible interactions with our site.
What's Next:
But our journey doesn't end here. It's a springboard to take this experience to our partner sites and explore the latest tech stacks. Our blog post is a chronicle of transformation—one that began with the pursuit of performance and led to the convergence of Astro and Storyblok. As we forge ahead, we aim not only to sustain but also to amplify our site's remarkable performance. We will continue to explore different stacks, especially focusing on Qwik and Astro along with React.js which allow us to open doors to innovation and excellence in web development.
Reach out to us:
At Incresco, we are committed to innovation and excellence. Whether you're a developer seeking inspiration or a professional navigating content challenges, our journey offers valuable insights into navigating the complex landscape of web development.