Websitesnelheid optimaliseren: tips voor Shopify-winkels

Internetgebruikers zijn ongeduldiger dan ooit. Zo'n 70% van de consumenten geeft toe dat een traag ladende website invloed heeft op hun bereidheid om bij een online retailer te kopen. Wie zijn websitesnelheid wil optimaliseren, moet dus de juiste balans vinden tussen mooie, inhoudsrijke online ervaringen en een site die snel en soepel blijft werken.

In deze gids lees je precies hoe je dat doet.

Wat is je websitesnelheid optimaliseren?

Websitesnelheid optimaliseren is de strategie om de laadsnelheid van je pagina's te verbeteren. Het wordt ook wel prestatieoptimalisatie genoemd. Het doel: je webshop zo snel mogelijk laten laden, voordat potentiële klanten gefrustreerd raken en het tabblad sluiten.

Je meet snelheid met twee belangrijke maatstaven:

• Paginasnelheid: hoe lang het duurt voordat de content op één URL is geladen.
• Sitesnelheid: hoe je site als geheel presteert. Diensten als Google PageSpeed Insights beoordelen dit door verschillende laadtijden op je site samen te bekijken.

Google raadt voor een webshop een laadtijd van twee seconden aan, maar over het algemeen geldt: hoe sneller, des te beter. De gemiddelde conversieratio van een webshop daalt met 0,3% voor elke extra seconde die je website nodig heeft om te laden. ‘Mensen zijn ongeduldig’, zegt Josh Stutt, marketinglead bij digitaal innovatiebureau the49. ‘We kennen allemaal wel het moment dat een site niet snel laadde en we gewoon het tabblad sloten.’

Stel dat je een webshop runt met een gemiddelde bestelwaarde van € 60 en dagelijks 5.000 bezoekers. Dan kan één seconde vertraging je zo'n € 900 per dag kosten.

Waarom is websitesnelheid belangrijk?

Hoe sneller je site, hoe beter je klanten vasthoudt, ook de klanten die de tragere site van een concurrent verlaten.

Zelfs een fractie van een seconde sneller kan al effect hebben op je conversies. Deloitte ontdekte dat retailconversies met 8,4% stegen als een site 0,1 seconde sneller laadde. De consumenten gaven in één snelle sessie bovendien bijna 10% meer uit.

Recent onderzoek van Shopify bevestigt dit. Uit een analyse van actief verkopende Shopify-winkels begin 2026 blijkt dat de conversie gemiddeld zo'n 3,5% lager ligt voor elke 100 milliseconden die een winkel trager laadt. Winkels met een Largest Contentful Paint (LCP) van 2,5 seconden converteren daardoor ongeveer 30% minder dan winkels met een LCP van 1,5 seconden. Het gaat om een duidelijke samenhang, geen bewezen oorzaak: ook je aanbod, prijzen en marketing spelen mee.

Trage sites zijn ook slecht voor je vindbaarheid en je SEO-posities. Google, de grootste zoekmachine ter wereld, geeft in de zoekresultaten voorrang aan sites met sterke Core Web Vitals (oftewel goede websiteprestaties).

Investeer je in betaalde zoekadvertenties om klanten te werven? Dan verlagen trage landingspagina's je kwaliteitsscore in Google Ads en dus betaal je meer per klik. Een kostbaar probleem nu de kosten voor klantwerving en advertenties in de meeste branches harder stijgen dan ooit.

Veelvoorkomende factoren die je websitesnelheid beïnvloeden

Je e-commerceplatform, hosting, site-architectuur en het aantal apps bepalen samen hoe snel je webshop laadt.

Je e-commerceplatform

Je bedrijf heeft een e-commerceplatform nodig met een infrastructuur die snelle laadtijden mogelijk maakt. Als gebruiker van een platform kun je met je platformleverancier in gesprek gaan over verbeteringen aan de back-end, zodat je websites snel laden voor shoppers.

Rendering is het proces waarbij HTML wordt opgebouwd als een gebruiker een pagina in de browser laadt. Je e-commerce-infrastructuur bepaalt hoe dat proces verloopt.

De Storefront Renderer (SFR) van Shopify is bijvoorbeeld een applicatie die er speciaal voor is om verzoeken aan je webshop zo snel mogelijk af te handelen. Dat levert aan de serverkant een snelheidswinst op van 2,5 tot 5 keer ten opzichte van verzoeken zonder SFR.

‘Render blocking betekent dat bijvoorbeeld JavaScript- of CSS-bestanden voorkomen dat een webpagina snel verschijnt’, zegt Chris McCarron, eigenaar van GoGoChimp. ‘Als een browser een webpagina laadt, moet hij eerst deze bestanden downloaden voordat hij de rest van de pagina kan tonen.’

De grootste prestatiewinst via SFR zit in cache misses. Dat zijn de momenten waarop een pagina of andere opgevraagde data niet in het cachegeheugen staat en uit andere cachelagen of het hoofdgeheugen moet komen, wat vertraging veroorzaakt.

Dat zie je terug in de praktijk. Volgens de Chrome User Experience-data van Google, met echte prestatiemetingen van miljoenen websites, haalt bijna 80% van de Shopify-winkels alle drempelwaarden voor Core Web Vitals. Dat is een van de hoogste scores van alle grote e-commerceplatforms.

Als je commerceplatform snelheid niet als topprioriteit ziet, maken de tips hieronder minder verschil. Bij Shopify zit dat goed, dus neem je zelf de regie over de snelheid van je webshop met de volgende punten.

Hosting

Je hosting en infrastructuur hebben invloed op de prestaties van je webshop, vooral op dagen met veel verkeer en veel transacties.

De lijst met bekende retailers waarvan de webshop crashte tijdens drukke verkoopperiodes zoals Black Friday, waaronder Lululemon, J.Crew en Lowe's, blijft groeien. In één onderzoek gaf 81% van de respondenten aan dat een uur downtime hun bedrijf meer dan €300.000 kost.

Let bij het vergelijken van hostingplatforms op:

• geheugen- of bandbreedtelimieten bij het opschalen tijdens seizoensacties;
• verwacht verkeer en piekbelasting, om crashes door een plotselinge toestroom van bezoekers te voorkomen.

Vraag je platformleverancier vóór elke grote actie om je te helpen voorbereiden op onverwachte verkeerspieken of een golf aan bestellingen.

Een storing is nooit fijn, maar voor een bedrijf van 5 miljard dollar in het drukste verkoopseizoen van het jaar is het extra pijnlijk. De website van JB Hi-Fi lag tijdens BFCM twee uur plat. ‘We hebben websites van bekende retailers zien uitvallen’, zegt Chris Lang, general manager engineering bij JB Hi-Fi. ‘Het hele land weet ervan. Het is slecht voor klanten en slecht voor het merk. We zouden er alles aan doen om dat te voorkomen.’

Na de overstap naar Shopify Plus boekte JB Hi-Fi recordverkopen, met bijna twee keer zoveel online verkeer tijdens BFCM, en dat zonder prestatieproblemen.

Dankzij de cloudinfrastructuur heeft Shopify Plus een uptime van 99,98%, met webshops die 2,97 keer sneller laden dan op andere SaaS-platforms.

Site-architectuur

Webshops gebruiken verschillende architecturen om informatie aan gebruikers en browsers te tonen. Dat kan complex worden naarmate je groeit, zegt Javier Moreno, data science manager bij Shopify: ‘Hoe groter en professioneler een merk wordt, hoe rijker de website. Die rijkdom heeft meestal een prijs. Als je niet actief op snelheid let, maken wijzigingen je site trager.’

Om hun websitesnelheid te verbeteren, stappen sommige ondernemers over op headless commerce. Daarbij koppel je de front-end van je webshop los van het back-endplatform erachter.

Retailers die Commerce Components by Shopify gebruiken, gaan nog een stap verder. Ze gebruiken alleen de e-commercetechnologie die ze nodig hebben, op het moment dat ze die nodig hebben, in plaats van een browser te overladen met codefragmenten die de snelheid omlaag halen.

Te veel apps van derden

Heb je meer dan 20 apps geïnstalleerd in je webshop, dan gebruik je ze waarschijnlijk niet allemaal. Misschien heb je er een paar uitgeprobeerd en vergeten te verwijderen, maar die apps draaien nog steeds op de achtergrond en kunnen je websiteprestaties schaden.

Vraag een developer om overbodige apps te verwijderen. Test daarna je paginasnelheid met tools als GTmetrix of PageSpeed Insights, of doe zelf een test met de ontwikkelaarstools van Chrome: klik op het tabblad ‘Network’ en laad de pagina opnieuw.

Vraag jezelf bij elke nieuwe app af: weegt de toegevoegde waarde op tegen de mogelijke vertraging in laadsnelheid?

De meeste script- en CSS-bestanden van apps die je via het Shopify-beheercentrum installeert, worden in de <head> van je bestand theme.liquid geplaatst, binnen {{ content_for_header }}.

Een app moet worden gerenderd voordat andere code wordt geladen.

‘Om de spanning tussen sneller laden en de waarde van apps voor beleving en verkoop te beheersen, laden we scripts die via de Script Tag API worden toegevoegd asynchroon. Zo wordt het laden van de pagina niet onderbroken’, zegt Jason Bowman, solutions engineering team lead bij Shopify Plus. ‘Maar <script>-tags die direct in de <head> staan, hebben vaak meteen invloed op de prestaties.’

Zo meet je je websitesnelheid

Elke snelheidstest werkt met een eigen scoremethode, net zoals elk team een eigen idee heeft van een goede sitesnelheid. Tools die een ‘laadtijd’ geven, moeten daarvoor één specifiek meetmoment kiezen, zoals time to first byte (TTFB).

Gebruik deze tests als leidraad, maar blijf kritisch. Je moet een goede sitesnelheid in balans brengen met een gebruikersinterface die de klantreis zo prettig mogelijk maakt.

Google PageSpeed Insights

PageSpeed Insights is een tool van Google die je persoonlijke suggesties geeft om je websiteprestaties te verbeteren. De tool laat ook zien welke onderdelen van je site de pagina vertragen, zoals CSS en JavaScript.

‘Ik zorg ervoor dat elk project waaraan ik werk steeds wordt getest in Google PageSpeed Insights of een vergelijkbare tool’, zegt Josh Stutt. ‘Je moet weten hoe je presteert en waar je zwakke plekken zitten voordat je iets kunt verbeteren.’

Je kunt zelfs de mobiele prestaties van de websites van je concurrenten bekijken. Weet je wat er mis is met hun site, dan voorkom je dat je dezelfde fouten maakt.

GTMetrix

GTMetrix geeft je website een snelheidscijfer van A tot en met F. De tool combineert data van YSlow en PageSpeed Insights tot een prestatierapport met:

• je laadsnelheid;
• een analyse van de Web Vitals en Lighthouse;
• kansen om je websitesnelheid te optimaliseren;
• een uitsplitsing van je pagina naar aantal verzoeken en totale bestandsgrootte.

Pingdom

Pingdom.com geeft je websiteprestaties een score van 0% tot 100%. De tool heeft ook een handige watervalanalyse, waarmee je andere grote knelpunten opspoort. Die beoordeling per regel is een nuttig naslagwerk.

Zo ga je je websitesnelheid optimaliseren

Met deze twaalf maatregelen ga je je websitesnelheid optimaliseren, van een CDN tot het opschonen van je Liquid-code:

Gebruik een content delivery network (CDN)

Een content delivery network of content distribution network (CDN) is een groep servers verspreid over de wereld. Het CDN levert content via de server die het dichtst bij je bezoeker staat, zodat je site voor gebruikers overal sneller laadt.

Omdat steeds meer webshops internationaal verkopen, is een CDN (of bij Shopify zelfs twee CDN's) onmisbaar voor goede prestaties.

Shopify biedt zonder extra kosten een CDN van wereldklasse, aangedreven door Fastly. Er zijn nu minder, maar krachtigere Fastly Points of Presence (PoP's) op strategische locaties over de hele wereld. Dankzij deze PoP's met hoge capaciteit komt meer content direct uit de cache, waaronder statische content en content rond evenementen. Dat verbetert je cache-hitratio en zorgt voor een betere gebruikerservaring.

Kortom: CDN's verhogen de snelheid en verlagen de kosten. ‘Door onze licentie, hosting en CDN via Shopify Plus te regelen, bespaarden we meteen zo'n $100.000 per jaar’, zegt Diana Harbour, eigenaar van Red Dress Boutique.

Neem visuele content, vaak de oorzaak van een trage website. Shopify laat het CDN weten wanneer je bestanden (zoals afbeeldingen, JavaScript en CSS) zijn gewijzigd.

Doe dit met Shopify

Shopify-ondernemers kunnen het filter asset_url gebruiken om automatisch versienummers toe te voegen aan alle URL's die Shopify genereert. Een versienummer aan het einde van een URL ziet er bijvoorbeeld zo uit: ?v=1384022871. Dit filter vertelt het CDN welke versie het moet ophalen. Zonder dit filter zie je na een wijziging in je content mogelijk niet het bestand dat je verwacht.

Verwijs je in je CSS rechtstreeks naar content, dan is de URL statisch. Die bevat dan ook niet de bestandsversie die Shopify automatisch bijwerkt.

Pas je CSS daarom aan zodat die het filter asset_url gebruikt. Informatie over alle URL-filters voor het ophalen van bestanden vind je in het Shopify Helpcentrum.

Ga niet overboord met thema-aanpassingen

Hoe een website eruitziet, bepaalt of een klant ermee aan de slag gaat. Uit onderzoek blijkt dat eerste indrukken voor 94% met design te maken hebben, en dat oordeel valt razendsnel: binnen een tiende van een seconde.

Toch moet je kiezen tussen sitesnelheid en een prachtig thema. Dat laatste gaat vaak samen met rommelige code en te veel beeld. ‘Je hebt geen thema nodig met alle toeters en bellen’, zegt Josh Stutt. ‘Je hebt een thema nodig dat strak, snel en makkelijk te navigeren is. Ik heb het bouncepercentage van nieuwe bezoekers op de homepage met meer dan 50% zien verbeteren, gewoon door over te stappen op een eenvoudiger thema.’

Nirav Sheth, CEO en oprichter van Anatta: ‘Snelle trucjes leggen geen basis voor goede prestaties op de lange termijn. Dat doen alleen echte snelheidsverbeteringen, en die beginnen bij het optimaliseren van de onderliggende architectuur van je thema.’

Wees kritisch op quick view op categoriepagina’s 

Met een quick-view-pop-up bekijk je een product direct vanaf een overzichtspagina, zonder naar de productpagina te gaan.

In theorie bespaart quick view je klanten tijd, maar in de praktijk kan het de winkelervaring juist in de weg zitten:

• Het voegt een extra stap toe aan de klantreis.
• Je klikt er makkelijk per ongeluk op, wat frustrerend is.
• Het wordt soms aangezien voor een productpagina.
• En het belangrijkste: het kan je pagina flink vertragen.

Quick-view-pop-ups (ingebouwd in een thema of via een app) laden soms alvast alle informatie van een volledige productpagina, voor het geval een bezoeker op de knop ‘Quick view’ klikt.

Dat is een enorme hoeveelheid data, zeker op een collectiepagina met 20 of 30 productafbeeldingen. Met click mapping, een JavaScript-tool die bijhoudt waar gebruikers scrollen, hun cursor bewegen en klikken, zie je of je klanten quick view eigenlijk wel gebruiken.

Apps die hierbij helpen:

• Hindsight
• Hotjar

Vind Quick View in Shopify

Je ziet snel of er een quick-viewknop bij de productafbeeldingen in je webshop staat. Kijk in je thema-editor of je deze functie daar kunt in- of uitschakelen. Staat de optie er niet, controleer dan of de functie van een app komt. Zo ja, dan is het meestal duidelijk hoe je hem verwijdert.

Helpen deze twee stappen niet, dan zit de functie waarschijnlijk in het thema zelf. Dan heb je een developer nodig om hem op te sporen en te verwijderen. Zoek een Shopify Plus-partner die je hierbij helpt.

Gebruik AJAX om de productinformatie pas op te halen als een bezoeker op de quick-viewknop klikt. Of sla een beperkte set productinformatie op als data-attributen bij elk product in het overzicht, en bouw de HTML en pop-up daarna dynamisch op met JavaScript.

Beide opties zijn minder ideaal dan quick view helemaal weghalen, want de productinformatie moet nog steeds voor elk product worden geladen. Toch is het beter dan alle productafbeeldingen en links downloaden.

Verwijder overbodige pop-ups

Pop-ups tonen speciale aanbiedingen of verleiden mensen tot de volgende stap in de klantreis. Of het nu gaat om een kortingscode verzilveren of een e-mailadres achterlaten, pop-ups helpen nieuwe bezoekers te betrekken en openen de deur naar toekomstig contact.

Toch is het een kunst om pop-ups goed in te zetten. Te veel knipperende beelden kunnen je sitesnelheid en prestaties schaden, en leiden bezoekers af van content die je al voor conversie hebt geoptimaliseerd.

Stel grenzen aan je gebruik van pop-ups om vertraging te voorkomen. Werk bijvoorbeeld met triggers, zodat extra code je site niet vertraagt. Kies voor exit-intent-pop-ups of pop-ups met een vertraging, in plaats van pop-ups die direct bij het laden verschijnen. Zo zit er wat ruimte tussen het laden van de pagina en het laden van de pop-up.

Beperk hero-sliders op de homepage

Grote diavoorstellingen met meerdere hero-afbeeldingen zijn ideaal om je producten te laten zien. Helaas is er een keerzijde: voor een slider die er goed uitziet heb je grote, hoogwaardige afbeeldingen nodig, en die verhogen de laadtijd. Zeker als je vier of vijf slides hebt.

Beperk het aantal slides op je homepage of schrap ze helemaal. Eén goed doordachte hero-afbeelding van hoge kwaliteit, met een duidelijke call-to-action, trekt klanten snel naar binnen. Het brein verwerkt beeld namelijk 60.000 keer sneller dan tekst.

Wil je toch een slider gebruiken? Volg dan deze UX-best practices:

• Houd het bij twee of drie slides.
• Toon de slides als vaste contentsecties in plaats van automatisch draaiende carrousels.
• Gebruik srcset of lazy loading als vangnet.

Chubbies gebruikt bijvoorbeeld geoptimaliseerde afbeeldingen in plaats van een traditionele hero-slider op de homepage. Medeoprichter Tom Montgomery: ‘We zitten vanaf dag één bij Shopify. Niemand van ons is engineer, dus het is fijn om op de experts van Shopify te kunnen vertrouwen, zodat wij ons op innovatie kunnen richten.’

Comprimeer en verklein afbeeldingen

Afbeeldingen zijn goed voor zo'n 50% tot 75% van het totale gewicht van je webpagina's. Dat probleem groeit mee met je webshop: hoe meer producten je verkoopt, hoe meer afbeeldingen er op je server staan. Elke afbeelding op een pagina zorgt voor een nieuw HTTP-verzoek. Door afbeeldingen kleiner te maken, laadt je pagina sneller en doe je meer met minder.

Alex Mirzaian, marketingmanager bij Eightvape: ‘Als je voortdurend blogs schrijft of elke dag veel producten toevoegt, zet je al snel zonder nadenken afbeeldingen op je website. Afbeeldingen comprimeren helpt enorm als je duizenden afbeeldingen op je site hebt.’

Met lossless compressie via tools als TinyJPG of TinyPNG maak je afbeeldingen kleiner zonder kwaliteitsverlies.

Let ook op lege afbeeldingsbronnen in je code, zoals <img src="">. Die belasten de browser onnodig, omdat ze weer een extra verzoek naar je server sturen. Een eenvoudige oplossing zijn CSS-sprites: daarmee voeg je meerdere kleine afbeeldingen, zoals iconen, samen tot één bestand. Zo beperk je het aantal losse verzoeken aan de server en laadt je pagina sneller.

Met de ingebouwde parameters voor afbeeldingsgrootte van Shopify download je de kleinst mogelijke afbeelding zonder kwaliteitsverlies. Je vraagt Shopify om precies het formaat dat getoond wordt. Daardoor is het bestand dat van het CDN komt kleiner, en hoeft de browser minder te schalen.

‘Een van onze klanten had een trage site, dus we begonnen met het optimaliseren van de afbeeldingen’, zegt Maria Harutyunyan, medeoprichter van Loopex Digital. ‘We maakten ze kleiner en comprimeerden ze, wat een enorm verschil maakte in laadsnelheid. De afbeeldingen nemen nu 60% minder ruimte in en laden veel sneller.’

Gebruik lite embeds voor video

Video wordt in rap tempo de taal van het internet: zo'n 91% van de bedrijven gebruikt video in hun marketing. Maar afhankelijk van hoe je video's op je site insluit, kan de laadtijd flink verschillen.

De standaard embedcode van YouTube maakt je site zwaarder, omdat sommige bestanden al worden gedownload voordat de bezoeker op afspelen klikt. Bovendien gebruikt die code een <iframe> met een vaste breedte en hoogte, waardoor je video zich niet aanpast aan het schermformaat van verschillende apparaten.

De oplossing is een lite embed. Bij het laden van de pagina toont je site alleen de thumbnail van de YouTube-video. De videospeler zelf, met alle bijbehorende JavaScript, laadt pas als de gebruiker op de thumbnail klikt.

Een YouTube-thumbnail is ongeveer 15 kilobyte. Met lite embeds maak je een pagina dus bijna een megabyte lichter.

Beperk redirects en gebroken links

Te veel redirects en gebroken links kunnen je prestaties en je SEO-posities schaden.

Ruim je redirects op. Een 302-redirect, die aangeeft dat een pagina tijdelijk is verplaatst, kan bijvoorbeeld slecht zijn voor je SEO. Zulke redirects zorgen ook voor extra HTTP-verzoeken en vertragen het laden.

Gebruik in plaats daarvan een cachebare redirect of de ingebouwde URL-omleidingen van Shopify in je navigatie-instellingen. Die zijn standaard 301-redirects. En onthoud: stuur een URL nooit door naar een pagina die zelf ook weer een redirect is.

Gebroken links naar onderdelen als afbeeldingen, CSS- en JS-bestanden zorgen voor extra HTTP-verzoeken en vertragen je site. Spoor ze op met een tool als Broken Link Checker en verwijder ze. Met een eigen 404-pagina help je bezoekers die per ongeluk een verkeerde URL intikken.

Schakel lazy loading in

Lazy loading is een techniek die voorkomt dat alle content van een webpagina direct wordt geladen. Webshops met lazy loading tonen content pas als gebruikers bepaalde acties uitvoeren, zoals scrollen.

Je ziet lazy loading in actie als iemand je productpagina bezoekt. Alleen de content boven de vouw verschijnt meteen, zoals de productnaam, afbeeldingen en de productbeschrijving. De rest verschijnt pas als de bezoeker verder naar beneden scrolt. Content van gebruikers, socialmediacarrousels en klantreviews laden allemaal lazy, zodat de server bij het laden niet meteen wordt overspoeld met informatie.

Chris McCarron van GoGoChimp gebruikte deze strategie voor de webshop van een klant: ‘Er stonden ontzettend veel afbeeldingen onder de vouw op elke pagina. Het probleem is dat een browser alle afbeeldingen op een pagina tegelijk downloadt, ook de afbeeldingen die niet in beeld zijn. Met lazy loading wordt een afbeelding pas gedownload als die in beeld komt.’

Ruim parser-blocking scripts op

Voordat een browser een pagina aan je klant kan tonen, moet hij de HTML verwerken (parsen). Parser-blocking scripts onderbreken dat proces: komt een browser zo'n script tegen, dan moet hij alles stilleggen en eerst dat script uitvoeren.

Gelukkig is er een eenvoudige oplossing: het attribuut async of defer.

• Parser blocking: <script src="jquery.js"></script>
• Niet parser blocking: <script src="jquery.js" defer></script>

Goed om te weten: JavaScript zelf blokkeert de browser niet. Het is de manier waarop JavaScript wordt geladen die bepaalt of het de browser blokkeert. Controleer na deze aanpassingen of je website nog steeds de gewenste ervaring biedt.

Organiseer tracking met Google Tag Manager

Klantdata is de brandstof voor je e-commerce- en marketingstrategie. Maar het verzamelen van die data kan je website ook vertragen. Alle JavaScript-trackingtags (bijvoorbeeld voor algemene analytics, conversies, doelen en retargeting op basis van gedrag) zijn vaak de boosdoener.

Klantdata verzamelen kost je developer-, IT- of marketingteam bovendien veel tijd en middelen. Een tagmanagementsysteem (TMS) als Google Tag Manager bundelt al je tags in één JavaScript-verzoek. En gaat je website onderuit door een kapotte tag, dan haal je die met een TMS snel weer weg.

Nirav Sheth vertelt dat toen Anatta de snelheid van een beautywebshop optimaliseerde, ‘niets zoveel verschil maakte als de combinatie van het slim inzetten van de API's van Shopify en het opschonen van Google Tag Manager’.

Met één codefragment beheer je alle tags van je Shopify Plus-winkel op één plek met Google Tag Manager. Meer informatie vind je in de richtlijnen in het Shopify Plus Helpcentrum.

Pas op met te veel Liquid-loops

Liquid is de krachtige programmeertaal van Shopify. Toch zijn er situaties waarin je de voordelen moet afwegen tegen de nadelen.

Forloops zijn daar een voorbeeld van. Bij een forloop moet het systeem alle producten in een collectie doorlopen, op zoek naar een specifieke voorwaarde, zoals een prijs of tag.

In bepaalde gevallen is dat handig, bijvoorbeeld om afbeeldingen of productvarianten te tonen. Ook bij een klein aantal producten op een collectiepagina werkt het prima, maar houd de impact op je laadtijd in de gaten.

Controleer je themacode op Liquid-forloops die meerdere keren naar dezelfde informatie zoeken. Dat gebeurt vaak als meerdere developers aan een thema werken en taken dubbel uitvoeren of tegenstrijdige code toevoegen. Verwijder je die dubbelingen, dan laadt je pagina sneller.

Vaak is een eenvoudige loop met product.options_with_values makkelijker. Lees de documentatie om te begrijpen hoe de templatetaal en Liquid-loops van Shopify werken.

Zo voer je een snelheidstest van je website uit

Core Web Vitals zijn de drie maatstaven waarmee Google de gebruikerservaring van je pagina's beoordeelt. Op sites die aan de drempelwaarden voor Core Web Vitals voldeden, haakten gebruikers 24% minder vaak af tijdens het laden.

• Largest Contentful Paint (LCP): hoe snel het grootste zichtbare element van een pagina is geladen, zoals een productfoto of kop. Goed is 2,5 seconde of sneller.
• Interaction to Next Paint (INP): hoe snel je pagina reageert als een bezoeker klikt, tikt of typt. Goed is 200 milliseconden of sneller.
• Cumulative Layout Shift (CLS): hoeveel de inhoud van je pagina verspringt tijdens het laden. Goed is een score van 0,1 of lager.

Daarnaast is time to first byte (TTFB) een nuttige aanvullende maatstaf: die laat zien hoe snel je server begint met het leveren van een pagina.

Google PageSpeed Insights beoordeelt elk van de Core Web Vitals met een status: Goed, Verbetering nodig of Slecht. Onder elke score zie je ook aanbevelingen die op jouw site zijn afgestemd.

Websitesnelheid optimaliseren voor mobiel

Mobiel winkelen blijft groeien: volgens prognoses zou mobiele commerce in 2025 goed zijn voor 10,4% van alle e-commerceverkopen.

Ondanks het hoge aandeel mobiele aankopen willen niet alle mobiele shoppers geld uitgeven op een trage website. Sterker nog: een mobiele site die 0,1 seconde sneller laadt, kan de conversieratio al met 8,4% verhogen.

Toen kleding- en relatiegeschenkenmerk Merchology ontdekte dat de meeste mobiele bezoekers niet converteerden, ontwierp het bedrijf zijn mobiele site opnieuw, met de mobiele klant voorop. Twee maanden na de lancering steeg de mobiele conversieratio met 40%.

Zo zorg je ervoor dat je mobiele site en de prestaties en snelheid van je hele website, minstens zo goed zijn als die van je concurrenten.

Optimaliseer je Core Web Vitals op mobiel

Google beoordeelt je site op basis van de mobiele versie. Werk daarom vooral aan je Core Web Vitals op mobiel: gebruik een snel, responsive thema, comprimeer je afbeeldingen, beperk het aantal apps en scripts, en zorg dat er tijdens het laden niets verspringt.

Misschien kom je nog het advies tegen om Accelerated Mobile Pages (AMP) te bouwen. Dat is niet meer nodig. Sinds 2021 is AMP geen voorwaarde meer om in Top Stories te verschijnen en AMP-pagina's krijgen geen voorrang in de zoekresultaten. Een snelle, responsive webshop levert je hetzelfde voordeel op, zonder een tweede versie van je site te hoeven beheren.

Schakel automatisch afspelen van video op mobiel uit

Niet iedereen bezoekt je webshop op mobiel met een sterke verbinding. Misschien is het een klant van Allbirds die tijdens een wandeling de website bekijkt omdat de schoenen aan haar voeten uit elkaar vallen. Of een klant van Firebelly Tea die op het parkeerterrein wacht tot de kinderen uit school komen en intussen een nieuwe doos thee bestelt.

Hoe dan ook: deze mensen willen misschien de video's bekijken die retailers op hun mobiele site gebruiken. Maar video's die automatisch afspelen, kunnen je site flink vertragen.

Bij automatisch afspelen moet de mobiele verbinding een groot bestand downloaden. Vervang je dat door een vaste thumbnail met een knop om de video te starten, dan hoeft het volledige bestand niet via een zwakke verbinding te worden geladen. Bezoekers zien zo in recordtijd iets zinnigs op hun scherm.

Optimaliseer de mobiele checkout

De checkout wordt vaak vergeten bij het verbeteren van de mobiele snelheid. Home-, product- en categoriepagina's krijgen de meeste aandacht, vooral omdat je niet wilt dat klanten al bij de eerste horde afhaken: hun eerste mobiele kennismaking met je winkel.

Neem je de checkout niet mee in je plan om je websitesnelheid te optimaliseren, dan verlaten waarschijnlijk meer klanten hun winkelwagen. Mensen voelen zich zeker genoeg om zelf producten uit te kiezen. Maar lopen ze bij het afrekenen tegen vertraging aan, dan moeten ze het product wel heel graag willen om te blijven. Oftewel: je verliest de impulskopers.

Met Shop Pay rekenen mobiele shoppers razendsnel af. Volgens Shopify hebben ondernemers met Shop Pay een 1,91 keer hogere mobiele checkout-to-order-ratio dan ondernemers met een gewone checkout.

‘De meeste klanten ontdekken nieuwe producten tegenwoordig onderweg op hun telefoon. Als ze dan een formulier moeten invullen, zijn we ze kwijt’, zegt Benjamin Sehl, medeoprichter van Kotn. ‘Door Shop Pay in onze checkout aan te zetten, is het meest pijnlijke moment in de klantervaring juist prettig geworden. En omdat Shop Pay gekoppeld is aan een ecosysteem van een miljoen ondernemers, rekenen zelfs nieuwe klanten met één klik af.’

Optimaliseer je websitesnelheid en zie het effect op je conversie

Zorg voor draagvlak in je team om tijd en middelen te investeren in je websiteprestaties en -snelheid. De cijfers en tools uit dit artikel helpen je om je verhaal te onderbouwen.

Veel van deze optimalisaties kun je zelf doorvoeren. Lukt dat niet, schakel dan een Shopify Plus-partner in. Die helpt je om je Shopify-site sneller te maken.