Elke seconde die je webshop langzamer laadt, kost je omzet. Uit onderzoek blijkt dat 53% van de mobiele bezoekers afhaakt als een pagina langer dan 3 seconden laadt. Het goede nieuws: de meeste Shopify performance-problemen zijn relatief eenvoudig op te lossen. Hier zijn 7 tips die je vandaag nog kunt toepassen.
1. Optimaliseer je afbeeldingen
Afbeeldingen zijn vrijwel altijd de grootste boosdoener bij trage webshops. Shopify converteert afbeeldingen automatisch naar WebP-formaat, maar dat werkt alleen als je de juiste Liquid-tags gebruikt. Zorg ervoor dat je theme image_url met width parameters gebruikt in plaats van de originele bestandsgrootte te laden.
Praktisch: upload afbeeldingen in maximaal 2000px breedte. Alles groter is verspilling — zelfs op een 4K scherm wordt een productafbeelding niet breder dan 1200px getoond. Gebruik tools als TinyPNG of Squoosh om afbeeldingen te comprimeren vóórdat je ze uploadt.
2. Verwijder apps die je niet gebruikt
Elke Shopify app voegt JavaScript en CSS toe aan je webshop — ook als je de app niet actief gebruikt. Het simpelweg uitschakelen van een app is niet genoeg; de code blijft vaak in je theme staan. Ga naar je app-lijst en verwijder alles wat je niet actief gebruikt. Deïnstalleren is de enige manier om de code volledig te verwijderen.
Check na het verwijderen of er nog restanten in je theme zitten. Ga naar Online Store → Thema's → Acties → Code bewerken en zoek op de appnaam in je theme.liquid en andere bestanden.
3. Beperk het aantal Shopify apps
Minder is meer. Elke app laadt eigen scripts, stylesheets en soms zelfs externe fonts. Vijf apps kunnen samen al 500KB+ aan extra code toevoegen. Vraag jezelf bij elke app af: lost dit een echt probleem op, of is het nice-to-have? Vaak kun je met native Shopify-functionaliteit of een klein stukje custom code hetzelfde bereiken zonder de overhead van een volledige app.
4. Gebruik lazy loading voor afbeeldingen
Lazy loading zorgt ervoor dat afbeeldingen pas laden wanneer ze in het zichtbare schermgebied komen. Dit betekent dat een bezoeker die je homepage opent niet meteen alle 50 productafbeeldingen hoeft te downloaden — alleen die boven de vouw.
De meeste moderne Shopify thema's ondersteunen dit al met het loading="lazy" attribuut. Controleer of dit is ingeschakeld in je theme settings. Let op: de eerste afbeelding boven de vouw (je hero image) moet juist niet lazy loaded worden — die wil je zo snel mogelijk tonen.
5. Minimaliseer custom fonts
Custom fonts zien er mooi uit, maar elk font-bestand is 20-100KB. Als je een font in vier varianten laadt (regular, bold, italic, bold italic) ben je al snel 200KB kwijt. Beperk je tot maximaal twee font-families en twee tot drie gewichten per family. Gebruik font-display: swap zodat tekst direct zichtbaar is terwijl het font nog laadt.
6. Vermijd sliders en carousels
Slideshows op je homepage lijken een goed idee, maar ze zijn vaak een performance-killer. Ze laden meerdere grote afbeeldingen tegelijk, vereisen JavaScript voor de animatie, en uit UX-onderzoek blijkt dat bezoekers zelden voorbij de eerste slide klikken. Vervang je slider door een enkele, sterke hero afbeelding met een duidelijke call-to-action.
7. Meet je voortgang
Je kunt niet verbeteren wat je niet meet. Gebruik Google PageSpeed Insights (pagespeed.web.dev) om je huidige score te checken. Focus op de Core Web Vitals: LCP (Largest Contentful Paint) moet onder 2.5 seconden, FID/INP onder 200ms en CLS onder 0.1. Test zowel je homepage als je productpagina's — die laatste zijn vaak trager door reviews en gerelateerde producten.
Kom je er niet uit of wil je professionele hulp bij het optimaliseren van je Shopify performance? Neem contact met ons op voor een vrijblijvende performance audit.