Hyvä Theme for Magento 2: A Technical Deep Dive, Architecture, Performance & Why It Beats PWA and Luma

Hyvä theme for Magento 2 has fundamentally changed what store owners expect from a frontend, and the numbers make the case. Hyvä ships approximately 0.15 MB per product page vs Luma's 0.9 MB, reducing JavaScript payload by 80–90% and delivering Lighthouse scores above 90 out of the box (mgt-commerce / Qarbi, 2026). For merchants who have watched Core Web Vitals scores tank rankings and conversion rates alike, that is not a marginal improvement it is a different category of frontend altogether.

In this deep dive, we break down exactly how Hyvä achieves that performance ceiling, how it compares technically and commercially to Magento PWA Studio, and how to evaluate whether it is the right move for your store.

0.15 MB

Hyvä avg. page weight vs 0.9 MB on Luma 80–90%

JavaScript payload reduction 90+

Out-of-the-box Lighthouse performance score

Luma, Magento 2's default theme, was designed in an era before Core Web Vitals existed as a ranking factor. It ships with a heavy Knockout.js and RequireJS stack, layered CSS from LESS compilation, and a dependency tree that routinely pushes JavaScript payloads past 0.9 MB per product page before a single line of custom code is added.

The consequence shows up directly in Google Search Console: bloated JavaScript delays Largest Contentful Paint, render-blocking resources push back Interaction to Next Paint, and dynamically injected layout elements trigger Cumulative Layout Shift penalties. For merchants running Google Ads or relying on organic rankings, a Luma storefront is often fighting its own frontend before it competes with anyone else's.

Hyvä was purpose-built to remove that overhead rather than patch around it, which is what the architecture section below covers in detail.

Hyvä's performance advantage comes from three architectural decisions working together, not from a single optimisation trick.

Server-Side Rendering by Default

Hyvä renders product, category, and CMS pages server-side using native Magento PHTML templates rather than client-side JavaScript components. This is the fastest way to achieve a high Largest Contentful Paint (LCP) score, the Core Web Vitals metric that measures how quickly the primary content becomes visible. Because the browser receives fully-formed HTML on first response, there is no client-side hydration delay before the customer sees the page.

Alpine.js for Interactivity

Where Luma reaches for Knockout.js and RequireJS to handle interactive elements like mini-cart, swatches, and modals, Hyvä uses Alpine.js — a lightweight (~15 KB) library that adds interactivity directly in markup without a virtual DOM or build-step overhead. The result is dramatically less JavaScript shipped to the browser for the same functional behaviour.

Tailwind CSS Instead of LESS

Hyvä compiles styling with Tailwind CSS's utility-first approach and a PurgeCSS-style build step, so only the CSS classes actually used on a page ship to production. This replaces Magento's traditional LESS compilation, which tends to output large, largely unused stylesheets across the entire theme.

Combined, these three choices are what produce the 80–90% JavaScript reduction and sub-0.2 MB page weights referenced above, not a single plugin or caching layer, but a frontend rebuilt around shipping less to the browser in the first place.

Magento PWA Studio was Adobe's own answer to Luma's performance problems, but it solves the problem with a fundamentally different, and considerably more expensive approach: a fully decoupled, headless React frontend communicating with Magento via GraphQL.

Factor Hyvä Theme Magento PWA Studio

Typical build cost $15,000–$70,000 $90,000–$250,000

Architecture Server-rendered, monolithic Magento Fully decoupled, headless (React + GraphQL)

Time to launch Weeks Several months

Extension compatibility 1,000+ modules (see below) Requires custom rebuild of most extensions

Ongoing maintenance Standard Magento skill set Specialised React/GraphQL team required

The cost gap is not incidental, it reflects genuinely different levels of engineering effort. PWA Studio requires standing up and maintaining a separate application layer, a GraphQL contract between that layer and Magento, and critically, custom front-end rebuilds for most third-party extensions, since PWA components don't automatically inherit Luma or Hyvä-compatible modules.

Independent analysis puts developer productivity 30–50% higher on Hyvä projects compared to PWA Studio builds of comparable scope (Elogic, 2026), largely because Hyvä developers work within Magento's existing PHTML/Alpine.js patterns rather than a parallel React codebase.

