Transitioning from Gatsby to Next.JS for Unmatched Site Performance

Introducing Alpro, trend-breaking pioneer

Danone's Alpro has been leading the plant-based world for over 40 years with innovative drinks, yogurt alternatives, and plant-based desserts. When they started, hardly anyone talked about a plant-based lifestyle, and discussions about the benefits of reducing animal products in one’s diet were rare. However, the world's biggest transformations come from breaking the trend, and Alpro is the perfect example.

When thinking differently is part of your DNA, it seeps through to every layer of the organization. From cutting-edge product development and sustainable packaging to adopting a composable web architecture, ahead of the curve. By embracing a more flexible web approach, Alpro opened up new opportunities for architectural experimentation, rewriting the online rules to their advantage.

Overcoming Challenges: Alpro's Transition to a Modern Front-End Framework

Starting in 2019, Alpro relied on custom-made architecture for their website. The Alpro.com website was running on Contentful, a headless CMS, which limited the front-end frameworks to choose from. Eventually Alpro landed on an integration with Gatsby, a react-based front-end framework. Initially, this setup worked really well but, as the site grew more complex, so did the challenges. Alpro experienced:

Executing changes or fixes often introduced new problems, making it nearly impossible to scale, adopt new technologies or switch platforms. Additionally, these challenges also led to internal frustration, consuming a significant part of Alpro’s UX/UI budget and impacting user experience. With slow loading speeds and poor web performance, Alpro’s online experience was driving web visitors away.

Alpro's Transition to a New Front-End Framework

Alpro, a brand committed to leading positive change and engaging with users, knew they couldn't remain at the forefront while combating these challenges. They needed a modern, flexible approach to web development. That's when Bejamas stepped in.

We conducted a thorough audit, identified the pain points, and guided them toward a better, more exciting future for their website.

Step 1: Get crystal-clear understanding of current setup & challenges

Good preparation makes for smooth execution. Strong and purposeful communication with our clients, which usually starts with a kick-off workshop, helps us dive deep into their needs, goals, expectations, and opportunities.

Building on this, Bejamas conducted several audits, which is crucial for identifying any existing issues, potential risks, or gaps in the current systems and processes. This proactive approach allowed the project team to address concerns early, ensuring a solid foundation for success and preventing costly, time-consuming problems down the line.

Key Audits Conducted

Step 2: Define solution and indicators of success

Throughout the first step, Next.js emerged as the go-to solution for Alpro, addressing the limitations they faced with Gatsby. Unlike Gatsby, which resulted in long build times, complex GraphQL integration, and technical complexity, Next.js offers both static and server-side site rendering, seamless API integrations, and a more adaptable code structure, ensuring better scalability and performance for Alpro's growing website.

Solution key features for Alpro

To guide our digital makeover, we also established clear and measurable KPIs. For this phase of Alpro’s digital overhaul, we focused on the Core Web Vitals such as performance, accessibility, and SEO. We set the objective to have all Core Web Vitals above 90% after deployment.

By defining these KPIs, we ensured each task in the backlog aligned with our overall goals.

Step 3: Deployment of the solution

We used Netlify's CI/CD pipeline connected to GitHub for automated builds and continuous integration. Our deployment process allowed for seamless releases and efficient updates throughout the transition without downtime.

Specific Deployment Elements

Step 4: Measure the outcome

In our final step, we assessed the results against our predefined objectives to determine the project's success and impact. This evaluation helped identify areas of improvement, ensured accountability, and provided valuable insights for future projects.

The results were outstanding.

On website performance:

On user experience:

To illustrate the significant improvements in key performance metrics, such as Core Web Vitals, here is a comparison of the before and after values:

Performance improved by 127.9%

Largest Contentful Paint (LCP)

Explanation: LCP measures the time it takes for the largest content element visible within the viewport to load. By optimizing image delivery and utilizing Next.js's improved caching strategies, we significantly reduced LCP. This enhances the user's perceived load time and overall experience, making the site feel faster and more responsive.

First Contentful Paint (FCP)

Speed Index (SI)

Web accessibility improved by 10.6%,

Google Lighthouse Accessibility Scores

Contrast Ratios and Text Readability

SEO metrics saw a 17.6% enhancement

Page Load Time

Cumulative Layout Shift (CLS)

Total Blocking Time (TBT)

Conclusion: Next.js & Contentful, the right path forward in a headless future.

There’s no “I” in “Team”.

Successfully collaborating with Alpro’s Global Activation team:

Bejamas rockstars: