A Front-End Migration to Astro 🚀 Boosting eCom Performance and Conversions for Tracksmith
Based in Boston USA, Tracksmith are a premium running apparel brand dedicated to celebrating and supporting amateur and expert runners alike. We have worked in partnership with Tracksmith since 2016, supporting them on various digital initiatives including a successful migration to headless Shopify Plus architecture. More recently, we helped them migrate web framework from Nuxt to Astro , which ultimately led to improvements in conversion rate and abandonment rates.
The Challenge: Executing a time-sensitive & necessary migration
Previously, the Tracksmith store was built on Nuxt 2.0 and Vue, with the former coming to end of life. This prompted an evaluation of whether to upgrade to Nuxt 3.0 or if this presented an opportunity to shift to a new framework. A quick decision was required to not impact security on the live site, and if left this would further impact the team’s velocity to continue to iterate on the storefront. When reviewing Astro as an alternative framework to Nuxt we anticipated several benefits; performance, improved time-to-feature, plus addressing security vulnerabilities.
The Solution: Migrating to a framework to support future growth
At the start of this project, we targeted 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.
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 eCommerce store. Astro reduces reliance on third-party services and the amount of javascript required, reducing overall site complexity.
As part of the migration, we also evaluated a move away from a Single Page App (SPA) to a lightweight Multi Page App (MPA). By reviewing various attributes to this decision including performance, UX, initial load time, engineering complexity & long-term maintenance, we decided to move Tracksmith.com to an MPA.
Why Astro?
Astro is a highly scalable web framework designed to create fast, content-focused websites. Using ‘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 sites 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. Astro handily supports every major UI framework, for long-term maintainability.
Key results
Our analysis shows significant improvement in Core Web Vital scores pre and post-migration across various device tests. Following the Astro rollout, data from our AB split test shows the migration had the following impact:
+5% improvement in conversion rate
+8% improvement in abandonment rates
+10% improvement in add-to-cart rates