Case study: Puma Mexico Becomes the Fastest Puma Store After Adopting ScandiPWA

“Partnering with Scandiweb’s team allowed us to bring a site to market that has 3 – 4 times better performance than any other site in the client’s portfolio. Our backend engineers collaborated with their frontend team throughout the entire project to develop solutions that met the business needs, were extensible and easy to maintain, and ultra-fast. We will gladly partner with them on future projects.”

Jason Barney
Chief Architect, Evaporate IT

Business overview

Puma, the world’s leading sports brand, is a tireless innovator and a top choice for the fastest athletes on the planet. 

The business is constantly expanding to new international markets, with Puma Mexico being a recent addition to the company’s family of eCom stores. 

Having previously used a full Magento setup to run their websites, the stakeholders were looking to go a step further and have mx.puma.com optimized for uncompromising performance with PWA.

The decision to implement ScandiPWA as a frontend for the new store was based on a few important benefits:

• Being a Magento-first PWA theme it would integrate seamlessly with the rest of the client’s Magento-based business workflow;
• It is optimized for extremely fast operation out-of-the-box;
• It allows for easy 3rd party integrations with most of the extensions available through the ScandiPWA marketplace;
• Quick set-up and short development cycle mean that the final product can be delivered without unnecessary delays.

Challenge

Puma Mexico was the first among the company’s international websites to deviate from the conventional Magento architecture and adopt PWA. Thus, we had to make sure the transition from the original Magento theme was as smooth as possible. On top of that, the website had to be made reliable and ready for the projected high load from day one.

In order to effectively implement a ScandiPWA storefront, a few functional improvements were necessary to assure its compatibility with the legacy Magento 2 code. Additionally, the basic storefront functionality had to be extended via a number of integrations for content management, payment processing, and analytics.

Originally, the project was intended mainly as a frontend development initiative. However, the initial scope was expanded to include several backend and infrastructure operations.

Solution 

First, we replicated the existing Magento 2 theme on the ScandiPWA frontend. Further, we customized and extended ScandiPWA to match business objectives. By adding several functional and UI improvements, we were able to secure high levels of performance, customer experience, and backend functionality:

• Added support for data structure used across all legacy stores;
• Made legacy Magento 2 code PWA-compatible;
• Mapped the entire UX onto the PWA frontend and optimized it to work with Fastly cache.

Additional 3rd party integrations include:

• Blackbird Content Manager integration;
• Adyen 3D Secure authentication development;
• Fully custom GTM setup implementation;
• Klevu search with business-specific attribute handling implementation.

On the server-side, we performed a thorough GraphQL query optimization. Not only has it allowed us to ensure faster response times, but also helped add further UI detailing, such as template-tailored page loading.

On top of that, we provided the infrastructure set-up. For hosting, we chose ReadyMage over the competition, due to its out-of-the-box support of a number of PWA-specific features (such as Prerender.io).

Result 

Puma became the first major sports brand to launch its eCommerce store on ScandiPWA. Puma Mexico is currently the most technologically up-to-date and the fastest among the company’s international websites.

A new improved PWA copy of the existing Magento theme was created in 3 months of active development. First orders were successfully received and processed in a matter of minutes after the soft launch.

ScandiPWA was enhanced, achieving impressive Lighthouse scores:

• 90+ on Mobile;
• 98 on Desktop.

Found this information useful? Looking to supercharge your website’s performance with PWA? Let us help you! Any questions? Feel free to get in touch: book a free consultation or schedule a call!

Share on: