Hyvä Commerce en Core Web Vitals

Hyvä Commerce en Core Web Vitals

~95% minder JavaScript dan Luma. Dat getal verklaart waarom Hyvä-shops structureel hogere Core Web Vitals scoren dan klassieke Magento-frontends. LCP daalt, CLS verdwijnt vrijwel, INP scoort groen — en dat heeft directe invloed op SEO-rankings en conversie.

Wat Core Web Vitals meten en waarom ze tellen voor e-commerce

Google gebruikt drie signalen als rankingfactor:

• LCP (Largest Contentful Paint): Hoe snel het grootste zichtbare element laadt. Doel: onder 2,5 seconden.
• CLS (Cumulative Layout Shift): Hoeveel de pagina schuift terwijl content binnenkomt. Doel: onder 0,1.
• INP (Interaction to Next Paint): Hoe snel de pagina reageert op klikken en invoer. Doel: onder 200ms.

Een slechte score op deze drie kost je twee keer geld: je betaalt meer voor Google Ads per klik, én organische rankings zakken. Onderzoek van Deloitte toont een correlatie van ~0,1 seconde snellere laadtijd met 1% meer conversie. Op een webshop met een ton omzet per maand telt dat.

Waarom Luma en klassieke Magento-frontends structureel falen

Luma laadt standaard pakweg 400-600 KB aan JavaScript bij de eerste render. RequireJS laadt modules asynchroon, maar die modules blokkeren toch de thread. Het resultaat:

• LCP van 4-8 seconden op mobiel is geen uitzondering.
• INP van 500ms+ door JavaScript dat de main thread bezet houdt.
• CLS door lazy-load images zonder expliciete dimensies.

Dat is geen probleem van slechte hosting. Het is een architectuurprobleem. Meer server betalen lost dit niet op.

Hoe Hyvä het anders aanpakt

De stack is Tailwind CSS + Alpine.js. Geen RequireJS, geen KnockoutJS, geen jQuery als standaard dependency. Tailwind genereert bij build-time alleen de CSS-classes die je daadwerkelijk gebruikt — de stylesheet is typisch 5-15 KB. Alpine.js regelt interactiviteit met minimale overhead.

Het effect in cijfers:

Wij zien bij klanten die overstappen van Luma naar Hyvä consistent Lighthouse-scores van 95+ op productpagina's. LCP daalt gemiddeld met 60-70% op mobiel.

Automatische media-optimalisatie: de LCP-booster

LCP wordt op webshops bijna altijd bepaald door de producthero-afbeelding. Hyvä Commerce bundelt een automatische media-optimalisatiefunctie.

Concreet: afbeeldingen worden automatisch omgezet naar WebP, geresized naar de juiste afmetingen per breakpoint, en voorzien van lazy-load attributen (met expliciete breedte/hoogte, waardoor CLS nul wordt). Je hoeft als merchant geen aparte image-optimizer plugin te regelen.

De image editor en media-optimalisatie in Hyvä Commerce zijn onderdeel van de merchant-toolset — naast een modern CMS met live preview, een vernieuwd admin-theme en een dashboard.

INP: de minst begrepen metric

INP is de nieuwste Core Web Vital en de lastigste om te begrijpen. Het meet de vertraging tussen een gebruikersactie (klik, toetsaanslag) en de volgende render.

Op Luma-shops zijn de boosdoeners:

1. Event handlers die via RequireJS worden geladen na interactie.
2. KnockoutJS-observables die bij elke klik opnieuw de DOM berekenen.
3. Cart-updates die synchrone XHR-requests afvuren.

Alpine.js werkt anders. Interactiviteit is gedeclareerd in de HTML-attributen (x-on:click, x-data). Er is geen runtime discovery van modules. De browser weet bij parse-time al wat er moet gebeuren bij een klik.

Hyvä Checkout bouwt hier consequent op door. De checkout is een aparte React-applicatie (Hyvä Checkout gebruikt React intern), maar geïsoleerd van de rest van de pagina. Geen Luma-checkout met 200 KnockoutJS-observables. Wij zien checkoutconversie toenemen met 15-25% na migratie — waarbij snelheid en eenvoud beide meespelen.

De SEO-koppeling is directer dan je denkt

Google gebruikt Core Web Vitals als rankingsignaal via Page Experience. Maar het effect is genuanceerd:

• Bij gelijke relevantie wint de snellere pagina.
• Bij duidelijk betere relevantie wint de pagina ondanks slechtere performance.
• Op categoriepagina's (veel vergelijkbare content) telt performance zwaarder.

