Hyvä frontend explained for Magento developers

TL;DR:

Hyvä frontend replaces Magento 2’s legacy Luma stack with Tailwind CSS and Alpine.js, dramatically reducing JavaScript payload and improving performance. It remains server-rendered within Magento, ensuring extension compatibility and avoiding the complexity of headless architectures. A typical migration takes 6 to 12 weeks and results in faster checkout speeds and better Core Web Vitals scores.

Hyvä frontend is a server-rendered theme replacement for Magento 2 that swaps out the legacy Luma stack for Tailwind CSS and Alpine.js. Where Luma ships over 300 KB of JavaScript and a complex XML layout system, Hyvä reduces that payload to around 30 KB. The result is faster page loads, better Core Web Vitals scores, and a far simpler codebase for developers to maintain. For technical leads and decision-makers weighing up Magento frontend modernisation, understanding the Hyvä frontend explained in full means looking at its architecture, extension compatibility, real performance gains, and what a migration actually involves.

What architectural changes does Hyvä frontend introduce?

Hyvä frontend removes the entire JavaScript framework stack that Luma depends on. Gone are Knockout.js, RequireJS, and jQuery, along with Magento’s XML layout system. In their place, Hyvä uses Tailwind CSS for utility-first styling and Alpine.js for lightweight frontend interactivity.

Developers planning Magento frontend architecture

The templating approach shifts back to straightforward PHP and standard PHTML files. This is a significant change. Luma’s XML layout system requires developers to understand a deeply nested configuration structure before they can make even minor UI changes. With Hyvä, you edit a PHTML template directly, which is far more intuitive.

Should you make the switch to Hyvä?

A critical point that often gets missed: Hyvä remains server-rendered within the Magento application context. It is not a headless frontend. You keep Magento’s backend, admin panel, and data layer intact. This distinction matters because headless architectures introduce a separate Node.js or React layer, adding infrastructure complexity and cost. Hyvä modernises the frontend without that overhead.

The payload reduction is dramatic. A typical Luma store sends over 1 MB of assets and more than 300 KB of JavaScript to the browser. Hyvä brings total assets down to roughly 0.2 MB and JavaScript to around 30 KB. That is a reduction of roughly 90% in JS alone, and it shows up immediately in Lighthouse scores and Core Web Vitals metrics like Largest Contentful Paint (LCP) and Interaction to Next Paint (INP).

Pro Tip: Run a Lighthouse audit on your current Luma store before starting any migration work. Capture your baseline LCP, INP, and Total Blocking Time scores. These numbers become your benchmark for proving the value of the migration to stakeholders.

How does Hyvä affect Magento extension compatibility?

Extension compatibility is the most underestimated challenge in any Hyvä migration. Many Magento extensions rely directly on Luma’s JavaScript stack, particularly Knockout.js and RequireJS. When those frameworks are removed, frontend-facing extensions simply stop working.

Hyvä-compatible extensions have rewritten PHTML templates, Alpine.js-based JavaScript, and Tailwind CSS integration. Extensions that have not been updated fall into one of four categories:

Fully compatible. The extension operates entirely in the backend or admin, with no frontend JavaScript dependency. Payment gateways that use server-side redirects often fall here.
Needs a compatibility module. A separate Hyvä compatibility module rewrites the extension’s PHTML templates and replaces its Knockout.js logic with Alpine.js. Many major vendors now ship these.
Requires a custom frontend rebuild. The extension has complex frontend UI that no compatibility module covers. You will need to rebuild the frontend component from scratch in Alpine.js and Tailwind CSS.
Not compatible and not worth porting. Some extensions are so tightly coupled to Luma’s architecture that replacement is the better option.

The Hyvä ecosystem now covers compatibility modules for over 1,000 popular Magento extensions, with vendors including Amasty and Smile providing officially maintained Hyvä-compatible versions. That ecosystem has matured considerably, which makes adoption far less risky than it was two or three years ago.

