Is Hyvä the best theme for Adobe Commerce websites?

In Summary

• Hyvä has nearly perfect out-of-the-box Google Page Speed scores.
• It's made by developers, for developers.
• We highly recommend Hyvä.

The armpit of Adobe Commerce (Magento) is theme-related performance. The default theme, Luma, is archaic. Its performance is good out of the box but goes downhill quickly as changes are made. Other themes, like Smartwave Porto, start poorly and end even worse.

A theme built right is fast and easy to maintain. In our experience, beauty doesn’t matter as much as functionality. Performance is functionality. 

Hyvä is a well-built theme that maximizes site performance and maintainability.

Boost your Page Speed scores to the 90s and watch customers spend more.

Why is frontend performance so critical?

Amazon states that their sales drop by 1% for every additional 100ms of time to interaction.

The longer a visitor has to wait after clicking on your website until they see something helpful, the more likely they will “bounce” or click Back. In other words, you just lost a visitor and a potential sale.

Our favorite tool to assess the overall website performance is Google Lighthouse. Lighthouse generates the screenshots in this article.

Google watches a combination of bounce ratio and the length of time the visitor is on your website as a metric to assess the relevance of your content (among many other things). Of course, we don’t know exactly how vital these factors are. Google also uses specific metrics from Lighthouse to affect your ranking.

There are two categories of performance: backend and frontend. The request is sent to the server when you open a web page. The server builds a response that contains HTML. This is the backend category. Your browser has to receive a response from the server. If your server is poorly configured or your Adobe Commerce application is improperly built, you will have a slow time to the first byte (TTFB). A new theme will not fix this. It would help if you worked with a knowledgeable and capable service provider.

The Hyvä discussion centers on the frontend category when the HTML is presented in your web browser. Hyvä delivers through massive performance improvements.

What is Hyvä?

Hyvä is a theme for Adobe Commerce. But this is no common theme that you drop in, and it “looks nice.” Hyvä is a platform or foundation that provides a long-term system for styling your website.

Hyvä is the braintree of Willem Wigman and Vinai Kopp. Vinai Kopp has been in the Magento Community since its inception. He has advocated for front-end-related change.

Hyvä was released in 2021 and has since been deployed in over 600 stores. This is a production-ready product.

How do you pronounce it?

Hiva? Hwyva? Huva? Yes, it’s the last of these options. Hyvä is Finnish for “good” or “advisable.” Honestly, the pronunciation does not matter—Hyvä is an excellent product.

Is Hyvä stable yet?

Yes.

Hyvä was released in mid-2021 and now powers over 600 stores in the wild on its platform. It’s alive and growing.

Here are some examples of Hyvä in production:

• PartCatalog.com
• Case24

There is one big caveat. The core product is stable and ready to go. However, Hyvä is not compatible with all modules yet. They are working hard to boost adoption.

How does Hyvä compare with the Smartwave Porto theme?

Porto’s mobile score is 21. Hyvä’s is 85. Hyvä is faster and significantly better built than Porto.

Let’s dissect this answer.

The Porto theme demo is available here. The Google Page Speed report is available here. Porto is famous because it ships in 34 versions. The idea is it's super easy to make your website look good. As we discussed above, if this is all you are looking for, it’s better to go with Shopify.

The stylesheets are poorly constructed, which causes difficulties for the developer and many bugs in the future. Updates are pretty problematic.

Porto Google PageSpeed Results

We do not recommend Porto, and we recommend merchants to switch away from this theme if/when it makes financial sense.

The one thing Porto has going for it is this is a layer on top of Luma. Thus, the module's client-side coding and styling work out of the box. While the colors won’t match, the rest of the functionality should be reasonable.

See the section below "How compatible is Hyvä with my modules?". The short story is that Hyvä is not immediately compatible with all 3rd-party Adobe Commerce modules. The compatible list is growing, but it's not yet exhaustive. A quality developer can build these associations, but this is an extra expense.

Hyvä's technical details

Most Magento themes start with the Magento Blank theme and extend it. Even worse, some compile the stylesheets into one file (this makes it impossible to update the theme in the future).

Hyvä is different in that it starts over. Hyvä doesn’t reuse any Magento templates, Javascript, and stylesheets. The fresh start combined with new technologies accounts for the difference in speed.

Hyvä uses Alpine JS to power the user experience aspects. This lightweight but powerful framework makes the website responsive to user interaction.

Hyvä also eliminates LESS in favor of Tailwind CSS. This is a component-based system to make crafting the look and feel of a website accessible and responsive. Companies like Stihl and Netflix use this toolset.

These supporting components can be made even smaller with little work. The result is lightning-fast download and render times.

How compatible is Hyvä with my modules?

The only downside to Hyvä is module compatibility, which can be a big deal. However, in our experience, this is not as much of a problem as expected.

Hyvä has been working tirelessly with module builders to increase this number. Their efforts are paying off.

Hyvä is compatible with over 120 commonly-used modules. More are in the queue.

You can do a quick search in the compatibility tracker here.

How much does Hyvä cost?

Hyvä costs €1000.

Oh wow, Porto is $129. Some are on sale for $35. Luma is free!

Let’s look at this investment from another angle. How much do you spend on customization after you purchase this theme? It’s often $10,000+. What if a well-built piece saves 30% of this cost? The investment is well worth it.

In our experience and many others, Hyvä saves developers time when building it out.

What does it take to switch to Hyvä?

I wish we could “snap our fingers,” and Hyvä is set. That’s not the case.

Hyvä is a theme for Adobe Commerce. You must work with qualified Adobe Commerce developers to architect a beautiful and maintainable theme on Hyvä. We’ve seen theme implementation cost $100,000. But, depending on the requirements, it can be less than $10,000.

The key is to compare Hyvä’s demo with your current theme. The closer to the Hyvä demo you stick, the lower your costs. However, a retheme is an ideal time to work with our UX designer. We can help you craft an update that gets you closer to vanilla Hyvä while also establishing a considerable upgrade to your existing look and feel.

I can’t give you an amount—but if you give me a call, I’m happy to learn more about your needs.

How foolproof is Hyva? Am I guaranteed to get a 100 Lighthouse Desktop score?

No, you’re not guaranteed a perfect score. Hyvä is an excellent platform, but it’s not immune to “bad development” practices.

Even with a great developer, you are not likely to be at a 100 score—but I’ve seen it done. A great developer should be able to establish most requirements in the 90s. A great developer will tell you when you are requesting features that will cause long-term problems. These suggestions must be taken seriously. Every part that slightly hits the Page Speed score will eventually add up to significant performance problems.

Summary

We are duly impressed with Hyva. Increased PageSpeed scores (specifically Largest Contentful Paint and Cumulative Layout Shift) are associated with better search rankings.

About us

I write this article from an agency’s perspective, having seen many merchants floundering. When the website finally gets to production, it’s marred by bugs. This causes the merchant to believe the problem is Adobe Commerce—when, in reality, it’s more a management and agency problem. We have righted quite a few projects. If you’re interested in an audit or second option, I'm happy to chat.