Hyvä vs Luma: de echte performance cijfers uit productie

# Hyvä vs Luma: de echte performance cijfers uit productie

LCP van 8,4 seconden naar 1,9 seconden. Lighthouse mobile van 23 naar 81. JavaScript bundle van 340KB naar 28KB. Dit zijn geen marketingcijfers — dit zijn metingen van een productieomgeving die wij migreerden van Luma naar Hyvä.

In dit artikel leggen we uit wat er technisch achter die cijfers zit, wanneer Hyvä de investering waard is, en wanneer het dat niet is.

Waarom Luma structureel traag is

Luma is het standaard Magento 2 frontend-thema en dateert in zijn architectuur uit 2015. Het web is sindsdien fundamenteel veranderd, en Luma is niet meegegroeid.

RequireJS en KnockoutJS: het JavaScript-probleem

Luma laadt JavaScript via RequireJS, een module loader die in browsers van 2015 zijn bestaansrecht had. Browsers ondersteunen inmiddels native ES-modules, maar Luma laadt nog altijd honderden losse JS-bestanden asynchroon in, bundelt ze via RequireJS, en voert daar KnockoutJS als UI-framework overheen.

Het resultaat: een JavaScript-bundle van 300KB tot 400KB op een gemiddelde productpagina. Bij een thema met extra extensies loopt dit snel op naar 500KB of meer.

Dat is niet alleen een downloadprobleem. De browser moet al die JavaScript ook parsen en uitvoeren voordat de pagina interactief wordt. Op een middelmatige Android-telefoon kost dat meerdere seconden.

LESS en de CSS-waterval

Luma gebruikt LESS met een omvangrijke variabelenstructuur. De gegenereerde CSS bevat veel ongebruikte stijlen. Een typische Luma-pagina stuurt 200KB tot 400KB aan CSS mee, waarvan een groot deel overbodig is.

Wat Hyvä anders doet

Hyvä is een volledig herschreven frontend die breekt met de architecturale keuzes van Luma.

Alpine.js in plaats van KnockoutJS

Hyvä vervangt KnockoutJS en RequireJS door Alpine.js, een minimalistisch JavaScript-framework van 15KB gzipped. De JavaScript-footprint van een gemiddelde Hyvä-pagina ligt op 25KB tot 35KB. Dat is een reductie van meer dan 90%.

Er is geen module loader, geen runtime overhead, geen asynchrone waterval van JS-bestanden.

TailwindCSS en utility-first CSS

Hyvä gebruikt TailwindCSS dat alleen de CSS-klassen genereert die daadwerkelijk worden gebruikt. Een typische Hyvä-pagina stuurt 10KB tot 25KB aan CSS mee. Een reductie van 90%+ ten opzichte van Luma.

De benchmarks: voor en na

Migratie A: Fashion webshop, ~8.000 producten

| Metric | Luma (voor) | Hyvä (na) | Verschil |

|--------|-------------|-----------|----------|

| LCP mobiel | 8,4s | 1,9s | -77% |

| INP mobiel | 340ms | 85ms | -75% |

| CLS mobiel | 0,28 | 0,04 | -86% |

| Lighthouse mobiel | 23 | 81 | +252% |

| Lighthouse desktop | 61 | 94 | +54% |

| JS bundle | 340KB | 28KB | -92% |

| CSS | 310KB | 18KB | -94% |

Migratie B: B2B webshop, configureerbare producten

| Metric | Luma (voor) | Hyvä (na) | Verschil |

|--------|-------------|-----------|----------|

| LCP mobiel | 6,1s | 2,3s | -62% |

| INP mobiel | 410ms | 120ms | -71% |

| CLS mobiel | 0,19 | 0,07 | -63% |

| Lighthouse mobiel | 31 | 74 | +139% |

| Lighthouse desktop | 58 | 91 | +57% |

| TTFB | 890ms | 340ms | -62% |

Noot over TTFB: TTFB wordt voornamelijk bepaald door de server. De verbetering bij migratie B was deels te danken aan een gelijktijdige serveroptimalisatie.

Core Web Vitals drempelwaarden

| Metric | Goed | Verbetering nodig | Slecht |

|--------|------|-------------------|--------|

| LCP | < 2,5s | 2,5s - 4,0s | > 4,0s |

| INP | < 200ms | 200ms - 500ms | > 500ms |

| CLS | < 0,1 | 0,1 - 0,25 | > 0,25 |

Beide Luma-installaties scoorden "slecht" op meerdere metrics. Na migratie naar Hyvä scoren ze "goed".

Impact op SEO-rankings

Beide webshops zagen organisch verkeer stijgen in de drie maanden na migratie. Migratie A: +18% organisch verkeer over 90 dagen. Migratie B: +11%.

Dit is geen gecontroleerd experiment. We schrijven de stijging niet volledig toe aan Core Web Vitals. Maar een webshop die structureel "slecht" scoort heeft een nadeel ten opzichte van concurrenten die "goed" scoren.

Impact op conversieratio

Google en Deloitte publiceerden onderzoek waaruit blijkt dat een verbetering van 0,1 seconde in laadtijd de conversieratio met gemiddeld 8% verhoogt in retail.

Onze observatie op migratie A: de conversieratio op mobiel steeg van 0,8% naar 1,3% in de twee maanden na livegang. Dat is een stijging van 62%.

Het punt: elke 100ms die je van je laadtijd afschaaft, is meetbaar geld waard.

Wanneer Hyvä NIET de oplossing is

Je probleem zit niet in het frontend

Als je TTFB boven de 2 seconden ligt, is je backend de bottleneck. Eerst de server, dan het thema.

Je hebt een complexe Luma-extensie-stack

Elke extensie met een frontend-component moet worden herschreven of vervangen. Bij twintig extensies stijgen de migratiekosten snel.

Je budget staat het niet toe

De migratie zelf is het grootste kostenpost, niet de licentie.

Je webshop is al goed geoptimaliseerd

Als je Lighthouse-score op mobiel al boven de 70 ligt, is de ROI minder evident.

Wat kost een Hyvä-migratie?

| Type project | Looptijd | Indicatieve kosten |

|-------------|----------|-------------------|

| Standaard thema, weinig extensies | 4-6 weken | €8.000 - €15.000 |

| Maatwerk thema, matige stack | 6-10 weken | €15.000 - €30.000 |

| Zwaar gecustomized, veel extensies | 10-16 weken | €30.000 - €60.000 |

Hyvä-licentie: €1.000 eenmalig (niet inbegrepen).

Bekijk onze Magento kostenpagina's voor een compleet overzicht, of lees meer over Hyvä-compatibele extensies.

Veelgestelde vragen

Werken alle Magento extensies met Hyvä?

Nee. Extensies met alleen backend-logica werken zonder aanpassing. Extensies met frontend-componenten moeten worden herschreven of vervangen.

Kan ik Hyvä op Magento 2.4.x gebruiken?

Ja. Hyvä ondersteunt Magento 2.4.x. We raden minimaal 2.4.4 aan.

Verbetert Hyvä ook de checkout?

De standaard Hyvä-checkout is sneller, maar de verbetering is minder dramatisch dan op cataloguspagina's.

Hoe lang duurt het voordat ik resultaten zie in Google?

Core Web Vitals-data wordt bijgewerkt op basis van een 28-daags gemiddelde. Verwacht 4-6 weken voor zichtbare verbeteringen in Search Console.

Is Hyvä geschikt voor B2B webshops?

Ja, maar met meer maatwerk. B2B-functionaliteit zoals offerteaanvragen en bedrijfsaccounts vereist meer development bij een Hyvä-migratie.