G-Star Raw

Proving Customers with a Flawless in-store Experience

The Company

Since 1989, G-Star RAW has pushed the boundaries of denim design. G-Star RAW’s ambition is to be recognized as the leading denim company that creates tomorrow’s classics. Their mission is to inspire people to be game-changers by being one themselves.

Our Ambition

Reducing the re-renders by 80% with React Redux and custom context and providing customers with a flawless in-store shopping experience.

Frameworks

The checkout is written in React v17 using functional components. Our colleagues use Redux and Reselect for state-management, among other libraries such as Redial and Styled Components. The frontend is very JavaScript-heavy, using modern ES2020 features such as async and await, optional chaining and nullish coalescing.

The Assignment

Optimizing the performance of the React application used for G-Star RAW webshop checkout, with the goal of accelerating customer experience.

The Results

  • 70-85% less component re-renders on average

  • 80-97% less blocking time on average

  • ~8% better Speed Index (in Lighthouse)

  • Separation of concerns by using custom hooks and container / presentational components

  • Cleaner and more maintainable codebase

  • We discovered and fixed a handful of previously undetected bugs

  • Interaction with checkout forms feels noticeably faster