Magento 2 Case Study
How PWA Drives Magento Performance Optimization for Beauty Retailer
Brocard reigns as the ultimate destination for luxury cosmetics and perfumery in Ukraine.
It stands out for its exquisite collections of skincare and beauty products and accessories: Brocard is the biggest retail chain that sells worldwide famous brands such as Chanel, Dior, Lancôme, Guerlain, Burberry, Yves Saint Laurent, Givenchy, Dolce&Gabbana, Giorgio Armani, Gucci, etc.
date of establishment
Physical stores in
in the product line
Challenge: Magento Performance Issues
We had been working with the client for quite a long time, diligently involved in the development, support, and maintenance of their store. However, as an increasing number of clients flocked to their website, accompanied by a growing assortment of products, we encountered performance issues, notably slow page loading when loading the product catalog on the product listing page.
PageSpeed Insights indicated that the website’s loading time fell within the unsatisfactory yellow zone, which signifies slower performance and potential negative impacts on user experience and conversion rates.
Yet, Brocard wanted to put a strong emphasis on Search Engine Optimization, and performance issues were a solid blocker for it: a slow-loading website can result in higher bounce rates and lower organic search rankings.
On top of that, Brocard had low PageSpeed Insights metrics on mobile devices. And search engines prioritize mobile-friendly websites. Thus, Brocard was falling behind its competitors in the very rivalrous niche of the eCommerce beauty, and this was a crucial point to optimizing performance.
Want to work with us?
Leave your contact details and we’ll get back to you as soon as possible
- Project Manager
- Tech Leadsr
- Front-End Developers
- QA Engineers
- Back-End Developers
Discovery Stage: Look into Speed Optimization for Magento
During our analysis of the website code to identify areas for improvement, we observed that the server responded quickly to requests from the front-end. Yet, pages were loading extremely slowly.
Additionally, we noticed that the excessive use of HTML tags in Magento had negative effects on website performance. This included larger page sizes, a higher number of network requests, and complex code structures. These implications were the reasons for slower page load times and hindered overall website performance.
Time to First Byte (TTFB)
measures the duration between a browser’s request to a server and the moment it receives the first byte of the server’s response.
Planning Stage: Hot to Optimize Magento Speed
Since we have already done everything for Brocard’s website optimization, at this point we could only have two ways for resolving performance issues: create a new theme or develop a progressive web app*.
Developing a new theme would have taken as much time as developing a PWA from scratch. But a PWA offers an enhanced user experience, increased engagement, and broader accessibility across various platforms, it was obvious for us that we need to choose this option.
A progressive web app (PWA)
is a type of web application that leverages modern web technologies to provide a user experience similar to that of native mobile apps.
is an open-source PWA framework specifically designed for eCommerce applications.
Development Stage: Magento 2 Speed Optimization
Initially, we selected Vue Storefront* as our preferred PWA framework for the project. However, upon careful analysis, we realized that the Elasticsearch** module provided by Vue Storefront would conflict with Magento’s Elasticsearch module. The REST API communication between Vue’s Elasticsearch and Magento was not ideal for our situation due to the presence of significant custom code in the Brocard website.
We then turned our attention to GraphQL* as a solution. We realized that this query language enables direct communication with Magento. Plus, it improves with every Magento update. GraphQL is framework-agnostic and can be utilized with different backend technologies. It empowers us to specify data requirements through a query syntax, and in response, the server delivers the requested data in a structured format.
is a powerful open-source search and analytics engine built on top of the Apache Lucene library.
is an open-source query language and runtime for APIs (Application Programming Interfaces).
Plus, we needed Server-side rendering (SSR). It allows making all HTML content visible to Google crawlers is essential for SEO. It allows search engines to properly index and understand your website’s content, ensuring keyword relevance, improved visibility in search engine result pages, and enhanced user experience. By ensuring visibility, you enable search engines to extract valuable information, display rich snippets, and optimize for mobile indexing.
We performed additional configurations to enable Magento and existing extensions to work seamlessly with GraphQL. We implemented resolvers, wrote mutations, and queries to establish direct communication between the front-end and back-end systems.
Server-side rendering (SSR)
is a technique used in web development to render web pages on the server and send the fully rendered HTML to the client’s browser.
We received a fully customized PWA that significantly improved web page loading speed. We also implemented custom HTML code to ensure all content is optimized for search engines. Our custom solution provides unlimited potential for enhancing the performance of Brocard's store in the future.