Wat is Hyvä? Een begrijpelijke gids voor eigenaren van Magento-webshops

Heb je een Magento 2-webshop, dan heeft iemand je waarschijnlijk al aangeraden om “over te stappen naar Hyvä”. Bureaus hebben het erover, developers vinden het prettig en snelheidsrapporten wijzen er steeds naar.

Deze gids legt uit wat Hyvä precies is, wat er verandert als je het invoert en wat niet. Hij is geschreven voor eigenaren en managers van webshops, niet alleen voor developers.

Hyvä in één alinea

Magento 2 bestaat uit twee helften. De backend bevat je producten, prijzen, klanten, bestellingen en integraties. De frontend is de storefront die die data omzet in pagina's in de browser van de klant.

Standaard wordt Magento geleverd met een frontendthema dat Luma heet. Hyvä is een alternatief frontendthema dat Luma vervangt.

Het laat de backend van Magento ongemoeid en bouwt de storefront opnieuw op met een veel kleinere, modernere set tools.

Wat Hyvä vervangt

Luma is vele jaren geleden ontworpen en draagt de frontendtechnologie van die tijd met zich mee. Een gemiddelde Luma-pagina laadt een lange keten van JavaScript en stylesheets voordat de klant iets kan doen.

Hyvä haalt die stack weg en vervangt hem door twee lichtere tools.

Tailwind CSS bouwt alleen de styles die je templates echt gebruiken. Alpine.js voegt kleine stukjes gedrag toe, zoals een menu openen of een productafbeelding wisselen, direct in de paginatemplate.

Wat hetzelfde blijft

Dit is het deel dat veel webshopeigenaren verrast. Overstappen naar Hyvä is geen replatformingproject.

• Je producten, categorieën, attributen en prijzen blijven waar ze zijn.
• Je klanten, bestellingen en bestelgeschiedenis blijven waar ze zijn.
• Je ERP-, PIM-, marketplace- en boekhoudintegraties blijven communiceren met dezelfde Magento-backend.
• Je URL's kunnen precies hetzelfde blijven, en dat is belangrijk voor SEO.
• Je team blijft elke dag dezelfde Magento-admin gebruiken.

Wat verandert, is hoe de storefront wordt gebouwd en hoe snel die de klant bereikt.

Waarom webshops overstappen naar Hyvä

De belangrijkste reden is de belasting. Een Hyvä-pagina vraagt de browser om veel minder code te downloaden en uit te voeren dan een Luma-pagina.

In onze eigen benchmark op dezelfde server en met dezelfde catalogus waren schone Hyvä-pagina's ongeveer vier keer lichter dan Luma-pagina's. Ze deden ook veel minder requests en leverden grofweg 18 tot 20 keer minder JavaScript.

De volledige cijfers en de methode vind je in onze Hyvä vs Luma-benchmark.

Minder code helpt op drie praktische manieren:

• Mobiele klanten. Middenklasse- en oudere telefoons hebben moeite met een halve megabyte JavaScript, zelfs als een labtest er goed uitziet.
• Core Web Vitals. Metrics zoals LCP en INP blijven makkelijker in het groen als de browser minder werk hoeft te doen.
• Ontwikkelsnelheid. Eenvoudige templates met Tailwind-classes zijn sneller aan te passen dan lagen LESS-overrides en Knockout-templates.

Bij een echte klantwebshop, een Duitse webshop die in 9 landen verkoopt, bracht onze Hyvä-build de mobiele Lighthouse-score van de productpagina van 72 naar 94 en die van de categoriepagina van 88 naar 95. Dat zijn onze metingen op de stagingbuild.

Wat Hyvä niet oplost

Hyvä maakt de frontend lichter. Een trage server maakt het niet snel.

Is je hosting te licht, is je full-page cache verkeerd geconfigureerd of zijn je afbeeldingen elk meerdere megabytes groot, dan blijven die problemen op elk thema bestaan. Een zware tagmanager met veel scripts van derden vertraagt ook een Hyvä-webshop.

Daarom kijken we altijd eerst naar het totaalplaatje. Ons werk aan de Magento-snelheidsoptimalisatie begint vaak bij de server en de scripts, niet bij het thema.

Het is ook goed om eerlijk te zijn over labscores. Een schone Luma-webshop op een snelle server achter een CDN kan ook goed scoren in Lighthouse. Het echte verschil zie je in het paginagewicht en in hoe echte klanten op echte telefoons de webshop ervaren.

Het addertje: extensies

De meeste Magento-webshops draaien een aantal extensies van derden. Veel daarvan bevatten eigen frontendcode die voor Luma is geschreven, met RequireJS, KnockoutJS of jQuery.

Omdat Hyvä die stack weghaalt, werkt zulke frontendcode niet zomaar op Hyvä. Het backendgedeelte van de extensie blijft werken; het is het storefront-gedeelte dat aandacht nodig heeft.

Voor veel populaire extensies bestaat al een Hyvä-compatibiliteitsmodule. Bij andere moet de frontend worden geport, of wordt de extensie vervangen door een betere optie.

Daarom begint elk serieus Hyvä-project met een extensie-audit. Onze Hyvä-migratiechecklist legt stap voor stap uit hoe je dat aanpakt.

Checkoutopties

De checkout verdient een eigen beslissing. De standaard checkout van Luma is gebouwd met KnockoutJS en hoort dus bij de oude stack.

Op een Hyvä-webshop zijn er meerdere routes:

• Hyvä Checkout, de officiële checkout gebouwd op Magewire.
• Een checkout die alleen voor die pagina op Luma blijft, via de fallback-aanpak van Hyvä, terwijl de rest van de webshop op Hyvä draait.
• Een maatwerkcheckout, ontworpen rond jouw gemiddelde orderwaarde en markten.

We bouwen Hyvä Checkout-projecten en bieden ook onze eigen checkout-templates in 2 stappen, 3 stappen en op één pagina, elk met een eigen succespagina. Je kunt ze vergelijken op onze pagina Hyvä-checkoutopties.

Is Hyvä geschikt voor jouw webshop?

Hyvä past meestal goed als:

• Je webshop op Magento 2 draait en je van plan bent op Magento te blijven.
• Een groot deel van je verkeer mobiel is.
• Je huidige thema lastig en traag aan te passen is.
• Je toch al een redesign plant.

Er is meer planning nodig als je afhankelijk bent van veel extensies met zware frontendcode, of van een betaalmethode zonder Hyvä-klare integratie.

Geen van beide is een blokkade. Het betekent alleen dat de extensie-audit eerst komt en het plan bepaalt.

Veelgestelde vragen

Is Hyvä een nieuwe versie van Magento?

Nee. Hyvä is een frontendthema voor Magento 2. Je Magento-versie, beheeromgeving en data blijven hetzelfde.

Verandert mijn design als ik overstap naar Hyvä?

Alleen als je dat wilt. Een design kan één op één op Hyvä worden nagebouwd, worden opgefrist of worden vervangen door een nieuw maatwerkdesign.

Verlies ik mijn posities in Google?

Niet als de overstap goed wordt gepland. URL's kunnen gelijk blijven, en gerenderde pagina's en structured data moeten vóór de livegang met de oude webshop worden vergeleken.

Benieuwd wat Hyvä voor jouw eigen webshop zou betekenen? Bekijk hoe we Hyvä-webshops plannen, bouwen en onderhouden op onze Hyvä-themaontwikkeling pagina.