by admin |

• E-commerce
• Magento
• News
• Website development

juli 1, 2022

Hyvä Thema: de game-changer

Het is een kwestie van gezond verstand dat elke e-commerce eigenaar meer verkeer naar zijn winkel wil brengen en vervolgens een manier wil vinden om die bezoekers terug te laten komen. Zo belangrijk als het is om meer verkeer te brengen, zo belangrijk is het ook om kwaliteits verkeer te hebben. De bottom line is dat hoewel veel verkeer een goede zaak kan zijn, het hebben van hoge conversies toch tot een beter resultaat leidt– dit is waar het kwaliteit verkeer bij komt kijken.

Er zijn veel verschillende manieren om dit doel te bereiken, vandaag richten wij ons op de technische kant hiervan. Om goed om te kunnen gaan met meer verkeer, mensen de website opnieuw te laten bezoeken en vervolgens meer conversies te krijgen, moet het volgende verbeterd worden:

• Paginasnelheid/ Laadtijd verkorten
• Paginaprestatie
• SEO-score
• Klantervaring

Het volgende moet dan ook verminderd worden:

• Paginaverzoeken
• Grootte van de hulpbron die door elke pagina wordt geladen

Magento is een van de beste CMS’en die mensen kiezen voor de unieke functionaliteit, uitzonderlijke functies en snelheid. Schone Magento met standaard thema en voorbeeldgegevens werkt erg snel. Maar wie wil tegenwoordig een simpel uitziende website die vele anderen al in gebruik hebben? Correct – niemand. Zodra u begint met het toevoegen van extra functionaliteit, aanpassingen en third-party modules, begint de snelheid echter te verminderen.

Als het gaat om Magento 2 en het verbeteren van de pagina prestaties, het standaard thema – Luma – die vaak wordt gebruikt als basis voor de aangepaste thema’s, heeft dit zo zijn beperkingen. Er zijn veel stappen die genomen moeten worden om een goed geoptimaliseerde website neer te kunnen zetten. Afhankelijk van de specifieke functionaliteiten, vereisten en designs, kan het moeilijk zijn om goede resultaten te scoren.

Bovendien vereist het meestal een combinatie van krachten aan zowel de backend als aan de frontend kant. Zelfs als u erin slaagt om alles goed te optimaliseren en een goede score te behalen, kan het aanbrengen van enkele eenvoudige wijzigingen op uw website een negatief effect hebben – het is dus een constante strijd om de prestaties op een hoog peil te kunnen houden.

Maar, wat als ik u vertelde dat u niet langer beperkt bent door de technologieën die Magento standaard thema biedt? Tijd voor Hyvä thema om met zijn nieuwe technologie in te stappen. De makers beloven een alternatief voor Magento 2 Frontend met verminderde complexiteit, betere prestaties en een verbeterde ontwikkelaar ervaring. Ze ontdoen zich van zware JS bibliotheken en vereenvoudigen de stylesheet.

Ongeveer een maand voordat het daadwerkelijk uitkwam, kregen wij deze teaser tweet met screenshot van de prestaties van een live build met Hyvä thema:

Wednesday I teased you about our new Hyvä. build, today the word is out – go check out https://t.co/ny3KOjGVAG

4x 100 Lighthouse scores and sub-300ms pages; it is insanely fast!

Here is our case study (in Dutch, but Google Translate is your friend): https://t.co/orTkoKQhtV pic.twitter.com/IYVAzxwj2l

— Peter Jaap Blaakmeer (@PeterJaap) January 22, 2021

Ik moet toegeven, het trok wel onze aandacht. Herinnert u zich die technologische beperkingen die het standaard Magento 2 thema heeft? Nou, de meest opmerkelijke veranderingen die Hyvä brengt zijn het vervangen van KnockoutJS met AlpineJS en het gebruik van TailwindCSS. Dit betekent een geheel nieuwe benadering van het schrijven van JS en stijlen, evenals het bouwen van assests die sterk verbetert Magento winkel prestaties. AlpineJS en TailwindCSS zijn veel vriendelijker, makkelijker in gebruik en licht van gewicht.

Zoals Willem Wigman, de man achter het Hyvä idee, zei in zijn aankondiging presentatie – Magento’s standaard externe bibliotheken en complexe stylesheet verzenden zo veel als 5MB aan gegevens. Dat zal zeker je Google Lighthouse resultaten verpesten. Door het terug te brengen tot TailwindCSS en AlpineJS, waren ze in staat om het te reduceren tot minder dan 100kB voor compressie. Dus dat alleen al is een potentiële enorme boost voor de prestaties van een website.

