· 4 min read

Case Study: Building PWA for Magento 2

Building a Progressive Web Application for Magento 2 to improve e-commerce customers satisfaction and developer teams experience.

Introduction

In 2018, an idea of PWA storefront for e-commerce were growing. It was potentially offering a better loading time, faster development speed for the teams and more application-like feeling without hiring a full mobile team. The first attempt did not meet these criteria.

In 2019 another, more successfull attempt was made. Later this year a major retailer operating in a region with slow internet connectivity faced a significant challenge: delivering a content-rich and engaging e-commerce experience without compromising performance. The need for a fast, mobile-friendly website that worked seamlessly in such environments was critical to improving customer retention and conversions.

At the time, Progressive Web App (PWA) technology was emerging as a game-changer for e-commerce. While Magento provided a PWA Studio as part of their ecosystem, it was far from production-ready and lacked the flexibility and features needed for real-world use. The project aimed to create a fully functional PWA storefront that was both performant and developer-friendly, leveraging modern technologies.

Challenges

  1. Limited PWA Tooling: Magento’s native PWA Studio was incomplete and inconvenient for development, functioning more like a proof of concept than a ready-to-use solution. Key GraphQL endpoints were missing, making it difficult to build an advanced storefront.

  2. Slow Internet Speeds: The end-users were located in areas with unreliable and slow internet connections, requiring aggressive optimization of the data and caching layers.

  3. First Attempt Failure: The project’s initial implementation did not meet expectations, leading to a decision to restart development from scratch. This was when I stepped in to lead the project.

  4. GraphQL Limitations: Reliance on POST requests for GraphQL queries made caching difficult, as POST requests are inherently non-cacheable.

  5. Developer Experience: The existing stack lacked modernity and was not developer-friendly, causing friction for onboarding new team members.

  6. SSR Challenges: Implementing server-side rendering (SSR) proved problematic due to the lack of robust out-of-the-box solutions.

Solution

To address these challenges, I designed and lead a team to implement a custom PWA storefront from scratch, focusing on performance, developer experience, and scalability.

Technology Stack

  • Frontend: React was chosen as the primary framework due to its popularity, making it easier for development teams to onboard and contribute.
  • Backend: Magento 2’s GraphQL API was optimized and extended to meet the requirements of a modern PWA storefront.
  • Caching: Introduced a dynamic query caching system inspired by Apollo’s persisted queries, reducing payload size and enabling GET-based caching in Redis.

Core Features

  1. Persistent Query Mechanism: Replaced GraphQL POST requests with hashed GET requests to enable caching and improve response times.
  2. Skeleton UI: Implemented app shell caching and usage of skeleton rendering, providing users with an immediate visual structure of the page while content loaded in the background.
  3. Offline Support: Utilized the browser’s Cache API and Local Storage to store assets and non-sensitive data, minimizing traffic and enhancing performance for users with slow or intermittent connectivity.
  4. Developer-Friendly Design: Built a modular system with a simplified stack to ensure faster development cycles and easier maintenance.

Optimizations

  • Data Layer: Reworked Magento’s caching layer to handle dynamic GraphQL queries.
  • Assets: Leveraged browser caching and lazy loading for critical resources.
  • Experimentation: Conducted extensive experiments with pre-rendering and skeleton loading to improve perceived performance.

SSR Workarounds

While native SSR was not feasible, we explored headless browser solutions to pre-render content for search engines. This approach, though imperfect, provided short-term SEO improvements.

Scalability

Developed the architecture to allow future enhancements, including a plugin mechanism for extending the frontend without impacting core functionality.

Results

  • Performance Improvements:

    • Page load times decreased significantly.
    • Skeleton UI reduced perceived load times, improving user engagement.

  • Business Impact:

    • The custom PWA solution laid the foundation for scalable, future-ready storefronts, improving the retailer’s overall customer satisfaction and conversion rates.

  • Open Source:

    • Other development teams were happy to learn more and use our solution to help delivering better experience to their customers.

Key Takeaways

  1. Technical Innovation:

    • Replacing POST requests with persistent GraphQL queries cached via Redis was a game-changer, enhancing both performance and scalability.
    • Skeleton loading and app shell caching dramatically improved user experience on slow networks.

  2. Personal Growth:

    • The project taught me the importance of setting boundaries to avoid burnout and relying on the team to share responsibilities.
    • I learned the value of planning ahead and leading by delegation rather than taking on every challenge myself.

  3. Lessons Learned:

    • Insisting on figuring out solutions for Service Side Rendering (SSR) earlier could reduce the stress on the later stages.
    • Collaborative efforts with QA and other team members lead to more sustainable and efficient workflows.

Reflection

This project was a pivotal experience in my career. It showcased how cutting-edge technology, when combined with thoughtful design and robust development practices, could overcome significant challenges and deliver real business value. While it was a demanding journey, it reinforced my passion for solving complex problems and laid the groundwork for my future carrier and projects.

Share:
Back to Blog