Checkout extensions deserve special attention. Hyvä Checkout, powered by the Magewire framework, replaces the standard Magento checkout entirely. Any extension that modifies the default checkout flow will need a dedicated Hyvä Checkout compatibility module or a custom build.

Pro Tip: Before scoping a Hyvä migration, export a full list of your installed extensions and check each one against the official Hyvä compatibility repository. Categorise them using the four tiers above. This single exercise will define 60–70% of your project scope.

What performance improvements does Hyvä deliver?

The performance gains from Hyvä are not marginal. They are the kind of improvements that move the needle on SEO rankings and conversion rates. The JavaScript payload reduction of 70–90% translates directly into faster Time to Interactive and lower Total Blocking Time, both of which Google’s Core Web Vitals algorithm weighs heavily.

Infographic comparing performance metrics of Hyvä and Luma frontend

Magewire amplifies these gains further. It is a server-driven UI framework that keeps dynamic logic in PHP and sends lightweight HTML fragments to the browser. Magewire syncs with Alpine.js on the client side, meaning you get reactive UI behaviour without shipping a large JavaScript bundle. The developer experience is also cleaner because UI logic lives in PHP classes rather than scattered across JavaScript files.

The checkout numbers are particularly striking. Hyvä Checkout loads up to 13 times faster on mobile compared to the default Luma checkout. Faster checkout speed directly reduces cart abandonment, which is one of the highest-impact levers in ecommerce conversion optimisation.

“The single biggest performance win we see on Hyvä migrations is not the homepage load time. It is the checkout. Shaving seconds off mobile checkout completion is where the revenue impact becomes measurable within weeks of going live.”

The table below summarises the key performance differences between a standard Luma store and a Hyvä-based store:

Metric	Luma (typical)	Hyvä (typical)
JavaScript payload	300+ KB	~30 KB
Total page assets	1 MB+	~0.2 MB
Mobile checkout speed	Baseline	Up to 13x faster
Core Web Vitals (LCP)	Often poor	Significantly improved

For Magento SEO performance, the Core Web Vitals improvements feed directly into Google’s page experience signals. A store that moves from “Needs Improvement” to “Good” across LCP and INP can expect meaningful organic ranking gains, particularly on competitive category and product pages.

How to plan a migration to Hyvä frontend

A Hyvä migration for a mid-market Magento 2 store typically takes 6–12 weeks, depending on the complexity of the existing theme, the number of extensions, and the volume of custom frontend code. That timeline is far shorter than a full platform migration, which makes Hyvä a pragmatic choice for merchants who want modern performance without re-platforming.

A well-structured migration follows these steps:

Audit your extension stack. Use the four-tier compatibility model described earlier. Identify which extensions need compatibility modules, which need rebuilding, and which should be replaced entirely.
Audit your custom theme. Document every custom PHTML template, layout override, and JavaScript customisation in your current theme. Each one will need to be rebuilt or replaced in Hyvä.
Scope the Hyvä Checkout decision. Decide early whether you will use Hyvä Checkout with Magewire or keep the standard Magento checkout. This affects your extension compatibility requirements significantly.
Set up a staging environment. Build the Hyvä theme in staging from the start. Never attempt a Hyvä migration on a live store.
Test Core Web Vitals in staging. Use Google PageSpeed Insights and Chrome’s CrUX data to validate performance improvements before launch. Check LCP, INP, and Cumulative Layout Shift (CLS) across key page types: homepage, category, product, and checkout.
Plan a phased rollout if needed. For large stores, consider launching Hyvä on a subset of pages or a secondary store view first. This reduces risk and gives you real-world performance data before full deployment.
Monitor post-launch. Track Core Web Vitals in Google Search Console for at least four weeks after launch. Watch for regressions caused by third-party scripts or extensions that were not fully tested.

Keep your extension stack lean throughout the process. Every additional extension adds frontend weight and compatibility risk. A Hyvä migration is an excellent opportunity to audit and remove extensions that are no longer earning their place. For stores that also want to address Magento caching strategy alongside the frontend migration, doing both in the same project cycle compounds the performance gains.

