AI News Hub Logo

AI News Hub

Hyvä Theme Performance: Why You Should Ditch Luma in 2026

DEV Community
Magevanta

If you're still running a Luma-based theme on your Magento 2 store in 2026, you're leaving significant performance on the table. The Hyvä theme has matured into the de-facto frontend standard for Magento developers who care about speed, maintainability, and Core Web Vitals. This guide explains exactly why, with numbers to back it up. Luma shipped with Magento 2.0 in 2015. It was designed for an era before Lighthouse scores, INP metrics, or the performance bar Google sets today. Under the hood, Luma relies on: RequireJS for module loading — hundreds of individual JS requests (or a slow bundled blob) KnockoutJS for UI components — a heavy runtime that initialises on every page jQuery and dozens of jQuery plugins CSS compiled from deep LESS inheritance chains The result? A typical Luma homepage ships with 400–600 KB of JavaScript that must parse and execute before anything interactive works. On a fast connection and a desktop Chrome, this is tolerable. On mobile — which accounts for 60%+ of e-commerce traffic — it's a conversion killer. Typical Lighthouse scores for a reasonably optimised Luma store: Performance: 40–60 (mobile) LCP: 4–7 seconds TBT (Total Blocking Time): 1,500–3,000 ms Hyvä, built by Willem Wigman and the community around it, throws out the RequireJS/KnockoutJS stack entirely and replaces it with two modern, lightweight tools: Alpine.js — ~15 KB gzipped, declarative, zero build step for simple interactions Tailwind CSS — utility-first, purged to only the classes you actually use (typically 10–30 KB) No RequireJS. No KnockoutJS. No jQuery (unless a third-party module forces it). The JavaScript bundle shrinks from 400+ KB to under 40 KB in a clean Hyvä setup. Feature Luma Hyvä JS Framework KnockoutJS + RequireJS Alpine.js CSS LESS (compiled) Tailwind CSS (purged) JS bundle size ~400–600 KB ~30–50 KB CSS size ~200–400 KB ~10–30 KB Component system XML layout + phtml + JS mixins phtml + Alpine data attributes Build tooling Grunt / bin/magento setup:static-content:deploy Vite (optional) + Tailwind CLI Community benchmarks and case studies consistently show the same pattern. Here's what you can expect after a Hyvä migration on a mid-size Magento store: Mobile Lighthouse (representative averages): Performance score: 75–95 (up from 40–60) LCP: 1.5–2.5 s (down from 4–7 s) TBT: 100–300 ms (down from 1,500–3,000 ms) CLS: Your Store Theme Hyva/default Hyvä ships with a tailwind.config.js that scans your phtml files for class names: // tailwind.config.js module.exports = { content: [ './src/**/*.phtml', './src/**/*.html', // Include Hyvä default theme templates too '../../vendor/hyva-themes/magento2-default-theme/Magento_Theme/templates/**/*.phtml', ], theme: { extend: { colors: { primary: { lighter: '#f0f9ff', DEFAULT: '#0ea5e9', darker: '#0369a1', }, }, }, }, } Build your CSS: # Development (watch mode) npx tailwindcss -i ./src/css/styles.css -o ./web/css/styles.css --watch # Production (minified + purged) NODE_ENV=production npx tailwindcss -i ./src/css/styles.css -o ./web/css/styles.css --minify Hyvä uses Alpine.js for interactive components. Here's a simple example — a custom product quantity selector: − = max" >+ No KnockoutJS data-bind syntax. No RequireJS define(). Just HTML attributes that any developer can read and understand immediately. If your store is under active development and you're planning a redesign, yes, migrate to Hyvä. The performance gains are real, the developer experience is dramatically better, and the community has reached critical mass. If you're running a stable store with no upcoming redesign and 20+ complex extensions, a migration needs careful planning. The ROI is there — better Core Web Vitals, faster deploys, happier developers — but the effort is real. As a rule of thumb: any new Magento 2 project in 2026 should start with Hyvä by default. Luma is legacy. Hyvä official documentation Hyvä Marketplace — compatible extensions Hyvä Community Slack — active community Alpine.js documentation Tailwind CSS documentation The frontend world has moved on from 2015-era JavaScript frameworks. Hyvä is how Magento 2 keeps up.