Het project: redesign van de webshop en implementatie van een nieuwe checkout
AEDcompany is op 13 oktober live gegaan met een nieuw design op basis van Hyvä Theme. Wat was het doel? De performance van de webshop te maximaliseren. Er is gekeken naar de functies binnen Hyvä Theme en naar de wensen van de klant. Er is uiteindelijk gekozen om zo dicht mogelijk bij de Hyvä elementen te blijven om performance te maximaliseren.
De volgende stap binnen dit project was het implementeren van Hyvä Checkout. De webshop van AEDcompany maakte voorheen gebruik van Amasty one step checkout. Tijdens het redesigntraject hebben wij samen met de klant besloten om over te stappen naar Hyvä Checkout.
Zoals eerder genoemd was het doel om de performance te maximaliseren. Daarom is er gekozen om zowel het thema als de checkout vanuit hetzelfde ecosysteem te bouwen. Tijdens de implementatie van de checkout is er gekozen om zo dicht mogelijk bij de defaultcode te blijven. Onze developers hebben hiervoor gekozen om de snelheid te maximaliseren. Tijdens de testperiode werd deze wens ook gevalideerd.
Sinds de livegang van Hyvä Theme en Hyvä Checkout zijn de Core Web Vitals flink verbeterd met een gemiddelde van 50,48%. Hieronder lees je in detail hoe de verbeteringen eruitzien voor zowel desktop als mobiel.
Core Web Vitals: Desktop verbeteringen
Via RUMvision kunnen we de Core Web Vitals meten. Hoe hebben wij deze meting gedaan? Vanaf het moment van livegang hebben we verschillende meetpunten. Wat is het gemiddelde resultaat? Na de Hyvä Theme implementatie zijn de Core Web Vitals op desktop met 62,2% verbeterd. Hieronder zie je in detail de verbeteringen.
Core Web Vitals: Mobiele verbeteringen
De grootste verbetering zien we op de mobiele versie. De Core Web Vitals zijn met 38,70% verbeterd. Hieronder zie je in detail de verbeteringen.
- Largest Contentful Paint (LCP): 63,% verbetering
- Interaction to Next Paint (INP): 52,6% verbetering
- First Contentful Paint (FCP): 46,9% verbetering
Over Hyvä Theme & Checkout
Hyvä Theme is een Magento-frontendoplossing. Wat is een doel? Een betere ervaring voor klanten en verbetering in resultaten zoals Core Web Vitals. Daarom wordt de frontend met een leeg thema aangeleverd. Layout.xml-, .phtml-bestanden en alle JavaScript zijn verwijderd. Hyvä Thema is sinds vorig jaar open source geworden. Elke Magento-webshop kan dus aan de slag met Hyvä Theme. Hyvä Theme kan je het beste combineren met Hyvä UI.
Hyvä Checkout is een Magento 2-oplossing die zorgt voor een snellere manier van afrekenen, minder frictie en een hogere conversie. Hyvä Checkout is ideaal voor webshops die hun performance willen verbeteren.
Wat zijn Core Web Vitals?
Core Web Vitals zijn verschillende meetpunten die zijn opgesteld door Google. Ze helpen om actuele en daadwerkelijke user experience te meten aan de hand van laadsnelheid, interactiviteit en visuele stabiliteit. Het gaat om de volgende aspecten: Largest Contentful Paint, Interaction To Next Paint en Cumulative Layout Shift, Lees meer over Core Web Vitals door te klikken op de onderstaande afbeeldingen.
