Hogere pagespeed en conversie voor The Sports Edit met Shopify 2.0

The Sports Edit is een UK-based multi-brand store die premium sportkleding voor vrouwen verkoopt. Al sinds de launch in 2015 is het merk bezig om de code base en performance van hun Shopify store te verbeteren, in samenwerking met een opeenvolging van e-commerce agencies. De implementatie van Shopify 2.0 bleek een kans om het eindelijk goed te krijgen - deze keer met support van Code.

KLANT

The Sports Edit

INDUSTRIE

Lifestyle, Fashion

TECHNOLOGIE

Shopify plus webshops

DIENST

Webshop rebuild

Services we provided

Migration

Store Development

UX/UI Design

Internationalization

Design refresh

Tegelijk met de move naar Shopify 2.0 voerde The Sports Edit ook een rebrand en redesign door. Waar ze in het verleden sportkleding verkochten aan zowel mannen als vrouwen, focust de store nu volledig op vrouwen. E-commerce manager Sara Davis legt die beslissing uit: “De oude site had een split-screen opzet, met mannen en vrouwen elk aan een kant, maar onze klanten waren voornamelijk vrouwen. We moesten constant compromissen sluiten om de mannenkleding ook te kunnen aanbieden. Recent hebben we daarom besloten om te focussen op één ding, en dat heel, heel erg goed te doen.”

Dat betekende voor The Sports Edit vooral: heel erg goede content bieden. Shopify 2.0 speelt hier een belangrijke rol in, dankzij de ‘sections everywhere’ feature en eindeloze mogelijkheden om overal op de site storytelling-elementen toe te voegen. Naast een nieuw logo en font heeft de site nu ook veel meer images, blokken met rich content op de productpagina's van producten en merken, een compleet vernieuwd blog met een sterker shopping element, en is het geheel visueel naar een volgend niveau gebracht.

Zware apps integreren zonder snelheid te verliezen

Na de lancering van de nieuwe webshop bleef The Sports Edit met Code samenwerken, om ook nog een flinke boost in site performance te realiseren. Sara: ”Met de oude store hadden we problemen met snelheid, en we scoorden laag op alle drie de Google Core Web Vitals. Dus dat had top prioriteit. We ontdekten dat sommige van onze core apps de site behoorlijk vertraagden, en daagden Code uit om met een oplossing te komen. Wat Leroy en Ivan deden.”

Hoe deden we dat precies? In een notendop: wanneer je de reviews en User Generated Content van Yotpo integreert via een API in plaats van een widget, laadt de code veel efficiënter. Ook de manier waarop colour swatches laden in Algolia hebben we geoptimaliseerd. De meest recente stap in het proces was de inzet van Render Better, een geautomatiseerd platform voor Shopify waarmee je de snelheid en Core Web Vitals van je site flink kunt optimaliseren. Het kostte behoorlijk wat tijd om dit allemaal te implementeren, maar het leverde ook wat op: de score van de homepage van The Sports Edit op Google Page Insights is met 42% verbeterd op mobiel, en met maar liefst 77% op desktop.

Sara is erg blij met het resultaat: “Die twee sprints die we met Code besteden aan performance hadden een ongelooflijke impact op onze snelheid. We scoren nu goed op twee van de drie Core Web Vitals - terwijl we er hiervoor niet één haalden.”

The Sports Edit x Code LinkedIn Post – 3

De uitdagingen van een Shopify-Algolia integratie

Een zware app die veel impact heeft op laadsnelheden is Algolia, een populaire zoekmachine voor stores met meer dan 100 producten. Helemaal als je veel wilt customizen, zoals klanten de optie geven om zoekresultaten snel aan hun mandje toe te voegen, in alle beschikbare kleuren te bekijken, of aan hun verlanglijstje toe te voegen.

Zelfs met het verlies van snelheid kan een multi-brand store zoals The Sports Edit niet zonder een goede zoekmachine. Een trade-off tussen de eisen van Google en de behoeften van klanten is bijna onvermijdelijk. Sara: “Met zware apps moet je soms accepteren dat je het maar tot een bepaald punt kunt optimaliseren. Vergeet niet dat de klant je site ervaart als een snelle site, ook al zegt Google van niet. En toch zien we dankzij Algolia en zijn AI re-ranking tools een grote verbetering in onze Bounce Rate. Het heeft een enorm positief effect. En dat heeft weer invloed op onze Conversion Rate, die nu al met 5% gestegen is.”

Meer weten over integraties en wat ze voor je kunnen betekenen? Lees hier verder.

Werken met Code

Ondanks de omvang en complexiteit van het project is Sara erg tevreden over het werken met Code. “Code was ons aangeraden door Vervaunt, onze e-commerce consultants. Ze leken ons ervaren genoeg voor wat we in gedachten hadden, met een uitstekende Shopify track record en echt gefocust op snelheid. En ze maakten het waar: naast een verbeterde UX hebben we nu een veel betere code base, de site is een stuk sneller, conversie groeit, en onze Core Web Vitals gaan enorm vooruit.”

Heeft ze advies voor bedrijven die een vergelijkbaar project willen beginnen? Sara: “Zorg dat je vanaf het begin heel erg duidelijk hebt wat je wilt bereiken, je doelen voor het project. Vraag jezelf voorafgaand aan (niet tijdens) een sprint af: hoe willen we dat het werkt? En zorg dat je de tech zo snel mogelijk helder hebt. Je selectie van apps, wat je van ze wilt en of dat haalbaar is - wij bleven veel te lang overleggen over hoe we Yotpo gingen implementeren, bijvoorbeeld. En sla nooit een evaluatie aan het einde van een sprint over. Het is belangrijk om je voortgang en de impact op laadsnelheid continu te monitoren terwijl je apps en aanpassingen doorvoert op de site.”

“Het was een groot project met een flinke leercurve, en strakke deadlines - dus veel ruimte voor fouten. Maar het ging heel erg goed. Code's developers begrepen precies wat we probeerden te bereiken. Echt een gezamenlijk project. Alles bij elkaar vond ik de samenwerking erg aangenaam.”