Voor de rest zijn hun principes:

• verbeterde prestaties – gebouwd om snel te werken
• minder complex – groot deel van de codebase verwijderd en sjablonen vanaf nul opgebouwd op een veel eenvoudigere manier
• verbeterde ontwikkelsnelheid – momenteel misschien een van de meest efficiënte manieren om Magento 2 winkels te bouwen
• minder afhankelijkheden – zoals ik al zei, Magento met alleen AlpineJS en TailwindCSS

Het is duidelijk waarom Hyvä zo populair wordt in de Magento gemeenschap – naast betere prestaties, krijg je ook een vriendelijkere ontwikkelomgeving wat leidt tot eenvoudiger onderhoud.

Casestudie

Laten we nu eens een kijkje nemen op onze eigenlijke implementatie. We gaan de resultaten bekijken van een van onze klanten die een Magento 2 webshop gebruikt. Wat wij kunnen zien zijn een aantal duidelijke verbeteringen.

Het thema had veel op maat gemaakte functionaliteiten en modules van derden die niet standaard door Hyvä worden ondersteund, dus dat moest allemaal herschreven worden met AlpineJS. Dat was de grootste uitdaging – we moesten compatibiliteitsmodules maken om alles samen te laten werken met het nieuwe thema. Hopelijk zien wij in de komende tijd een groter aantal extensie-ontwikkelaars die hun modules compatibel maken met Hyvä, zodat wij zelf geen compatibiliteitsmodules meer hoeven te maken.

Toen het eenmaal werkte en wij ons eigen thema hadden gemaakt – dit keer gebaseerd op Hyvä in plaats van Luma – waren wij erg enthousiast over het uitvoeren van een analyse van de prestaties van de site.

Na het Hyvä-thema:
Desktop:

Mobiel:

Zonder specifieke acties met betrekking tot optimalisatie van de inhoud en dezelfde gegevens, maar met gebruikmaking van Hyvä, was dit het resultaat:

Na het Hyvä-thema:
Desktop:

Mobiel:

Nu wij deze aanzienlijke verbetering in de prestaties, toegankelijkheid en best practices kunnen zien, met een paar tweaks met inhoud en SEO, zullen wij hoge scores halen in alle afdelingen. Iets wat met Luma erg moeilijk te bereiken is bij soortgelijke projecten.

Dat is nog niet alles, kijk maar eens naar het aantal verzoeken voor en na de Hyvä-installatie:

Aangepast thema gebaseerd op Magento Luma:

Aangepast thema gebaseerd op Hyvä:

Voor wie is het Hyvä-thema bedoeld?

Het is veilig om te zeggen dat het Hyvä thema geschikt is voor elke online winkel. Vooral voor degenen die up-to-date technologieën waarderen en het belangrijk vinden om bij te blijven met de nieuwe en verbeterde trends. Het hebben van het sneller, beter presteren, het aanbieden van een betere gebruikerservaring voor bezoekers en hierdoor zorgen dat ze terugkomen. Dat alles is hier om uw hoofddoel te bereiken – een betere ranking krijgen, hoger scoren en eindigen met meer verkoop.

Vanuit het oogpunt van de ontwikkelaars hebben wij opnieuw goed nieuws te melden. Ontwikkelaars die met Hyvä werken genieten van het proces en hebben gezegd dat het team het goed heeft geaccepteerd. Meer specifiek – ze houden van het feit dat het up-to-date is en de meest efficiënte manier is om Magento te ontwikkelen.

Het andere belangrijke ding dat zij noemen is de sterke gemeenschap eromheen. Een gemeenschap die bestaat uit ontwikkelaars die werken met Hyvä en ontwikkelaars die het gemaakt hebben. Deel uitmaken van zo’n community is ideaal om op de hoogte te zijn van het laatste nieuws en samen te kunnen werken. De constante ondersteuning wordt zeer gewaardeerd.

Het Hyvä-thema is nog behoorlijk jong en voortdurend in ontwikkeling. Steeds meer ontwikkelaars stappen nu aan boord van het Hyvä-schip. Concluderend, er is duidelijk te zien hoe voordelig het is en hoezeer de prestaties in alle afdelingen zijn verbeterd. Er is geen twijfel mogelijk – we zullen zeker in deze richting verder gaan.