Als webshop eigenaar of e-commerce manager, wil je ervoor zorgen dat je webshop optimaal presteert en aantrekkelijk is voor je klanten. Een essentieel aspect van een succesvolle webshop is de front-end ervaring, die niet alleen snel en responsief moet zijn, maar ook moet voldoen aan de richtlijnen van Google’s Core Web Vitals. Als je hiervoor een oplossing zoekt, komt je al snel uit bij Hyvä. In dit artikel gaan we in op de voordelen van Hyvä en hoe ze kunnen bijdragen aan de verbetering van de prestaties van je webshop.
Wat is het Hyvä thema en welk probleem lost het op?
Een default Magento 2 installatie heeft out-of-the-box componenten. Een van die componenten is het front-end thema Luma. Je kunt hiermee webshops maken die voldoen aan uiteenlopende wensen en eisen. Maar, dat gaat vaak ten koste van de performance. Dit heeft te maken met de complexiteit van het thema.
Luma wordt bijvoorbeeld ondersteund door third-party-extensies. Dit lijkt in eerste instantie een manier om geld te besparen, maar het leidt tot trage laadtijden en heeft daardoor impact op SEO.
In de huidige concurrerende e-commercemarkt zijn snelle laadtijden en hoge rankings van onschatbare waarde. Daar komt het Hyvä-thema om de hoek kijken, een Magento-front-endoplossing met de beste prestaties, de beste ontwikkelaarservaring en de kortste time-to-market.
Hyvä tech-stack
Op hun eigen website geven ze duidelijk aan wat hun filosofie is: “All Hyvä products are built with the purpose to lower dependencies to 3rd party libraries. We try to keep the technology stack limited to as few as possible.”
Minder en betere script libraries
Hyvä maakt gebruik van moderne technologieën, waaronder Tailwind CSS voor styling, Alpine JS voor JavaScript, en er is een sterke focus op Google Web Vitals. Hierdoor is het zeer snel en lichtgewicht. Daarnaast is ervoor gekozen om bepaalde onderdelen van het Luma-thema te verwijderen, zoals Knockout JS, RequireJS en UIComponents. Dus afscheid van het oude en welkom aan het nieuwe.
Magewire Checkout
Hyvä heeft nu een splinternieuwe check-out die gebouwd is met Magewire (je leest straks wat Magewire is). Deze nieuwe check-out is in vele opzichten beter dan de default Luma check-out. Een van de grote verschillen hierin is dat de logica van front-end naar de back-end is verhuisd; wat de meeste check-outs op de front-end doen met behulp van JavaScript, doet de nieuwe Hyvä checkout in de back-end. En minder JavaScript is minder laadtijd.
Magewire in simpele termen: Magewire is een Magento-framework waarmee ontwikkelaars op een eenvoudige manier moderne, responsieve en dynamische interfaces kunnen bouwen. Het alternatief zou een volledig JavaScript-framework zijn, zoals Vue of React. Maar dat is complex en tijdrovend.
Magewire in technische termen: Magewire is een port van Laravel Livewire voor Magento 2. Het stelt ontwikkelaars in staat om dynamische front-ends te bouwen met behulp van PHP, zonder uitgebreid JavaScript te hoeven schrijven. Magewire maakt gebruik van fetch requests (voorheen bekend als "AJAX") om de frontend en backend automatisch met elkaar te verbinden.
Willem Poortman is Solution Specialist bij Hyvä. Tijdens een Hyvä Meetup gaf hij het voorbeeld van een developer die feedback had op Magewire “for a quick order feature they needed 70 plus hours and with Magewire it only took 14 hours”.
Betere Prestaties en Gebruikerservaring
Het belangrijkste kenmerk van Hyvä is de drastische vermindering van de hoeveelheid code in de front-end (oftwel de code die wordt geladen in de browser van de eindgebruiker), waardoor maximale prestaties worden bereikt. Zo heeft Hyvä bij een standaard installatie direct een 100 score in Google’s Core Web Vitals. Dit draagt natuurlijk bij aan een verbeterde gebruikerservaring, een hogere conversie én een betere SEO-ranking voor je webshop.
Let wel, deze score kan al snel lager uitvallen als je tijdens de front-end ontwikkeling van je webshop tóch allerlei scriptjes (inefficient) gaat inladen. Denk aan je Google Tag Manager en de verschillende marketing tools die je gebruikt. Je moet dus in eerste instantie zorgvuldig kiezen wat je inlaadt. Vervolgens wil je ook slim nadenken over hoe en wanneer je wat inlaadt. Denk bijvoorbeeld aan een chat. Je kunt ervoor kiezen om de gehele chatfunctionaliteit in te laden wanneer iemand op je webshop komt óf je kiest ervoor om het in te laden wanneer iemand op de chat knop drukt rechts onderin. Zo bespaar je wederom belasting op je pagespeed.
Vereenvoudigde Development
Vooral developers zijn te spreken over Hyvä. Het ontwikkelen is gemakkelijk omdat het gebruikmaakt van het PHP-templating systeem van Magento. Bovendien heeft Hyvä overbodige elementen zoals RequireJS, KnockoutJS en UIComponents verwijderd, waardoor de codebasis van je webshop wordt versimpeld. Deze vereenvoudiging resulteert in tijdsbesparingen van 25 tot 50% in vergelijking met standaard oplossingen zoals het Luma-thema of PWA (Progressive Web App)-oplossingen.
Ecosysteem en Community
Het bijzondere aan Hyvä is niet alleen het front-end thema, maar ook de community eromheen. Dankzij deze actieve community van meer dan 2400 developers blijft het thema innovatief en technisch robuust.
Er zijn inmiddels meer dan 200 compatibele extensies die je kunt gebruiken om de functionaliteit van je webshop uit te breiden. Bovendien kun je rekenen op ondersteuning via Slack communities, waar je terecht kunt met je vragen. Hyvä heeft al het vertrouwen gewonnen van meer dan 370 agencies en een solide reputatie opgebouwd in de Magento-gemeenschap.
Praktijkvoorbeeld: Hyvä Check-out met Magewire
Een praktisch voorbeeld van de voordelen van Hyvä en Magewire is de optimalisatie van de checkout-ervaring in een webshop. Hyvä biedt een snelle one-page layout aan op desktop. Dit is iets wat niet mogelijk is met het Luma thema wat standaard in Magento zit. Deze mobiele checkout is maar liefst 13 keer sneller dan de standaard checkout op het Luma-thema.
Het gebruik van Hyvä in combinatie met Magewire zorgt ervoor dat je de Google Web Vitals-score van je webshop kunt optimaliseren en de gebruikerservaring kunt verbeteren. Daarnaast is het belangrijk om de compatibiliteit van modules tussen het Luma-thema en Hyvä te onderzoeken, aangezien niet alle modules volledig compatibel zijn. Echter, Hyvä biedt al ±200 compatibility modules, waaronder modules van Amasty, die je gewoon kunt blijven gebruiken.
Conclusie
Hyvä is de perfecte keuze als je snellere laadtijden en vereenvoudigde development zoekt. Je profiteert van maximale prestaties, voldoet aan de richtlijnen van Google Web Vitals en behaalt een betere SEO-ranking. Daarnaast vereenvoudigt Hyvä de ontwikkeling van je webshop en verkort het de time-to-market. Daarbij biedt Magewire de mogelijkheid om dynamische en reactieve interfaces te bouwen zonder uitgebreid JavaScript te hoeven schrijven. Door te kiezen voor Hyvä en daarbij gebruik te maken van Magewire kun je de levensduur van je Magento-platform verlengen en je webshop naar een hoger niveau tillen.
Maar, het is ook niet de heilige graal. Hoewel de belofte van snellere laadtijden als muziek in de oren klinkt, blijft het van belang om Core Web Vitals te blijven controleren. Als je dit niet doet mis je de boot en heb je toch een trage webshop.
Daarnaast vereist Hyvä ook een bepaalde blik op zaken. Namelijk, weglaten wat niet cruciaal is. Dat betekent dat je -in sommige gevallen- ook in staat moet zijn om te reduceren in complexiteit. Maatwerk en Hyvä kom je niet snel in dezelfde zin tegen. Dus, heb je een webshop met veel complexiteit en hoge ordervolumes? Dan is Hyvä misschien niet de beste optie.
Heb je een webshop die in de groeifase zit van ±1 miljoen naar ±20 miljoen jaaromzet? Dan kunnen we in veel gevallen Hyvä aanbevelen. Dan is het een kwestie om samen een business case op te stellen en te kijken -binnen jouw e-commerce totaalplaatje- of het nú tijd is om over te gaan op Hyvä.
