A Front-End Migration to Astro 🚀 Boosting eCom Performance and Conversions for Tracksmith

Based in the US, Tracksmith are a premium active-wear brand dedicated to celebrating and supporting amateur and expert runners alike. Rotate° has worked in partnership with Tracksmith since 2016, supporting them on various digital initiatives including a successful migration from a monolithic to headless Shopify Plus architecture. More recently, we helped them migrate web frameworks from Nuxt to Astro which ultimately led to increases in Conversion Rate (CR) and Average Order Value (AOV).

The Challenge: Executing a time-sensitive migration whilst planning for the future

Tracksmith’s previous framework relied on Nuxt2.0 and Vue, both of which were coming to end of life. In the short term, choosing not to take action would result in a growing number of unresolvable issues and bugs. In the mid-long term, reduced velocity and the need for a complete rebuilt would be an inevitability. Tracksmith had 6 weeks to implement a new solution that would keep their website up-to-date and decrease vulnerability whilst also supporting their evolution later down the line.

The Solution: Migrating to a supported framework to support future performance

By addressing this early on, Tracksmith had more flexibility to choose what approach to take and had time to properly weigh up the trade-offs between a short and long migration period. We supported them with this decision, helping them understand how each approach would impact their roadmap and future plans. A short migration would have a faster turn-around time but this a less data-driven approach and would require putting other projects on hold. A long migration would allow for more time to leverage data and validate changes but this is a much longer process during which Tracksmith would need to keep multiple systems in sync during A/B testing. In the end, Tracksmith opted for a short migration that was successfully completed across a 6 week period.

Additionally, there was a desire to move away from a Single Page App (SPA) to a lightweight Multi Page App (MPA). This shift would improve performance and reliability by allowing the site to refresh as the customer moved from page to page rather than loading all pages at once which can slow site speed down. Given the clear need for a migration, it was a good opportunity for Tracksmith to also reassess and optimise their front-end framework.

At the start of this project, we helped Tracksmith define 4 key goals to drive this migration forward:

1. Performance – increasing site speed by reducing the amount of Javascript being added to the frontend and leveraging built-in browser APIs to improve SEO.

2. Maintainability – improving testing capabilities with Astro’s decoupled nature. This would also allow for better portability going forward.

3. Stability – unlocking a more robust site with less bugs and reduced downtime by leveraging Astro’s Island Architecture.

4. Velocity – increasing the speed and ease of modifying and maintaining the website. Astro reduces reliance on third-party services and the amount of javascript required, reducing overall site complexity.

Why Astro?

Astro is a highly scalable web framework designed to create fast, content-focused websites. Using an “Island Architecture”, each page element is independent, allowing for better resilience, maintainability and robustness. For a smoother and faster experience, Astro only loads the essential Javascript components such as navigation menus, search bars and responsive design code that ensures your website adapts to different screen sizes. Whereas other frameworks often load every javascript component even if it might not be used in every site visit. This can slow down site speed considerably. These “unnecessary” features could include expandable sections like drop down menus that aren’t always visible or off-screen animations that are only triggered when a user scrolls down or hovers over a specific area.

Key results 

During the 6-week migration period, we also supported Tracksmith with new site improvements and post-project analysis has shown promising results. This includes YOY revenue growth by +26% which also indicates that Tracksmith have seen over 100% ROI within the 6 weeks since the migration went live. Further key results include:

• 33% improvement in checkout abandonment rates

• +$12 increase in Average Order Value (AOV)

• +20% increase YoY in Conversion Rate (CR)