Dat betekent: voor een shop die concurreert op veel-gezochte categorietermen is Hyvä-performance een concrete SEO-troef. Niet magisch, maar meetbaar.

Bovendien: Google's crawlbudget is eindig. Een snellere shop wordt vaker gecrawld, wat nieuwe pagina's sneller geïndexeerd krijgt. Dat telt voor shops met grote catalogi.

Wat Hyvä Commerce kost tegenover wat het oplevert

Licentie: circa 3.000 euro per jaar, of rond 12.000 euro eenmalig voor doorlopend eigenaarschap. PPP- en trade-in-regelingen bestaan. De implementatie komt hier bovenop — reken op senior developer-uren voor migratie en maatwerk.

Ter vergelijking: wat kost een slechte Core Web Vitals-score?

• Hogere CPC op Google Ads door lagere Quality Score.
• Lagere organische rankings op competitieve termen.
• Hogere bounce rate op mobiel (pagina laadt te langzaam).

Een shop met 50.000 bezoekers per maand en 2% conversie die door snelheidsverbetering naar 2,3% gaat, genereert bij een gemiddeld orderwaarde van 80 euro al 12.000 euro extra omzet per maand. De licentiekosten verdienen zich terug in weken, niet jaren — mits de implementatie goed is uitgevoerd.

Hyvä Commerce vs. losse tooling samenstellen

Veel Magento-shops proberen performance te fixen met losse tools:

• Een apart image-optimalisatie-platform (Cloudinary, Imgix).
• Een custom Webpack-build om JavaScript te reduceren.
• Een third-party checkout (Mollie Components, custom React checkout).
• Een aparte CMS-laag bovenop Magento.

Dat werkt, maar je bouwt technische schuld op. Elke Magento-update vraagt om testen op vier losse tools. Bij team-wisseling of vakantie is niemand de eigenaar meer.

Hyvä Commerce is één onderhouden update-pad. Hyvä regelt de compatibiliteit tussen Theme, UI, Checkout en merchant-tools bij elke release. Dat is geen marketing-argument — het is een concrete tijdsbesparing op projectbeheer.

Technische noot: build-step en design tokens

Een veelgestelde vraag van developers: "Hoe werkt Tailwind met Magento's module-systeem?"

Hyvä gebruikt een Tailwind-config die alle module-templates scant via een content-pad. Voorbeeld uit een typische tailwind.config.js:

module.exports = {
  content: [
    './vendor/magento/**/*.phtml',
    './vendor/hyva-themes/**/*.phtml',
    './app/design/**/*.phtml',
    './app/design/**/*.html',
  ],
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
      },
    },
  },
}

Design tokens via CSS custom properties (--color-primary) maken het mogelijk om kleuren vanuit het admin-theme door te trekken naar alle componenten, zonder de Tailwind-build opnieuw te draaien. Hyvä UI levert kant-en-klare componenten die op dit systeem draaien.

De build-step — npm run build in de Hyvä-theme directory — genereert de geoptimaliseerde CSS. In productie is geen build-tooling nodig op de server.

Wanneer Hyvä Commerce niet de juiste keuze is

Eerlijk is eerlijk:

• Kleine shops met lage marges. Een shop met 5.000 euro omzet per maand heeft de ROI-cyclus van 12.000 euro eenmalig of 3.000 euro per jaar niet in het eerste jaar.
• Shops met veel custom Luma-extensies. Hyvä vervangt de hele frontend. Extensies die Luma-templates overschrijven, werken niet meer. Inventariseer eerst welke extensies je gebruikt en of er Hyvä-alternatieven zijn.
• Teams zonder frontend-ervaring. Tailwind en Alpine zijn te leren, maar je hebt een team nodig dat de overstap serieus neemt. Een copy-paste migratie zonder begrip van de stack leidt tot een Hyvä-shop met dezelfde problemen als Luma.
• Shops op verouderde Magento-versies. Hyvä Commerce vereist Magento 2.4.x. Als je op 2.3 zit, is de Magento-upgrade de eerste stap.

Wat wij doen bij coding.nl

Wij zijn Hyvä Certified senior developers. Geen bureau, geen projectmanagers. We werken aan Magento-shops door heel Nederland vanuit Emmen.

Bij een Hyvä-migratie beginnen we altijd met een grondige analyse: welke extensies gebruik je, wat is de huidige Core Web Vitals-baseline, en wat zijn de concrete business-doelen. Pas daarna bouwen we.

Wil je weten of Hyvä Commerce past bij jouw shop? Neem contact op via /contact voor een gratis Tech Check. We kijken naar je huidige stack en geven een eerlijk advies — ook als het antwoord "nog niet" is.