For merchants evaluating either path, Cinovic's Magento development team scopes both options against your store's actual extension stack before recommending a direction because the right answer depends heavily on how customised your current Magento instance already is.

Google's three Core Web Vitals each map to a specific part of the Hyvä architecture:

● Largest Contentful Paint (LCP) — measures how quickly the main content renders. Hyvä's server-side rendering typically delivers LCP under 2 seconds without additional tuning, since there is no client-side hydration step blocking the main content block.

● Interaction to Next Paint (INP) — measures responsiveness to clicks, taps, and keyboard input. Alpine.js's minimal runtime keeps the main thread free, so interactive elements like add-to-cart and filters respond immediately rather than waiting on a large JavaScript bundle to finish parsing.

● Cumulative Layout Shift (CLS) — measures unexpected layout movement. Because Hyvä renders markup server-side rather than injecting components after page load, elements hold their position from first paint, which is the most reliable way to keep CLS scores low.

For B2C storefronts in particular, where Cinovic's B2C eCommerce experience has repeatedly shown Core Web Vitals directly correlating with checkout conversion, this is not an academic distinction, Meetanshi's 2025 analysis found merchants seeing a 15–30% conversion rate lift after migrating from Luma to Hyvä, driven largely by faster, more stable page loads at the top of the funnel.

Extension compatibility is the single most common objection merchants raise before committing to a Hyvä migration, and it is worth addressing directly rather than glossing over.

Unlike PWA Studio, which requires most third-party extensions to be rebuilt from scratch for its React frontend, Hyvä works within Magento's existing PHTML template structure. That means the backend logic of most extensions continues to function unmodified, only the frontend template layer needs a Hyvä-compatible version.

The major Magento extension vendors have invested heavily in that compatibility layer. Amasty, Mirasvit, and Mageplaza, three of the most widely deployed extension publishers in the Magento ecosystem, now ship Hyvä-compatible versions of the majority of their catalogues as standard, not as a paid add-on. Across the broader ecosystem, the community-maintained Hyvä compatibility module repository now lists more than 1,000 compatible modules, spanning everything from search and filtering to loyalty programs and marketplace connectors.

Where a specific extension genuinely lacks Hyvä support, it is almost always a templating gap rather than a logic gap, which is exactly the kind of scoped work Cinovic's custom software development team handles as part of a migration engagement, rather than a blocker that should rule out Hyvä altogether.

Hyvä is not universally the right answer — but for the large majority of Magento 2 stores evaluating a frontend rebuild, it is the more defensible starting point. Use the framework below to sanity-check where your store fits.

Choose Hyvä if:

● Your team has existing PHP/Magento expertise and no dedicated React/GraphQL capacity

● Core Web Vitals and page speed are directly impacting rankings or paid ad Quality Score

● You need to launch within weeks or a small number of months, not a multi-quarter programme

● Your extension stack is largely covered by Amasty, Mirasvit, Mageplaza, or the broader compatibility repository

Consider PWA Studio only if:

● You already have a dedicated headless/React engineering team and budget in the $90K+ range

● Your roadmap requires a genuinely decoupled frontend serving multiple channels beyond the storefront

● You can absorb months of custom extension rebuilds before launch

For most mid-market and enterprise Magento merchants, an API-first, modern architecture goal is achievable through Hyvä's existing GraphQL support without taking on the full cost and timeline of a headless rebuild, which is why it has become the default recommendation for Magento 2 frontend projects in 2026.

Luma's default frontend is no longer a neutral starting point; its JavaScript weight actively works against Core Web Vitals and, by extension, both rankings and conversion. PWA Studio solves the same problem but at a cost and timeline that only makes sense for a narrow set of enterprise merchants with existing headless engineering capacity.

Hyvä occupies the practical middle ground: Magento-native, extension-compatible, and built from the ground up around the same performance metrics Google uses to rank and reward fast storefronts. For the majority of merchants evaluating a frontend rebuild in 2026, it is the migration that pays for itself fastest.

Cinovic has delivered Hyvä migrations across B2B and B2C Magento stores, including full headless-ready Magento 2 architecture where a phased path to decoupled commerce is on the roadmap.