Hyvä vs Luma-benchmark: 4× lichtere pagina's, 18× minder JavaScript

De meeste vergelijkingen tussen Hyvä en Luma zetten een nieuwe Hyvä-webshop tegenover een oude, zwaar aangepaste Luma-webshop. Daardoor ziet Hyvä er geweldig uit, maar het vertelt je niet wat de frontend zelf verandert.

Wij wilden een eerlijke test. Daarom zetten we beide frontends op dezelfde server, met dezelfde catalogus, en maten we dezelfde pagina's.

Hoe we hebben getest

De opzet was bewust saai, zodat het thema de enige variabele was.

• Een schone installatie van Magento 2.4.9 met Hyvä 1.5.2, vergeleken met het eigen Luma-thema van Magento.
• Dezelfde server, dezelfde catalogus en dezelfde configuratie voor beide.
• Drie paginatypes: home, categorie en product.
• Lighthouse 13, met de mediaan van 3 mobiele runs plus 1 desktoprun per pagina.

We draaiden Lighthouse vanaf de command line in headless Chrome met een normale browser-user-agent. Onze nginx blokkeert user agents van bots, en een geblokkeerde test geeft een 403-pagina terug die een valse, betekenisloze score oplevert.

We hebben ook vóór elke reeks de cache geleegd en opgewarmd, en de echte URL's achter het CDN getest. De volledige methode staat in ons artikel over hoe we de snelheid van Hyvä testen met Lighthouse.

De resultaten

Kort gezegd waren Hyvä-pagina's ongeveer vier keer lichter. Ze deden grofweg 13 tot 18 keer minder requests. Ze laadden grofweg 18 tot 20 keer minder JavaScript. De mobiele LCP was ongeveer 35% sneller.

Waar het gewicht vandaan komt

Het verschil zit vooral in JavaScript en het aantal bestanden.

Een Luma-pagina laadt RequireJS, dat vervolgens jQuery, KnockoutJS, jQuery UI-widgets en een lange lijst kleine modules laadt. Elke module is een aparte request, tenzij je ze bundelt, en bundelen is in Luma berucht lastig om goed te krijgen.

Een Hyvä-pagina laadt Alpine.js en de kleine hoeveelheid paginaspecifiek script dat rechtstreeks in de templates is geschreven. De styling komt uit één Tailwind CSS-bestand met alleen de classes die het thema echt gebruikt.

Daarom daalt het aantal requests van meer dan 250 naar minder dan 20. En daarom daalt de JavaScript van ongeveer een halve megabyte naar ongeveer 26 KB.

We zetten de twee stacks naast elkaar in hoe Alpine.js en Tailwind RequireJS en Knockout vervangen.

Eerlijk is eerlijk: Luma scoorde ook goed

Kijk nog eens naar de Lighthouse-rij. Een schoon Luma-thema scoorde mobiel tussen 88 en 99.

Dat is geen vergissing. Een schone Luma-webshop in production mode, op een snelle server, achter Cloudflare en zonder verdere installaties, kan in een labtest goed scoren.

Echte Luma-webshops zien er zelden zo uit. Ze draaien extensies, trackingscripts, chatwidgets en reviewwidgets, en elk daarvan voegt extra JavaScript toe bovenop een toch al zware basis.

De nuttige conclusie is dus niet dat Hyvä hoger scoort. De nuttige conclusie is dat Hyvä vanuit een veel lichtere basis begint, waardoor er ruimte overblijft voor wat een echte webshop nodig heeft.

Waarom labscores het verschil onderschatten

Lighthouse simuleert een middenklasse telefoon op een vertraagde verbinding. Het is een goede, herhaalbare tool, maar het blijft een simulatie op een snelle computer.

Op een echte budgettelefoon moet een halve megabyte JavaScript worden gedownload, geparst en uitgevoerd door een trage processor. Dat werk blokkeert de main thread en vertraagt elke tik.

Daar lijdt Interaction to Next Paint, oftewel INP, onder. Een shopper die op “In winkelwagen” tikt en moet wachten, merkt het verschil, ook al zag de labscore er prima uit.

Met ongeveer 26 KB JavaScript heeft een Hyvä-pagina simpelweg veel minder te verwerken. Onze Core Web Vitals-checklist voor Magento 2 behandelt de andere knoppen om aan te draaien voor LCP en INP.

Wat dit betekent voor een echte webshop

Een benchmark op een schone installatie is een startpunt, geen belofte. Je eigen cijfers hangen af van je extensies, afbeeldingen, scripts en server.

Dit is wat we in de praktijk hebben gezien:

• Bij een klantwebshop, een Duitse shop die in 9 landen verkoopt, ging de mobiele Lighthouse-score van de productpagina na de overstap naar Hyvä van 72 naar 94. De categoriepagina ging van 88 naar 95. Dit zijn onze metingen op de stagingbuild.
• Op onze eigen Hyvä-demowebshop, met echte productafbeeldingen, twee store views en een internationale checkout, maten we mobiel 96 op home, 90 op categorie- en 92 op productpagina's. Desktop scoorde 100, 100 en 98.

De cijfers van de demowebshop liggen lager dan de schone benchmark, omdat er echte content op staat. Dat is normaal, en precies de reden dat we elke webshop afzonderlijk meten.

Hoe je deze cijfers gebruikt

Overweeg je een overstap, vergelijk dan je live Luma-webshop niet met de Hyvä-demo van een leverancier. Vergelijk appels met appels.

1. Meet je huidige home-, categorie- en productpagina's met een consistente methode.
2. Zet je extensies en scripts van derden op een rij, want die bepalen hoeveel van de winst je overhoudt.
3. Controleer je server- en cache-instellingen, want Hyvä kan een trage backend niet repareren.
4. Schat pas daarna in wat Hyvä voor jouw webshop zou veranderen.

Als we een Hyvä-webshop bouwen, garanderen we bij de livegang een mobiele Lighthouse Performance-score van minimaal 89 voor home-, categorie- en productpagina's. Dit geldt op een voor Hyvä geoptimaliseerde server en met de afbeeldingen en scripts die in het projectplan zijn afgesproken.

Veelgestelde vragen

Waarom hebben jullie een schone Luma getest in plaats van een echte webshop?

Een schone installatie isoleert het effect van de frontend zelf. Echte webshops voegen er extensies en scripts aan toe, waardoor het verschil meestal groter wordt.

Scoort Hyvä altijd hoger in Lighthouse?

Niet altijd met een grote marge. Het grotere en betrouwbaardere verschil zit in paginagewicht, aantal requests en JavaScript, en die raken echte shoppers meer dan de labscore laat zien.

Is een 35% snellere LCP merkbaar?

Ja, vooral op mobiel. In onze test ging de mobiele LCP van ongeveer 2,3 tot 2,5 seconden op Luma naar ongeveer 1,5 tot 1,6 seconden op Hyvä.

Wil je dezelfde vergelijking voor je eigen webshop? Bekijk onze vergelijking Luma vs Hyvä en hoe we een overstap naar Hyvä plannen op de Hyvä-themaontwikkeling pagina.