Key takeaways

Hyvä frontend is the most practical path to modern Magento performance, replacing Luma’s heavy JavaScript stack with Tailwind CSS and Alpine.js to deliver measurable speed gains without re-platforming.

Point	Details
Architecture shift	Hyvä replaces Knockout.js, RequireJS, and XML layouts with Alpine.js, Tailwind CSS, and PHP templates.
Not headless	Hyvä remains server-rendered inside Magento, avoiding the complexity of a separate JavaScript frontend layer.
Extension compatibility	Audit every extension against four tiers before scoping: fully compatible, needs a module, needs a rebuild, or replace.
Checkout performance	Hyvä Checkout with Magewire loads up to 13 times faster on mobile, directly improving conversion rates.
Migration timeline	Most mid-market stores complete a Hyvä migration in 6–12 weeks, far less disruptive than re-platforming.

Why Hyvä is the most sensible Magento frontend decision right now

I have worked on enough Magento projects to know that frontend rewrites are often oversold and under-delivered. Hyvä is different, and I say that with some conviction.

The thing that most articles miss is how much the developer experience improves. Luma is genuinely difficult to work in. The XML layout system, the Knockout.js bindings, the RequireJS module loading — it creates a steep learning curve that slows down every sprint. Hyvä removes that friction. Junior developers get productive faster. Senior developers stop wasting time debugging JavaScript loading order issues.

The compatibility concern is real but manageable. I have seen teams treat it as a blocker when it is actually just a planning exercise. If you do the extension audit properly upfront, you will rarely encounter a surprise mid-project. The ecosystem has matured to the point where most popular extensions either have official Hyvä support or a community compatibility module.

The performance case is also stronger than the headline numbers suggest. Yes, a 90% reduction in JavaScript payload is impressive. But the real commercial argument is the checkout speed. Merchants who have moved to Hyvä Checkout consistently report meaningful conversion improvements on mobile, which is where most ecommerce traffic now comes from. That is the number you take to a board meeting.

If you are running a Magento 2 store on Luma and you are not actively planning a Hyvä migration, you are falling behind. The benefits of Hyvä for Magento are not theoretical. They are measurable, and they compound over time as Google continues to weight Core Web Vitals in its ranking algorithm.

— Steve

Bigeyedeers can help you move to Hyvä

Bigeyedeers is a UK-based Magento agency with over 17 years of experience building and supporting high-performing ecommerce stores. We have delivered Hyvä theme development for merchants across a range of sectors, handling everything from extension compatibility audits to full custom Hyvä builds and post-launch performance monitoring.

If your Magento store is running on Luma and you want to understand the scope and commercial case for a Hyvä migration, we can help. Our team covers frontend performance audits, migration planning, and end-to-end Hyvä implementation. Get in touch with the Bigeyedeers Magento team to talk through your project.

FAQ

What is Hyvä frontend for Magento 2?

Hyvä is a server-rendered frontend theme for Magento 2 that replaces the Luma stack with Tailwind CSS and Alpine.js, reducing JavaScript payload from over 300 KB to around 30 KB.

Is Hyvä frontend the same as headless Magento?

No. Hyvä operates inside the Magento application context and is server-rendered. It modernises the frontend without decoupling it into a separate headless architecture.

Will my existing Magento extensions work with Hyvä?

Not all of them. Extensions fall into four categories: fully compatible, needing a compatibility module, requiring a custom rebuild, or not compatible. The Hyvä ecosystem now covers compatibility modules for over 1,000 popular extensions.

How long does a Hyvä migration take?

A mid-market Magento 2 store typically completes a Hyvä migration in 6–12 weeks, depending on extension complexity and the volume of custom frontend code.

Does Hyvä improve Core Web Vitals?

Yes. By reducing JavaScript payload by 70–90% and improving page asset weight, Hyvä delivers significant improvements to LCP, INP, and Total Blocking Time, all of which feed into Google’s Core Web Vitals scoring.