It’s common sense that every ecommerce owner wants to bring more traffic to their store and find a way how to make the visitors come back. As important as it is to bring more traffic, it is also paramount to have quality traffic. The bottom line is that although a lot of traffic can be a good thing, an even better outcome is to have high conversions – which is what quality traffic leads to.

There are so many different ways to achieve this, but today we will focus on the technical side. In order to properly handle more traffic, make people visit the website again and as a result to get more conversions, we must improve:

• page speed/reduce loading time
• page performance
• SEO score
• customer experience

As well as reduce:

• page requests
• size of resource loaded by each page

Magento is one of the best CMSs out there that people choose for it’s unique functionality, exceptional features and speed. Clean Magento with default theme and sample data is really fast. But who today wants a common looking website that many others have? You’re right – nobody. So once you start adding extra functinality, customizations and third-party modules, its speed starts to decrease.

When it comes to Magento 2 and improving page performance, the default theme – Luma – which is mostly used as a base for custom theme, has its limitations. There are many steps that should be taken in order to have a well optimized website. Depending on the specific functionalities, requirements and design, it can be really hard to score good results.

Plus it usually requires joined forces on both – the backend and frontend side. Even when you manage to optimize everything properly and get a good score, making some simple changes on your website can have a negative effect – so it is a constant battle to keep the performance to a high standard.

But, what if I told you that you are no longer limited by technologies that Magento default theme offers? Time for Hyvä theme with its new technology to step in. The creators promised an alternative for Magento 2 Frontend with reduced complexity, better performance and improved developer experience. They are getting rid of heavy JS libraries and simplifying the stylesheet.

Almost a month before it was actually released, we got this teaser tweet with screenshot showing performance of a live build with Hyvä theme:

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

I have to admit, it did attract our attention. You remember those technology limitations which default Magento 2 theme has? Well the most remarkable changes Hyvä brings to the table are replacing KnockoutJS with AlpineJS and using TailwindCSS. This means a whole new approach to writing JS and styles, as well as building assests which greatly improves Magento store performance. AlpineJS and TailwindCSS are way more friendly, easier to use and lightweight.

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 will most definitely ruin your Google Lighthouse results. By stripping it down to TailwindCSS and AlpineJS, they were able to reduce it to less than 100kB before compression. So that alone is a potentially massive boost to a website’s performance.

Other than that their remaining principles include:

• improved performance – built to work fast
• reduced complexity – removed great portion of codebase and built templates from scratch in a much more simple way
• improved development speed – currently perhaps one of the most efficient ways to build Magento 2 stores
• reduced dependencies – as I already mentioned, Magento with just AlpineJS and TailwindCSS

It is obvious why Hyvä is becoming so popular in the Magento community – next to better performance, you also get friendlier development environment which leads to easier maintenance.

Case Study

Now let’s take a look on our actual implementation. We’re going to check the results of one of our customer that uses Magento 2 webshop. What we can see are some obvious improvements.

Theme had lots of custom made functionalities and third-party modules which are not supported by Hyvä out of the box, so all that had to be rewritten with AlpineJS. That was the biggest challenge – we had to create compatibility modules in order to make it all work together with the new theme. Hopefully in the coming times we can see a bigger amount of extension developers making their modules compatible with Hyvä so we wouldn’t anymore have to make compatibility modules ourselves.

Once we made it work and created our own theme – that was this time based on Hyvä instead of Luma – we were really excited to run some site performance analysis.

Before the Hyvä theme:
Desktop:

Mobile:

Without any specific actions regarding content optimization and with the same data but using Hyvä, here is what we got.

After the Hyvä theme:
Desktop:

Mobile:

Now that we can see this significant improvement in the performance, accessibility and best practices, with few tweaks with content and SEO, we will get high scores in all departments. Something that on the other hand with Luma is really hard to achieve on similar projects.

That is not all, take a look at the number of requests before and after Hyvä installation:

Custom theme based on Magento Luma:

Custom theme based on Hyvä:

For who is the Hyvä theme for?

It’s safe to say that Hyvä theme is suitable for every online store. Especially to those who appreciate up-to-date technologies and find it important to keep up with the new and improved trends. Having it faster, better performing, offering better user experience for visitors and through that make them return. All of that here is to achieve the main goal – get a better ranking, scoring and end up with more sales.

From the developers point of view, yet again, we get to deliver good news. Developers that are working with Hyvä enjoy the process and have said the team has accepted it well. More specificly – they like the fact how it’s up to date and the most efficient way to develope Magento.

The other important thing they point out is the strong community around it. A community that includes developers working with Hyvä and the ones who created it. Being in such community is ideal to be up to date with the latest info and be able to work together. The constant support is well appreciated.

The Hyvä theme is still considerably young and constantly developing. More and more developers are now boarding the Hyvä ship. In conclusion, it is clearly seen how beneficial it is and how much did the performance improve in all the departments. There is no doubt – we will definitely continue to go in this direction.