Is Hyvä the right option for me?

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 it goes downhill very 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 Luma?

The most straightforward and obvious comparison is determining the difference between Luma and Hyvä. But we must first understand what Luma is?

Luma is an HTML, CSS, and Javascript package shipped with the Magento core. Every Adobe Commerce site has Luma pre-installed.

Luma’s performance isn’t awful but has a reasonably poor developer experience. This leads to bloat, which hurts site speed even more. We have even seen developers copy the final compiled stylesheet code and make modifications to this (effectively doubling the downloaded stylesheet file code).

Definitions:

Javascript: this is the software development language that enables user interaction. Javascript allows you to click a button with a success message subsequently appearing.

Stylesheet/CSS: stylesheets make the page look pretty. Otherwise, you’d see a white background, oddly-sized images, and Times New Roman font. Very ugly.

HTML: this language provides the overall structure of a website.

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.

What does Hyvä look like?

Hyvä can look like anything you desire. It’s customizable and powerful.

However, the closer you stick to the original design, the less costly to deploy Hyvä. The base feel of this theme is a significant step ahead of Luma. This means even less development time.

View the Demo here.

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:

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.

Is Hyvä better than Luma?

Out of the box, Hyvä looks better and loads faster than Luma.

The correct answer is more nuanced. Luma works out of the box. All modules support Luma. Thus, if you need a website in quick order, we recommend Luma on Magento 2. You would probably be happier on Shopify. We see an average lower total cost of ownership on Shopify for simple websites.

If you have a significant number of 3rd-party or custom modules, a Hyvä transition will be expensive. That said, all of these modules are rarely necessary. You will probably experience a performance boost by cleaning the house.

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.

How does Hyvä compare with Magento PWA?

Hyvä on a mobile device ranks at 95 thanks to Google Pagespeed. Unfortunately, PWA on a mobile device is 26. Hyvä is faster out of the box and is easier to customize. The image at the right represents the mobile Google PageSpeed score for the Magento PWA demo.

PWA is an excellent option if the budget is proper. PWA is not “production-ready” out of the box and will take time to customize and tweak. There are plenty of opportunities here, but this is only realized if the appropriate budget is available. Adobe continues to invest and progress so that this assessment may be adjusted with time.

Hyvä brings immediate and appreciable value.

As we write in almost every section, Hyvä is not immediately compatible with every 3rd-party module. Hyvä uses an entirely different system for styling and client-side interaction, which may need to be rebuilt for every module.

Google PageSpeed score for Adobe Commerce PWA

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.

What is the Hyvä developer experience?

Developers built Hyvä for developers. It was not meant to be a perfect solution out of the box. It is a toolbox that enables an adept frontend developer to craft a beautiful website. Hyvä ditches LESS and KnockoutJS in favor of Tailwind CSS and Alpine JS, respectively.

Even more importantly, Hyvä is well-documented. This ensures developers can get up to speed quickly. Vinai Kopp leads the charge for documentation. Vinai is one of the best-known developers in the Magento community and has been instrumental in training thousands of developers across the globe. His focus on equipping developers with Hyvä's best practices is one reason this theme thrives.

Hyvä themes typically take less time to build than the equivalent Luma theme, including the time, spent rebuilding functionality for incompatible modules. This cost savings makes Hyvä an easy decision for any new build.

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 does Hyvä affect the checkout?

It doesn’t! Hyvä operates entirely independently of your checkout at this point.

The checkout experience is complex and can be touchy. Hyvä styles everything that a visitor sees except for the checkout. Luma styles and provides interaction for the checkout.

This reduces the scope and complexity of a Hyvä implementation. The downside is that your developer will have to track your branding variables in two locations.

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 if Hyvä stops updating the product?

Hyvä must be updated every time Magento/Adobe Commerce is upgraded. Keep in mind that Luma also requires updates in this scenario.

However, a small risk is if Hyvä dies out, it won’t be “compatible” with future Magento updates. This has happened with several other community-sponsored themes. People get burned out or move on to different projects.

One significant difference between Hyvä and these other community-sponsored themes is that Hyvä has a cost. The others are free or very inexpensive. This is the difference: Hyvä invests in a long-term infrastructure to support a long-term set of goals.

In other words, anything can happen, but we see Hyvä here for the long run.

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.

Get in touch
circled-checkbox
We have experience in turning these projects around. We wish we didn't have to do this, but at least we are good at it.
SwiftOtter, Inc.
It relates to Magento 2, Project management and Quality Assurance.
Joseph Maxwell - president / senior developer at Swift Otter

President / senior developer at SwiftOtter - @swiftotter_joe