Hyvä UI en Core Web Vitals

Hyvä UI en Core Web Vitals

95% minder JavaScript dan Luma — dat is geen marketingclaim, dat is de architectuur. Hyvä UI is gebouwd op Tailwind CSS en Alpine.js, en die keuze heeft directe gevolgen voor je LCP, CLS en INP. Dit artikel legt uit hoe, met concrete cijfers en de link naar conversie en SEO.

Wat Core Web Vitals meten (en waarom het voor webshops telt)

Google meet drie signalen als onderdeel van de Page Experience ranking:

• LCP (Largest Contentful Paint): hoe snel het grootste element in beeld verschijnt. Doel: onder de 2,5 seconden.
• CLS (Cumulative Layout Shift): hoe erg de pagina verschuift terwijl die laadt. Doel: onder de 0,1.
• INP (Interaction to Next Paint): hoe snel de pagina reageert op klikken of typen. Doel: onder de 200 milliseconden.

Slechte scores kosten je twee dingen tegelijk: Google-posities en conversie. Een vertraging van 1 seconde in laadtijd verlaagt conversies met 7% (bron: Deloitte / Google, herhaald bevestigd in e-commerce benchmarks). Op een webshop met 100.000 euro maandomzet is dat 7.000 euro per seconde vertraging.

Waarom Luma structureel slecht scoort

Magento 2 met de standaard Luma-frontend laadt tientallen JavaScript-bestanden via RequireJS. KnockoutJS initialiseert componenten asynchroon. jQuery draait als basis voor bijna alles.

Wij zien bij klanten die van Luma komen vaak:

• LCP boven de 4-5 seconden op mobiel
• INP boven de 500 milliseconden bij productstages met veel widgets
• CLS-problemen door lazy-loaded blokken die de layout duwen

De oorzaak is geen misconfiguratie. Het is de fundamentele architectuur: JavaScript blokkeert rendering, en er is veel van.

Hoe Hyvä UI de Core Web Vitals beïnvloedt

Hyvä UI is de officiële componentbibliotheek van Hyvä. Gebouwd op HTML-first principes: de markup staat centraal, JavaScript wordt alleen toegevoegd waar interactie echt nodig is — via Alpine.js, dat in totaal minder dan 15 kB weegt (gzipped).

Dat heeft drie directe gevolgen:

LCP verbetert omdat er minder render-blocking JavaScript is. De browser kan de HTML sneller parsen en het grootste element — vaak een productafbeelding of hero-banner — eerder renderen. CLS verbetert omdat componenten via Tailwind CSS bepaalde afmetingen krijgen die direct in de HTML staan. Geen "shift" door laat-geladen JavaScript dat de DOM herschrijft. INP verbetert omdat Alpine.js event handlers synchroon en lichtgewicht zijn. Er is geen zware JS-runtime die de main thread blokkeert wanneer een gebruiker klikt.

Lighthouse-scores van 95+ zijn haalbaar. Wij zien dat niet op elke store — het hangt ook af van serversnelheid, afbeeldingen en third-party scripts — maar de component-architectuur staat het niet in de weg. Met Luma is 95+ bijna niet te bereiken zonder ingrijpende aanpassingen.

De componenten in Hyvä UI

De bibliotheek bevat de bouwstenen die een Magento 2 (of andere) frontend nodig heeft:

• Buttons, forms, inputs, labels
• Modals en overlays
• Dropdowns en selects
• Accordions en tabs
• Navigatie (inclusief mega-menu patronen)
• Product cards

Elk component is gebouwd met Tailwind-utility classes en Alpine.js directives. Geen build-step voor de componenten zelf, geen abstractielaag tussen jou en de DOM.

Het Figma Community-bestand bevat dezelfde design tokens die in de code zitten. Als het in Figma zo uitziet, ziet het er in de browser precies zo uit. Dat scheelt discussies én afwijkingen die CLS veroorzaken.

Concrete impact per Core Web Vital

Dit zijn richtgetallen op basis van migraties die wij hebben begeleid. Jouw cijfers hangen af van hosting, afbeeldingsoptimalisatie en externe scripts (chat, analytics, review-widgets). Maar de orde van grootte klopt.

De SEO-link: van techniek naar positie

Google gebruikt Core Web Vitals als rankingfactor via Page Experience. De impact is gedocumenteerd maar niet enorm op zichzelf — relevantie en autoriteit wegen zwaarder. De combinatie is wat telt.

Stel: twee vergelijkbare Magento 2-webshops, vergelijkbare content, vergelijkbare links. De ene scoort "goed" op alle drie de Vitals, de andere "slecht". Google geeft de betere gebruikerservaring voorrang. Dat is het mechanisme.

Maar er is een indirect effect dat groter is. Snellere pagina's verhogen tijd-op-site, verlagen bouncepercentage en verhogen conversie. Die gedragssignalen beïnvloeden ranking. De Hyvä UI-architectuur adresseert het directe en het indirecte tegelijk.

Van Core Web Vitals naar conversie

