How PWA Drives Magento Performance Optimization for Beauty Retailer

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.

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.

The online store’s front-end code had already been extensively customized. All possible optimizations had already been implemented, such as improved Time to First Byte*, applied advanced JavaScript bundling** and optimized CSS.

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.

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.

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.

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.