Yaroslav Rogoza is the Chief Technical Officer of Atwix and one of its first employees.
Over the past few years, PWA and headless have proven to be some of the most hyped topics in ecommerce circles spanning engineering and digital services. Atwix, being an authorized Magento Solutions Provider, has fielded many inquiries, from new and old contacts alike, related to Progressive Web Application (PWA) solutions and related headless development. But, I always find myself saying, PWA is not a goal but rather a tool. Determining a client’s true business need must be the goal we surface and align around, as we explore how best to develop the right solutions.
When the goal is to center on performance, we review and position improvement solutions along three paths:
- Optimizing your current Magento setup including the storefront theme.
- Using the alternative theme – like Hyva, that is much faster and lighter than Luma.
- Having a deeper consideration of performance: in terms of image sizes, CX design, and page structure optimization.
When we talk about performance improvements, it is important to separate this topic from the Google PageSpeed Insights score. Our key focus shall be consumer experience influenced by speed, but not the speed itself. If your website is “fast enough” — has intuitive navigation and doesn’t get stuck — you have already done a great job!
If your focus is on ensuring a high Google search ranking, you need a top-level consumer experience. You also require a low bounce rate, a significant amount of visitors, and long session duration involving multiple page visits (learn more about Google ranking from our blog post).
There are many myths surrounding headless solutions (and PWA specifically). Namely, how it can make your website extremely SEO friendly, ensuring a high Google PageSpeed Insights score and a top rank in Google search. Well, we’d like to dispel some of these myths.
First, we need to define and really understand what PWA is (and is not!). The main misconception is that PWA and Headless are one and the same. Headless is a term basically applicable to any system that provides an API and may (or may not) provide a decoupled frontend. The decoupled part means that the API and the frontend are not interdependent out of the box. Said plainly, they may live their lives separately. For the API, you may utilize any frontend that is compatible with your API. Again, a headless setup does not have to be limited to PWA.
The term PWA has been introduced by Google as a “Capable,” “Reliable” and “Installable” solution. A solution that will contain the best of two worlds: native applications and web applications.
Must your solution be headless to be PWA? Not necessarily. From a technical standpoint, it’s possible to “convert” your web application into a PWA by adding a couple of modifications on top of your website (manifest, service worker). However, it does not make sense to move down this solution path, since you will not necessarily experience targeted benefits from these modifications. The PWA modifications will undoubtedly provide you with some new functionality that might be useful for you. For example, offline browsing, push notifications, and the ability to install as an application on your mobile phone.
But why are most PWA solutions headless? PWAs are more frequently headless because this approach provides greater flexibility as it applies to performance optimization. If, for example, you need to reload some page components (upload different products), you don’t need to reload the entire page and its corresponding header and footer, over and over again. With headless PWA, you may reload just a single component. This is just one good example of why headless-oriented storefronts are faster.
Ok, wait, but what does your web store need now: headless, PWA, or both? It depends on your needs. Headless is a great way for improving the store’s performance but note that it will cost you additional time and effort for development. In the near future, we will all have more and more headless-oriented solutions building on emerging business requirements that also leverage new products and solutions. To that end, the ability to choose from a growing number of options will inevitably shorten development cycles.
As for adding PWA functionality on top of your headless-oriented storefront, ask yourself if you need all the additional features PWA provides (most likely, you do). If you have a clear use case for offline browsing and push notifications, then surely go for it.
The next question would be what PWA solution should you choose for Magento websites? There are three popular options available today on the market:
- ScandiPWA
- Vue Storefront
- Magento PWA Studio
Magento PWA Studio is an Adobe project that intends to support all Magento Commerce and Cloud features. This makes the product more attractive for ecommerce businesses looking at speed and scale as key requirements on their long term roadmaps.
When using 3rd party solutions like ScandiPWA and Vue Storefront, you might find some of the functionality missing: namely, page builder, product recommendations, and Sensei. Having said that, these solutions are available now and are already working solutions that have been successfully used on the market for a couple of years. Also, important to note, Vue Storefront supports not only Magento, but other platforms like Shopware, Shopify, CommerceTools etc.
So you have options, choose wisely based on your objectives, and go back to your business goals. If one of your goals is ensuring top performance and high Google rankings, we suggest reallocating your budget to CX and performance. Assess the pros and cons of any solution you choose. PWA will be the right answer for many, but it is not a magic pill for all ecommerce businesses or to fully satisfy any one business’s goals – sometimes all you need is a fast website which can be achieved by other means.
Looking to go the PWA way, the Atwix – Webscale partnership can add tremendous value. To learn more about Webscale’s tailor-made hosting infrastructure designed around the needs of headless storefronts and PWAs, click here.
If you are interested in having a deeper conversation around PWAs and whether you need one, drop me a line at hello@atwix.com
