Brandon Jones

November 29, 2024
Adobe Commerce, Hyva, Magento

Welcome to Week 4 of Hyvä Fridays. If you missed previous weeks we’ve covered the basics of Hyvä and why it’s faster than traditional themes. Check out those posts on our blog. Today we’re going to compare Hyvä vs Luma, the default Magento theme, performance and technically.

Let’s see why Hyvä is becoming the Magento 2 store choice and how it compares to Luma.

What is Luma?

Luma is the default theme that comes with Magento 2 and while it works it’s resource heavy and slow to load. Magento developers know all too well its complexity and inefficiencies especially when it comes to customisation and performance optimisation. Luma was a big step forward when Magento 2 first launched but eCommerce expectations have evolved and performance is more critical than ever.

Now let’s review how Hyvä has the edge.

Performance: Hyvä’s Clear Advantage

First we’ll break down how Hyvä beats any Luma based theme in both performance and coreweb vitals.

Speed

One of the biggest complaints about Luma is the slow page load times. This is mainly due to its heavy use of JavaScript and bloated frontend architecture. Hyvä is built to be fast. By using minimal JavaScript and a slim codebase Hyvä reduces the load on the browser and server resulting in much faster load times.

Luma Average Load Time: 4-6 seconds
Hyvä Average Load Time: 1-2 seconds

These numbers make a huge difference in user experience and SEO rankings, faster sites perform better.

Core Web Vitals

Google’s Core Web Vitals are now part of how sites are ranked in search results and Hyvä is built with these metrics in mind:

Largest Contentful Paint (LCP): Hyvä ensures faster rendering of the largest elements on the page, giving your store a performance edge.
First Input Delay (FID): With less JavaScript Hyvä makes your site more responsive to user actions.
Cumulative Layout Shift (CLS): Hyvä is designed to prevent layout shifts that can frustrate users, Luma can struggle with this issue due to its bloated structure.

Technical Comparison: Less is More

When it comes to web front ends, less is more. Decreasing complexity and dependencies helps to massively increase performance, lets see why:

JavaScript

Luma’s use of JavaScript can slow things down especially as pages get more complex. Hyvä removes the need for Magento’s default JavaScript libraries (e.g. RequireJS, Knockout.js) and uses a minimalist approach. This means faster performance without sacrificing functionality.

CSS Frameworks

Luma uses the standard LESS CSS framework which can get bloated and hard to manage as customisations increase. Hyvä uses Tailwind CSS, a modern utility-first framework that’s lightweight and highly customisable. With Tailwind developers can write cleaner, more efficient styles making customisations faster and easier.

Dependencies

Luma comes with a lot of built-in dependencies, many of which are not needed for every store and can cause unnecessary bloat. Hyvä keeps it simple and includes only what’s needed for a Magento 2 frontend. Result is less code to maintain and faster performance overall.

Frontend Customisation

Customising Luma is a nightmare. Due to its complex structure and heavy use of JavaScript even small changes can take a lot of time and effort. Hyvä makes customisation easier for developers:

Tailwind CSS makes styling easier, developers can change things faster and with less code. The utility first approach keeps the site looking uniform.
Fewer JavaScript dependencies means less headaches when making frontend changes.
Simplified templates means you can adjust the look and feel of the store without affecting performance.

For merchants who want to have a unique and good looking store, Hyvä is the better option by far.

Website Maintainability

With Luma the combination of heavy JavaScript and many dependencies means maintenance is harder. This can slow down development and cost more in the long run. Updates and patches can also break customisations if not handled properly. Hyvä’s clean structure makes maintenance easier and faster. Developers can focus on delivering new features instead of troubleshooting complex frontend issues.

Why Hyvä is better than Luma

In short here’s why Hyvä beats Luma:

Speed: Faster page loads, better Core Web Vitals, better SEO rankings.
Efficiency: Less JavaScript, fewer dependencies, simpler codebase.
Customisation: Easier and faster to create unique designs with Tailwind CSS.
Maintenance: Less work for updates and support.

At Envisage Digital we’ve seen Hyvä in action on Magento stores. As Hyvä Silver Partners we can help you switch to a faster, more efficient theme and take your store to the next level.

Let’s Chat!

Ready to boost your store’s performance and go beyond Luma? Visit our Hyvä Themes services page or the Hyvä Themes website to learn more, or get in touch. See you next week for the next Hyvä Fridays post where we’ll be looking at Hyvä’s minimalistic JavaScript.