Lees over Hyvä UI conversie patterns voor de specifieke patronen die wij inzetten, maar de basislogica is dit:

Sneller laden verlaagt het aantal gebruikers dat afbreekt voor de eerste render. Snellere INP maakt de productpagina en checkout responsiever. Minder CLS betekent dat gebruikers niet per ongeluk op het verkeerde element klikken — wat in checkout letterlijk leidt tot fouten en uitval.

Wij zien bij klanten na migratie naar Hyvä (met Hyvä UI-componenten) gemiddeld:

• 20-35% verbetering in mobiele conversie
• 15-25% meer sessies die een productstage bereiken
• Meetbare daling in checkout-abandonment op mobiel

Dit zijn geen garanties. Het zijn trends uit migraties waarbij ook andere factoren meespelen.

Hyvä UI is geen Hyvä theme

Dit is een misverstand dat regelmatig opduikt. Een Hyvä theme is de volledige Magento 2 frontend die de Luma-stack (RequireJS, jQuery, KnockoutJS) vervangt. Dat is een grootschalige migratie.

Hyvä UI is een losse componentbibliotheek. Je kunt die gebruiken:

• Bovenop een Hyvä theme (de voor de hand liggende combinatie)
• In een Laravel-project
• In een headless frontend
• In een statische site

Framework-agnostisch, dus. De performance-voordelen komen voort uit de HTML-first aanpak en Alpine.js, niet uit de Magento-context.

De prijs is eenmalig (circa 250 euro), per-ontwikkelaar of per-project, geen abonnement. Dat is laagdrempelig genoeg om te evalueren op een bestaand project.

Implementatie: waar zit de complexiteit?

Hyvä UI zelf is niet complex. Tailwind ken je of leer je snel. Alpine.js is eenvoudig te leren voor elke developer met JavaScript-basiskennis.

De complexiteit zit elders:

• Magento-integratie: componenten koppelen aan blokken, layouts en PHP-templates vraagt Magento-kennis.
• Theming: design tokens goed instellen zodat alles consistent is, kost tijd.
• Third-party modules: niet elke Magento-module levert Hyvä-compatibele templates. Je hebt compatibiliteitspakketten of maatwerk nodig.
• Afbeeldingen en hosting: Hyvä UI lost geen trage server of ongeoptimaliseerde afbeeldingen op. Die factoren beïnvloeden LCP onafhankelijk.

Een Hyvä UI-implementatie heeft geen build-step voor de componenten zelf, maar je Magento-omgeving heeft wel Tailwind CSS nodig. Dat is standaard onderdeel van een Hyvä-setup.

Wanneer Hyvä UI niet de juiste keuze is

Eerlijk is eerlijk: Hyvä UI is niet altijd de beste optie.

Kies Hyvä UI niet als:

• Je nog op Luma zit en geen Hyvä theme-migratie plant. Je kunt Hyvä UI los van Luma gebruiken, maar in de praktijk is de combinatie Luma + Hyvä UI ongebruikelijk en levert het geen architectureel voordeel op.
• Je een headless setup hebt met een ander design system. Twee overlappende componentbibliotheken is verspilling.
• Je team geen Tailwind CSS-kennis heeft en dat ook niet wil opdoen. Tailwind vereist een andere manier van denken dan klassieke CSS-architectuur. Zonder die kennis wordt de codebase onoverzichtelijk.
• Je Core Web Vitals-problemen primair veroorzaakt worden door trage hosting, ungeoptimaliseerde afbeeldingen of zware third-party scripts. Hyvä UI lost die niet op.

De bibliotheek is een goed gereedschap voor teams die Tailwind en Alpine.js kennen (of willen kennen) en die werken in de Hyvä-ecosysteem.

Wat wij zien bij Hyvä-projecten

Wij zijn Hyvä Certified developers. Dat betekent dat we de architectuur kennen, de valkuilen kennen en de compatibiliteitsvraagstukken kennen.

Wat wij in de praktijk zien:

• LCP die onder de 2 seconden komt op mobiel, ook zonder CDN, als de afbeeldingen op orde zijn.
• INP onder de 100 milliseconden op productpagina's met Hyvä UI-componenten, zonder custom optimalisaties.
• CLS van vrijwel nul op statische pagina's; op dynamische pagina's (productlijsten met filters) vergt het soms extra werk.

De architectuur geeft je een startpositie die met Luma onbereikbaar is. Wat je er daarna mee doet, hangt af van implementatiekwaliteit en aandacht voor de factoren buiten de componentbibliotheek.

Klaar om te meten?

Als je twijfelt of jouw Magento 2-store klaarstaat voor een Hyvä-traject, begin dan met meten. Google PageSpeed Insights geeft je de huidige Core Web Vitals. Dat zijn je nulmetingen.

Wil je weten wat er technisch te winnen valt en wat dat vraagt? We doen een gratis Tech Check. Geen pitch, geen verkoopgesprek — gewoon een eerlijk technisch oordeel over je huidige stack, je scores en wat een migratie naar Hyvä realistisch oplevert. Neem contact op via /contact.