The origins
Hyvä Themes have caused quite a commotion in the Magento 2 community in 2021. Teased since October 2020, its creators promised an alternative for Magento 2 Frontend with reduced complexity, better performance, and improved developer experience. They were going to achieve it by getting rid of heavy JS libraries and simplifying the stylesheet. Even before its release on February 13th, we got a teaser coming from a live build that got perfect Lighthouse scores. If Hyvä did not have everyone’s attention yet, now it definitely did.
Wednesday I teased you about our new Hyvä. build, today the word is out – go check out https://t.co/ny3KOjGVAG
4x 100 Lighthouse scores and sub-300ms pages; it is insanely fast!
Here is our case study (in Dutch, but Google Translate is your friend): https://t.co/orTkoKQhtV pic.twitter.com/IYVAzxwj2l
— Peter Jaap Blaakmeer (@PeterJaap) January 22, 2021
Shortly after its release, we started our first Hyvä project for our long-term client, Part Catalog. Let’s take a look at it and the results we managed to actually achieve with it.
The toolset
What exactly is Hyvä? In the words of its creators, it’s a set of tools to create a great frontend experience for Magento 2. At its core, there are Hyvä Themes. They are a collection of themes built with minimum dependencies – TailwindCSS and AlpineJS. Of course, there is also Magento making up for what they call TAMstack.
As Willem Wigman, the man behind the Hyvä idea said in his announcement presentation, Magento’s default external libraries and complex stylesheet ship as much as 5MB of data. That’s enough to start your day by ruining your Google Lighthouse results. By stripping it down to TailwindCSS and AlpineJS, he was able to reduce it to less than 100kB before compression. It’s a potentially massive boost to a website’s performance.
The principles
With such outstanding results, it’s no surprise that the core idea behind Hyvä is to stick to as few dependencies to 3rd party libraries as virtually possible. Their remaining principles include:
- reduced complexity. Stripping Magento of a great chunk of its codebase and rebuilding the template from scratch results in a much simpler environment.
- improved performance. Hyvä themes are built to work fast. It’s as welcome as unexpected because even relatively light Magento themes are known to be getting low performance scores, especially on mobile.
- improved developer experience. It provides good results with simple means, especially when compared to PWA frontends which way more time and expertise to implement.
- improved development velocity. While we can see the upsides and downsides of how Hyvä affects the development time, it’s definitely one of the most efficient ways to build Magento stores.
- reduced dependencies. Just Magento with AlpineJS and TailwindCSS.
- reduced learning curve. The humble tech stack makes Hyvä a friendly environment for less experienced developers – when compared to learning KnockoutJS or PWA.
The impact
By now, it shouldn’t be hard to see why there’s so much excitement about Hyvä in the Magento community. However, there’s more to it than just better performance results and a friendlier development environment. Hyvä has the potential to open Magento to the whole new sector of middle-market store-owners and agencies. PWA is a great solution but it requires the time and the right budget that many small and medium businesses just don’t have. Hyvä brings a new perspective if you just want a nice-looking, well-optimized shop that still benefits from rich Magento features.
Its creators humbly say that their product is not a revolution. It’s rather something they wish themes like Luma would one day become. While it’s true and Hyvä may not be revolutionary at its concept, its impact may turn out to be just that.
Listen to us talk about Hyvä on the Talk Commerce podcast!
Case study
Now let’s take a look at our actual implementation process. Part Catalog is a car-part retailer with a Magento custom theme we’ve migrated to Magento 2 back in 2019. In 2021, the client asked us to redo it as a Hyvä theme.
The theme had a number of JS-based custom modules and since Hyvä doesn’t use external libraries, the main challenge was to rewrite them using just the AlpineJS library. Yes, that also means that Hyvä won’t support Magento Marketplace modules out of the box. As it is, you either have to modify them or write your custom solutions from scratch. They’re currently working on their own modules (like Hyvä Checkout that is free, opensource, and already available) so we will likely see more extensions from them in the future. Even more notably, some module creators are already making versions of their products adjusted for Hyvä Themes.
Another problem that we hoped to fix was the site’s performance. While it was somewhat acceptable on desktop, on mobile… well, we could only get better from there, right?
Pre-Hyvä Desktop:
Pre-Hyvä Mobile:
While we had high hopes as to the performance increase, we knew we still had to add all custom modules that existed in the original implementation and they would likely increase the loading times. E.g. one of the modules allows you to pick your car and it will show you all products compatible with it.
We were very happy to see that despite all that, after going live all Lighthouse scores went through the roof.
Post-Hyvä Desktop:
Post-Hyvä Mobile:
As you can see, redoing the store with the Hyvä themes caused vast improvements in almost all scores. Especially the mobile performance score raising from 10 to 97 is downright unbelievable.
We’ll be definitely watching its development closely and we look forward to doing more projects like these. Would you like us to help you make your Hyvä Magento store? Contact us!
