Grasscity
Grasscity, wereldwijd leider in cannabisaccessoires, vernieuwde zijn Magento 2-store met het Hyvä-thema en behaalde snellere prestaties, schonere code, naadloze integraties en een schaalbare eCommerce-ervaring op alle apparaten.
Jul 2016 - Feb 2023
Grasscity, een van de grootste online headshops ter wereld, bedient een enorme community met duizenden producten en miljoenen maandelijkse bezoekers. De migratie naar Hyvä verbeterde de prestaties aanzienlijk en zorgde voor een visueel aantrekkelijke gebruikerservaring.
Over het project
Grasscity is een van de bekendste online retailers in de markt voor cannabisaccessoires. Het platform heeft een levendig communityforum met meer dan een half miljoen leden, waar gebruikers ervaringen delen en met elkaar in gesprek gaan. De webshop biedt een breed assortiment, waaronder rookaccessoires, vaporizers en lifestyleproducten.
In de beginjaren was Grasscity een kleine website die rookaccessoires verkocht en toeristische informatie over Amsterdam deelde. Dankzij Magento’s multi-storearchitectuur en multi-currencyfunctionaliteit kon het bedrijf eenvoudig internationaal verkopen en zijn activiteiten uitbreiden. Inmiddels is het uitgegroeid tot een internationaal bedrijf dat wereldwijd levert.
Onze samenwerking met Grasscity begon in 2016 met de ontwikkeling van een Magento-thema. Dit project richtte zich op het moderniseren van de look & feel en de functionaliteit van de webshop, zodat deze beter aansloot bij de bedrijfsdoelen. Hierdoor kan Grasscity snel inspelen op nieuwe markttrends en innovatieve functies implementeren.
In een zeer competitieve markt wil Grasscity de klantervaring continu verbeteren en zich onderscheiden van concurrenten door regelmatig nieuwe features te introduceren. Hiervoor was een frontend nodig die aansloot bij de schaal en verwachtingen van hun publiek.
Net als veel gevestigde Magento-webshops kreeg Grasscity te maken met groeipijnen: problemen met performance, mobiele responsiviteit en flexibiliteit in frontendontwikkeling. Snelheid en schaalbaarheid vormden knelpunten, vooral op mobiel, en de integratie van moderne UI-technologieën werd steeds complexer en tijdrovender.
Daarom koos Grasscity voor een volledige frontend-replatforming met Hyvä — een moderne, performance-first Magento 2-themaoplossing die uitzonderlijke snelheid, minder complexiteit en een betere ontwikkelaarservaring biedt.
Het resultaat: een razendsnelle, volledig op maat gemaakte storefront met verbeterde Core Web Vitals, schonere code en een toekomstbestendige basis waarmee doorontwikkeling sneller, eenvoudiger en beter schaalbaar is.
Wat we deden in de eerste jaren (2016–2021)
Onze samenwerking met Grasscity begon in 2016, toen zij nog draaiden op Magento 1 Enterprise (1.13.0.2). Als hun langdurige technische partner ondersteunden wij het platform voor meerdere internationale webshops, waaronder Nederland, het Verenigd Koninkrijk en de VS.
We richtten ons op het opbouwen van een solide, schaalbare eCommerce-architectuur die de groeiende wereldwijde activiteiten van Grasscity kon ondersteunen. Dit omvatte zowel maatwerkontwikkeling als complexe systeemintegraties, zodat de webshop concurrerend en flexibel bleef in een snel veranderende markt.
Belangrijkste diensten geleverd in 2016–2021:
🔧 Ontwikkeling van een maatwerk, responsief Magento 1-thema
🌍 Multi-storeconfiguratie en internationalisatie
🔄 Store switcher op basis van valuta of locatie
🗂 Productbeheer voor meerdere stores
📦 ERP-integratie
🧾 Geavanceerde configuratie van btw- en verzendregels
💳 Maatwerk betalings- en checkoutfuncties
📈 Prestatie-optimalisatie en technische ondersteuning
🔁 Migratieplanning van Magento 1 naar Magento 2
Waarom overstappen naar Hyvä?
Magento 2 staat bekend om zijn krachtige backend en schaalbaarheid, maar het standaard frontendthema, Luma, voldoet vaak niet aan de huidige eisen op het gebied van performance en gebruikerservaring. Grasscity bereikte een punt waarop verdere optimalisatie van Luma zowel kostbaar als inefficiënt werd.
Standaard laadt het Luma-thema meer dan 200 JavaScript- en CSS-bestanden, goed voor ongeveer 1,5 MB per paginalaad. Dat maakte het vrijwel onmogelijk om consequent te voldoen aan de Core Web Vitals, zeker op mobiele apparaten.
Hyvä daarentegen reduceert deze complexiteit drastisch. Het laadt slechts twee JS/CSS-bestanden (~0,2 MB) en elimineert Magento’s afhankelijkheid van RequireJS, Knockout en zware UI-componenten. Deze radicale vereenvoudiging maakt het mogelijk om 100/100 PageSpeed-scores te behalen, aanzienlijk betere prestatiestatistieken te realiseren en een wendbaardere ontwikkelomgeving te creëren.
Hyvä is niet alleen lichter, maar ook ontwikkelaarsvriendelijk, waardoor frontendaanpassingen eenvoudiger en sneller kunnen worden doorgevoerd zonder in te leveren op flexibiliteit of kwaliteit. Voor Grasscity was dit de perfecte kans om de siteprestaties en schaalbaarheid te verbeteren, terwijl ze de vertrouwde Magento-backend konden blijven gebruiken.
Hoeveel tijd en middelen kost Hyvä-themeontwikkeling?
Hyvä vereist Magento 2.4.3 CE of hoger. Heeft u een lagere versie, dan moet u eerst een Magento-upgrade uitvoeren.
Uit onze ervaring blijkt dat de ontwikkeling van een Hyvä-thema sneller en eenvoudiger verloopt dan bij Luma (standaard Magento) of Vue Storefront. De benodigde tijd hangt echter af van de complexiteit van het project, maatwerk, integraties met externe systemen, en de gewenste functionaliteiten en vormgeving. Voor een complex project als Grasscity duurde de ontwikkeling 5 maanden (meer dan 1000 uur). Onze eigen webshop store.eltrino.com ontwikkelden we in een maand (~200 uur), inclusief de ontwikkeling van een Stripe-betaalmethode.
Belangrijk om te vermelden is dat de Hyvä Theme in 2022 nog relatief nieuw was. Zoals bij elke nieuwe technologie ontbraken er toen veel kant-en-klare integraties en functies die inmiddels wel beschikbaar zijn, waaronder Hyvä UI-componenten die het ontwikkelproces aanzienlijk versnellen. Hetzelfde project zou vandaag dus minder tijd in beslag nemen.
Ontwikkeluitdagingen in 2022 — en wat er nu beter is
1. Hyvä-compatibele integraties
Een van de grootste voordelen van Hyvä is het steeds groter wordende ecosysteem van compatibiliteitsmodules. In 2022 ontbrak voor veel externe tools echter nog officiële Hyvä-ondersteuning.
Zo gebruikte Grasscity Stamped.io voor productreviews, maar er was geen kant-en-klare Hyvä-module beschikbaar. We hebben daarom een volledig maatwerkintegratie ontwikkeld om gebruikersgegenereerde content te behouden zonder prestatieverlies.
Tegenwoordig zijn er meer dan 1.600+ Hyvä-compatibele extensies, en dit aantal groeit nog steeds.
Een ander uniek onderdeel van het project was de Important Features Block, waarvoor een externe API-integratie nodig was om gegevens uit een andere webshop te halen. Het bouwen hiervan in de Hyvä-frontend vereiste maatwerk synchronisatie tussen frontend en backend, plus specifiek layoutwerk.
2. Beperkingen van Magento Page Builder
Magento’s Page Builder is nu volledig compatibel met Hyvä, maar destijds zorgde het voor overbodige code en prestatieproblemen. De contentbeheerfuncties waren waardevol voor marketeers, maar de onderliggende structuur vertraagde de rendering en maakte ontwikkeling complexer.
We moesten dus een balans vinden: de flexibiliteit behouden die Grasscity nodig had, maar Page Builder-blokken en layouts optimaliseren voor snelheid en een schone output.
3. Invloed van externe scripts op prestaties
Hyvä is standaard razendsnel, maar de daadwerkelijke performance van een Magento-site hangt ook af van hoe deze integreert met marketingtools, zoekoplossingen, personalisatiesystemen en analyticsplatforms.
Voor Grasscity voegden meerdere systemen externe JavaScript toe die extra laadtijd veroorzaakten:
- Klaviyo voor marketingautomatisering
- Klevu voor intelligente zoekfunctie
- Nosto voor productaanbevelingen
- Route voor verzendbescherming
- Bolt voor checkout
- Magefan voor bloggen
Elk systeem moest worden beoordeeld, geoptimaliseerd of aangepast om te voorkomen dat de prestaties van Hyvä werden ondermijnd. Waar mogelijk stelden we scriptladen uit, minimaliseerden we renderblokkades en gebruikten we asynchrone laadmethode.
Verbeteringen sinds 2022:
- Klaviyo laadt JS nu asynchroon om de impact op prestaties te beperken, al kan het nog steeds door PageSpeed Insights worden gemarkeerd.
- Klevu heeft in zijn Magento 4.x-extensie geoptimaliseerd laden toegevoegd, waardoor scripts pas aan het einde van de pagina of niet-blokkerend worden geladen.
- Nosto heeft performance-optimalisaties doorgevoerd, met name in de zoekfunctionaliteit voor grote productdatabases.
- Route heeft verzendbescherming direct geïntegreerd in verzendmethoden, wat extra scripts kan verminderen.
- Bolt laadt scripts na de hoofdcontent, zodat rendering niet wordt vertraagd.
- Magefan biedt performance-extensies, waaronder lazy loading van afbeeldingen en JS-optimalisatie.
Belangrijk om te onthouden: elke integratie heeft een prijs
Zelfs met een supersnelle frontend zoals Hyvä gaat performance niet alleen over het thema, maar ook over wat je eraan koppelt.
Hoe meer externe systemen je integreert - voor marketing, zoekfunctie, analytics, personalisatie of reviews - hoe meer scripts moeten worden geladen. Elk script voegt complexiteit toe, beïnvloedt de snelheid en vraagt extra optimalisatiewerk.
Veel leveranciers verbeteren hun code, maar merchants moeten altijd goed plannen, alleen essentiële tools prioriteren en continu controleren wat er op de storefront draait. Hoge prestaties behouden is een constante balans tussen rijke functionaliteit en frontend-efficiëntie.
Resultaten
Bron: rumvision.com
Na de migratie naar het Hyvä-thema realiseerde Grasscity een enorme verbetering in siteprestaties, responsiviteit en gebruikerservaring. De nieuwe frontend leverde aanzienlijk betere Core Web Vitals-scores op, vooral op mobiel, en zorgde voor een hoge PageSpeed UX-score.
Dankzij de lichte architectuur van Hyvä nam de complexiteit af, verbeterden de laadtijden en werd de storefront stabieler en interactiever. Deze verbeteringen versterkten niet alleen SEO en conversiepotentieel, maar legden ook de basis voor snellere toekomstige ontwikkeling en langdurige schaalbaarheid.
Grasscity beschikt nu over een razendsnelle, moderne Magento-storefront die is gebouwd om groei te ondersteunen — zowel technisch als commercieel.