Introducing Headless Approach & PWA for Better Performance

Challenges

The client reached out to us with the goal to have their Magento 1 store supported, which we provided for several months in a row.

They had been working with our agency for a while and, at some point, decided to focus on the site’s performance. Achieving a fast response time was our main objective during the project development.

As the proportion of users on mobile devices far exceeds those who visit the website from a desktop or tablet, we also had to pay special attention to speed on smartphones and improve it.

The client asked us to come up with an appropriate development solution that could meet the needs of the business in the long term.

Duration

The whole project development process took three months.

Solutions

We carried out an initial analysis of the client’s system, Magento 1, and its capabilities. Magento 1 was quite outdated and needed improvements in terms of performance, as the main task of the client was to speed up the current website.

These are the main reasons why we proposed to the client to move to Magento 2. The client also was going to redesign the website, which would be logical to combine with the store migration, thereby killing two birds with one stone.

However, the migration to Magento 2 is still not enough for dramatic changes and meeting the client’s expectations for outstanding performance. To derive the most out of it, and take full advantage of the platform’s capabilities, we decided to go the extra mile and introduce a headless approach.

With that in mind, we developed the custom headless Vue.js solution, which meets specific client needs and goals, works fast and offers better website performance.

As a result of the implementation, the website speed on mobile devices surpassed the default Magento 2 speed by several times.

As soon as we received a sign-off from the client on our further strategic and tactical actions, we started working on the project specification document. The document covered the main aspects of the project, such as overall expectations, timeline and budget to be on the same page with the client.

Development

We performed a vast migration from Magento 1 to Magento 2, which involves creating a website from scratch on a new platform because of the significant differences in platform architectures.

It covered the moving of different kinds of data — customer, orders, product and category and promo codes, etc.

Aside from the integration with the custom Vue.js solution, we also connected:

• ✓ payment gateways (Stripe, Paypal, Amazon Payment)
• ✓ shipping methods (Deutsche Post Internetmarke, DHL)
• ✓ 10+ extensions to extend the native power of the platform

Features

One of the most exciting features of the store is the fact that all 240+ items are product configurators that a user can create on the fly. Customers just go through a few steps, choose from several offered options and see what the result is.

Next to the product image, which is generated based on the selected options, a user immediately sees the corresponding price with tax, delivery time and gets an opportunity to instantly add a created product to the cart.