Wat een Shopify-winkel echt sneller maakt

Waar de traagheid echt vandaan komt

Op de meeste winkels is het thema niet het grootste probleem. Dat is de laag externe JavaScript die er bovenop komt. Elke reviewwidget, elke upsell-popup, elke chatfunctie en elk trackingscript telt op. Een patroon dat je in de praktijk steeds terugziet: een winkel die bij de lancering snel was, maar na een half jaar apps stapelen merkbaar trager is geworden.

Kijken hoe erg het is, kost weinig moeite. Open de netwerktab in de ontwikkelaarstools van je browser, filter op JavaScript en sorteer op grootte. Vaak zie je dat een handvol scripts het leeuwendeel van het gewicht veroorzaakt. Verwijder of vervang de zwaarste. Heb je een app echt nodig, kies er dan een die pas laadt wanneer het moet, niet op elke pagina meteen.

Render-blokkerende bronnen

Veel thema's laden CSS en JavaScript synchroon in de head van de pagina. Zolang die bestanden niet binnen zijn, tekent de browser niets. Dat vertaalt zich direct in een tragere Largest Contentful Paint, de tijd tot je bezoeker het grootste element ziet.

De oplossing is prioriteren. Stel niet-kritieke scripts uit met defer. Zet de stijlen die je bovenaan de pagina nodig hebt direct in de pagina en laad de rest later. App-scripts horen niet in de head, maar net voor het einde van de body.

LCP: je grootste element eerst

Op de meeste winkels is dat grootste element je hero-afbeelding of banner. Vervelend genoeg laden thema's die standaard lui, dus pas nadat de rest binnen is. Voor je belangrijkste beeld wil je precies het omgekeerde.

Geef je hero-afbeelding mee dat hij meteen mag laden, met een hoge prioriteit. Serveer hem in het juiste formaat via de CDN van Shopify, dus geen beeld van drieduizend pixels breed in een vak van zeshonderd. En gebruik WebP. De CDN van Shopify ondersteunt dat gewoon.

CLS: voorkom dat de pagina verspringt

Cumulative Layout Shift meet hoeveel de pagina verspringt tijdens het laden. Meestal komt dat doordat afbeeldingen of lettertypen binnenkomen zonder dat er ruimte voor is gereserveerd. De inhoud schuift, iemand klikt mis, en Google rekent het mee in de beoordeling.

Zet daarom vaste breedte en hoogte op je afbeeldingen. Laad tekst met font-display swap, zodat er altijd iets leesbaars staat, en laad je belangrijkste lettertype vooraf. Reserveer ook ruimte voor dingen die later inladen, zoals een aankondigingsbalk of een reviewblok.

INP: hoe snel je winkel reageert

Interaction to Next Paint verving in 2024 de oude FID-maatstaf. Het meet hoe snel je winkel reageert op een klik, een tik of een toetsaanslag. Zware JavaScript houdt de hoofdthread bezig, en dan voelt alles net even stroperig.

Houd het aantal elementen op een pagina beperkt. Shopify-thema's lopen makkelijk op tot duizenden knooppunten, en dat merk je. Knip lange taken op in kleinere stukken en beperk hoe vaak scroll- en resize-handlers vuren. In het prestatiepaneel van je browser zie je precies welke taken te lang duren.

Gebruik wat Shopify zelf al biedt

Shopify heeft de afgelopen jaren veel in snelheid geïnvesteerd. Gebruik dat, in plaats van er een app overheen te leggen die hetzelfde doet.

• De Section Rendering API laadt alleen het deel dat verandert, zoals de winkelwagenlade, in plaats van de hele pagina opnieuw.
• Predictive search geeft je snel zoeken zonder externe app.
• Native lazy loading werkt prima, maar alleen voor beelden onder de vouw.
• De Shopify CDN verkleint beelden, zet ze om naar WebP en cachet ze wereldwijd.

Meet met echte data, niet op gevoel

De snelheidsscore in je Shopify-beheer is een ruwe indicatie, meer niet. Voor een eerlijk beeld gebruik je PageSpeed Insights met velddata, dus cijfers van echte bezoekers in plaats van een test in een schone omgeving. Kijk ook naar het Chrome User Experience Report voor je domein. Meet voor en na elke wijziging, zodat je weet wat er werkte.

Snelheid is geen instelling die je één keer aanzet. Het is iets wat je bewaakt.

Snelheid hoort bij onderhoud

Een winkel die bij de oplevering snel was, wordt vanzelf trager. Er komen apps bij, thema's krijgen updates, het aantal producten groeit. Zonder dat iemand er iets fout doet, kruipt de laadtijd omhoog. Daarom hoort snelheid thuis bij goed onderhoud, naast beveiliging en updates, en niet in een eenmalige opschoonactie. Meet met vaste tussenpozen, houd de externe scripts kort, en corrigeer voordat je bezoekers het merken.