DE
EN
You want a fast frontend for Magento 2. You want good Core Web Vitals, clean templates, and short development times. Hyvä delivers exactly that. Here you'll learn what Hyvä is, what advantages it offers, and how to use it effectively in your shop.
What is Hyvä
Hyvä is a modern frontend for Magento 2. It replaces the old Luma theme. It uses Alpine.js and Tailwind CSS, significantly reducing frontend complexity. You write less code, load fewer resources, and your shop renders faster.
Hyvä has a clear goal: minimal JavaScript, clean components, and streamlined templates. This aligns with the needs of mobile-first online stores and teams that want to deliver quickly.
Why Hyvä instead of Luma or PWA
Luma relies on RequireJS, Knockout, and a lot of jQuery. This takes time to render. Hyvä cleans things up. You get fast first paints, less main thread work, and better interaction. Compared to a PWA, you reduce the technical load. You need less infrastructure, fewer build steps, and usually a smaller budget.
Hyvä is suitable for shops that need a classic Magento experience. You retain Magento's strengths in the backend; you simply speed up the frontend.
A technical introduction to the structure, speed, and advantages is provided in the maxcluster knowledge area.
Overview of advantages
- TimeShorter loading time, improved INP and LCP values.
- Less codeNo knockout templates, less JS overhead.
- DevelopmentTailwind for consistent styles, Alpine for small interactions.
- SEOImproved Core Web Vitals, clear DOM structure.
- MaintenanceFewer dependencies, fewer conflicts.
- Time to marketModules and components allow for rapid releases.
- CheckoutHyvä Checkout reduces fields and loading times. This increases conversion rates.
- Responsive firstMobile versions are easy to implement. You control breakpoints directly within the classes.
Technology in brief
Alpine.js
Alpine delivers reactive mini-features. You bind states directly in the markup. No heavy framework, less build overhead.
Tailwind CSS
Tailwind controls layout and typography via utility classes. You define design tokens in the config. You avoid CSS overhead.
Hyvä UI and compatibility
Hyvä UI provides ready-made building blocks: buttons, headers, cards, and filters. Compatibility modules are available for many Magento extensions, allowing you to integrate common modules without major modifications.
Strategies for using Hyvä wisely
New build
Start with Hyvä if you're planning a new shop. Create a small design system. Define the components. Build the product list, product development page, shopping cart, and checkout first. This will bring benefits early on.
Luma relaunch
Plan a phased redesign. Migrate the most important pages first. Include the top categories, the highest-revenue product pages (PDPs), and the checkout. Test each stage with real users. Measure Core Web Vitals in Search Console.
Away from Headless, back to Magento
If your headless setup is complex, Hyvä can reduce it. Review routing, personalization, and caching. Also, consider which services you want to keep. Reduce build times as you move closer to Magento again.
Migration checklist
- Inventory of extensions, including compatibility with Hyvä.
- Prioritized page list. Category, PDP, Shopping cart, Checkout, Content.
- Define design tokens in Tailwind: colors, spacing, typography.
- Define image strategy. WebP, AVIF, sizes, lazy loading.
- Check caching. Full Page Cache, Varnish, Redis configuration.
- Define measurement parameters. CrUX, RUM, Lighthouse. Monitoring with alerts.
- QA Plan. Devices, browsers, accessibility, form validation.
- Phased rollout. Feature flags, A/B tests, fallback plan.
SEO and Core Web Vitals with Hyvä
Mobile first
Optimize for the smallest viewport first. Reduce image size, minimize fonts, delay third-party scripts. Tailwind helps you control variations per breakpoint.
Improve LCP
- Load the hero image as priority. Use modern formats.
- Lower TTFB. Check server, PHP, OpCache, database, and Varnish.
- Reduce resource blocking. Deliver critical CSS, lazy load the rest.
Improve INP
- Reduce JavaScript work. Keep inline interactions with Alpine.
- Avoid large JavaScript packages. No oversized widgets.
- Test interactions: search, filters, variations, add to cart.
Avoid CLS
- Always reserve sizes for images and slots.
- Load web fonts using the FOUT strategy.
- Avoid late banners and teasers.
Using Hyvä Checkout correctly
Keep the checkout process short. Remove fields you don't need. Enable autofill and suggested selection. Use a clear order. Address, ShippingPayment, review. Check which payment providers support fast redirects. Measure abandoned carts at the step level.
Tips for B2B
- Fast search with SKU recognition.
- Save and share shopping carts.
- Cleanly render custom pricing. No unnecessary Ajax rounds.
- Paginate large tables. Reduce columns.
- Integrate quote requests into the checkout process.
Team setup and effort
Plan for a small core team: one frontend developer, one backend developer, and one UX designer. This is sufficient for two to three templates per week, depending on complexity. Build reusable components. This will reduce the workload in later sprints.
Limits and risks
- Not every module is immediately compatible with Hyvä. Check this early on.
- Old custom JavaScript solutions can slow things down. Reduce their size or rewrite them.
- Server performance remains important. A slow TTFB slows down any frontend.
Practical advice that you can implement directly
- Define Tailwind Tokens. Colors, spacing, typography, shadows. Briefly document them.
- Create a page order: Category, Product Page, Shopping Cart, Checkout.
- Measure every week. CrUX, Search Console, load times per template.
- Decouple third-party scripts. Load them only after interaction.
- Conduct small A/B tests. Test call-to-action texts, image sizes, and product filters.
- Create a bug list. Scroll jangling, layout jumps, slow requests.
Your input
Are you already using Hyvä? What LCP and INP values have you achieved? Share your numbers, your approach, and any obstacles you encountered in the comments. Ask questions. Provide examples that have helped you.
Our customers spend hours planning DIY projects. With Hyvä, they stay on track – Average Session Duration +89%! Amazing!
International customers love speed! Hyvä finally makes our multilingual shop (12 languages!) performant. Hyvä! 🥢
Mechanic-approved! 🔧 The shop now runs perfectly even on the oil-smeared tablets in the workshop.
Parents have no time – children have no patience. Hyvä solves both! Even my 5-year-old can now navigate the shop himself (supervised, of course). 😊)
Gains in the gym AND in the shop! 💪 Hyvä boosted our conversion rate like a good pre-workout booster. +31% in 6 months!
Small manufacturer, big impact! Thanks to Hyvä, we can compete with Amazon. Our page speed is now even better than theirs!
RGB everywhere – even in the code! 😄 But seriously: Hyvä's performance finally makes our product comparisons usable. 60fps smooth scrolling FTW!
Fresh products, fresh shop! Real-time inventory updates work instantly with Hyvä. Essential for perishable goods!
B2B customer here. Hyvä has finally made our complex pricing structures (5000+ customer groups) performant. Previously: 8 seconds loading time. Now: 1.2 seconds!
Two years with Hyvä and still happy! The regular Updates The community is fantastic. The new Image Optimization feature in particular saves us €500 per month in CDN costs!
Skaters live almost – and shop too! Hyvä makes our shop as smooth as a perfect kickflip! 🛹
A tea ceremony is slow, but loading a shop isn't! Hyvä brings Zen to the e-commerce world! 🍵
Outdoor enthusiasts are often offline – but when they are online, things have to move fast! Hyvä rocks! ⛺
Vinyl is back – slow shopping is not! Hyvä brings modern speed to retro products. Perfect match! 🎵
Tech accessories for speed freaks! Our shop is now just as fast as the gadgets we sell! ⚡
Natural beauty needs no artificial elements. loading timeHyvä makes our shop as pure as our products! 🌿
Board gamers think strategically – so do we! Hyvä was the right strategy for sustainable growth. Critical hit! 🎲
Design lovers appreciate details – and speed! With Hyvä, we can showcase high-resolution room concepts without any loss of performance! 🏠
Couples plan for months – the shop must always be available! Hyvä's reliability is unbeatable. No more panic calls! 💒
Eco-consciousness meets tech innovation! Less code = less CO2. Hyvä perfectly aligns with our values! 🌍
Retro gamers love speed – old school games, new school shopping! Hyvä makes our shop as fast as Sonic! 🎮
The fitness community is always online! Hyvä's Progressive Web App features are perfect for workout tracking and nutrition plans. 💪
Luxury watch buyers expect a premium experience. Hyvä enables us to create 4K product videos without any performance loss. Time is money – literally! ⌚
Young parents have ZERO time for slow shops! With Hyvä, they can order quickly between diaper changes and feedings. Lifesaver! 👶
Craft beer fans appreciate craftsmanship – even in the code! Hyvä's clean approach resonates with our target group. Quality matters! 🍺
Relaxation begins with the shopping experience! No more annoying loading bars, everything flows smoothly… Our conversion rate for wellness packages has increased by 23%! 💆♀️
Sneakerheads are picky – about shoes AND shop speed! Hyvä delivered. Drop releases now run without crashes, even with 10k concurrent users! 👟
Bookworms scroll a lot – and it has to be smooth! With Hyvä, our customers can finally browse thousands of titles without any performance issues. 📚
Cyclists are always on the move – the shop has to keep up! Hyvä makes it possible. Mobile performance is unbeatable. 🚴♂️
Art takes time – shop loading doesn't! Improved image display makes our artworks a truly immersive online experience. Smooth zoom function = more sales!
Caffeine junkies have no patience for slow shops! ☕ With Hyvä, checkout is so fast that the coffee is still hot when the order is complete! 😄
Transparency and fairness – also in shop performance! Hyvä's Clean Code Approach makes audits easier and customers trust a fast, modern shop more.
Tech-savvy target groups expect tech-savvy shops! Hyvä delivers. The PWA features are amazing – push notifications for price alerts finally work reliably!
Seasonal business = traffic peaks in spring. Last year the shop crashed, this year with Hyvä? Smooth sailing! 🌻 The reduced server resources are paying off!
Sound matters – and so does speed! Integrating our audio samples with Hyvä finally works without latency. Customers can now 'test' instruments without frustration! 🎸
Our customers (and their pets) 🐕They're impatient! No more problems with Hyvä. Fun fact: The average time spent on the site has increased so much that we're seeing more cross-selling success!
Selling photography equipment online is challenging – large images, lots of detail. Hyvä handles it like a pro! Lazy loading and optimized image processing make all the difference.
Mindfulness in everything – including shop performance! The reduced loading time They create a calmer, more relaxed shopping experience. Perfectly suited to our brand! 🧘♀️
Extreme conditions demand extreme performance! 🏔️ Our customers often plan their expeditions with poor internet access. Hyvä's offline-first approach is invaluable!
Small but mighty – that's us. Hyvä has enabled us to compete with the big players. The development costs were tough on our budget, but thanks to the improved performance, we can now run Google Ads more successfully. Our Quality Score has skyrocketed! 📈
Gamers know: FPS matters! The same goes for online shops. Hyvä = a constant 60 FPS while scrolling. Our discerning target audience notices the difference immediately.
The creative industry needs creative solutions! With Hyvä, we can finally implement the designs we envision without compromising performance. Parallax effects, animations, video backgrounds – all buttery smooth! 🎨
Tradespeople are a target group often on the go with poor network coverage. Hyvä has solved this problem. Even in the basement, the shop loads acceptably. A practical side effect: fewer support requests due to 'shop not working'.
Parents don't have time for slow online shops! With Hyvä, our category pages load in under 1 second. The number of products viewed per session has increased from 8 to 14. This shows: speed leads to more browsing!
The numbers don't lie: Bounce rate -32%, session duration +48%, pages per session +67%. Hyvä was the best investment of 2024!
Sustainability is our focus – and Hyvä is a perfect fit! Less server load equals less energy consumption. We even mentioned it in our sustainability report. Plus: The faster loading time This reduces the bounce rate, which in turn minimizes unnecessary server requests. Win-win! 🌱
Real talk: Hyvä isn't for everyone. If you have a lot of custom extensions, it gets expensive. We had to redevelop 60% of our functionalities. BUT: The end result is 1000x better. Our mechanic customers are grateful – the shop search finally works even on old tablets in the workshop.
Luxury segment here. Hyvä finally gives us the premium experience our customers expect. Smooth scrolling, high-resolution product zooms without stuttering, elegant transitions. First impressions count – and now they're perfect! 💎
After initial skepticism, I'm now convinced. Checkout optimization alone has increased our conversion rate by 12%. Hyvä Checkout is worth every penny!
I'm torn. Technically top-notch, but finding a good Hyvä developer is like finding a unicorn. 🦄We had to hire an external agency = expensive!
For B2B shops, Hyvä is a game-changer. The ability to implement complex configurators without any performance degradation is invaluable. Our sales representatives can finally work on-site with customers without frustration – everything runs smoothly, even with a poor internet connection.
What many underestimate: Maintenance costs drop drastically! Fewer dependencies = fewer conflicts = less debugging. Our development team can finally focus on features instead of bug fixing.
Pro tip: Plan at least 3 months for the migration and budget a 30% buffer. The initial costs are high, but the TCO (Total Cost of Ownership) decreases by an estimated 40% in the long run.
OMG! Hyvä + PWA = 🚀🚀🚀 Our beauty customers love the new user experience! Swipe gestures, instant loading, buttery-smooth animations. Feels like a native app!
Meh… Hyvä is okay, but the hype is overblown. Yes, it's faster, but the migration was hell! 40+ extensions had to be replaced. Cost: an extra €45.000. ROI? Ask me again in a year.
Skepticism was yesterday! After 3 months with Hyvä, I can say: The learning curve for our dev team was steeper than expected, but it was worth it. Build times are halved, and debugging is a dream!
From a technical perspective, Hyvä is truly revolutionary for the Magento ecosystem. The reduction of the JavaScript payload from an average of 1.5MB to under 200KB is impressive. In our highly regulated pharmaceutical industry, performance and reliability are critical. After six months of operation, I can share the following metrics: Time to First Byte (TTFB) -47%, First Contentful Paint (FCP) -62%, Largest Contentful Paint (LCP) -58%. All Core Web Vitals are within acceptable limits. Particularly noteworthy: Accessible design is significantly easier to implement with Hyvä – a must in our field.
Hyva? Never heard of it… NOT! 😂 Best decision ever for our sports equipment shop!
As the owner of a medium-sized fashion house, I can only confirm what's written here. The investment in Hyvä paid for itself after just 4 months. Especially the discounted items. loading time Mobile devices are worth their weight in gold – 67% of our customers shop on mobile.
What initially made me skeptical was the decision to forgo jQuery and Knockout.js. But honestly? It was the best decision! The developers have become much more productive because they can work with modern standards. Alpine.js and Tailwind CSS are so much more intuitive.
One minor drawback: not all extensions are compatible, but the community is growing rapidly. There are now Hyvä-compatible alternatives for almost everything. Our development team has even started creating its own modules, which would have been unthinkable with the old Luma theme.
Conclusion: Hyvä is not a hype, but the future of Magento 2. The initial costs may be daunting, but the long-term benefits are priceless.
Finally, someone who explains Hyvä in a way that's easy to understand! 👍 We switched last year and the performance improvements are incredible. PageSpeed went from 35 to 92!