Snelheid van je Shopify-winkel: wat een site echt snel maakt (2026)

Shopify geeft je goede hosting, een wereldwijd CDN en moderne thema's met verstandige standaardinstellingen. En toch haalt de mediane Shopify-winkel nog steeds niet op alle drie de Core Web Vitals tegelijk een "Goed", waarbij winkels in het middensegment vaak op 3-5 seconden LCP op mobiel zitten.

De oorzaak is niet het platform. Het is dat Shopify-winkels op twee specifieke manieren gewicht opbouwen, en voor geen van beide bestaat een ingebouwd opruimmechanisme. Deze gids behandelt wat een Shopify-winkel echt traag maakt, gerangschikt op impact, en de oplossingen die standhouden in plaats van in het jaar erna weg te slijten.

Waarom snelheid dubbel telt

Trage Shopify-pagina's worden op twee fronten tegelijk afgestraft.

Organisch: Core Web Vitals zijn sinds 2021 een bevestigd rankingsignaal. Trage pagina's krijgen bovendien minder crawlbudget toebedeeld.

Betaald: de kwaliteitsscore van Google Ads weegt de ervaring op je landingspagina mee, dus trage pagina's kosten meer per klik. Het algoritme van Meta leest bouncesignaal als een negatieve uitkomst en prijst de levering daarnaar.

Een trage winkel krijgt dus minder organisch verkeer, betaalt meer per klik voor het betaalde verkeer dat hij koopt, en converteert een lager percentage van de kliks die hij wél krijgt. Dat opstapelende effect maakt dit de moeite waard om serieus te nemen in plaats van als ijdele score te behandelen.

De metrics, en wat ze echt meten

Twee dingen zijn het weten waard:

• INP verving First Input Delay in maart 2024. Ze meten verschillende dingen: FID mat alleen de eerste interactie, INP meet de slechtste interactie over het hele bezoek. FID halen garandeerde nooit dat je INP haalde, en winkels die dit na de wijziging nooit opnieuw bekeken, laten meetbare rankingprestaties liggen.
• De lat ligt op het 75e percentiel van echte bezoeken, niet op het gemiddelde. Je mediane shopper kan een goede ervaring hebben terwijl je toch zakt, als het traagste kwart van de bezoeken slecht genoeg is.

Velddata, geen labdata

Waar je velddata leest:

• PageSpeed Insights, het bovenste blok, als de pagina genoeg verkeer heeft. Lees dat, niet de Lighthouse-score eronder.
• Search Console > rapport Core Web Vitals. Gegroepeerd per URL-patroon, wat laat zien of het probleem bij productpagina's, collectiepagina's of de homepage zit.
• Chrome UX Report rechtstreeks, voor trends op domeinniveau over tijd.

Volg je veld-LCP maandelijks. Kruipt die maand op maand 0,3 seconde omhoog, dan is er iets nieuws stukgegaan en is een audit overdue. Dat is het vroege waarschuwingssignaal dat problemen vangt voordat je conversieratio begint te zakken.

De echte oorzaken, gerangschikt op impact

1. App-JavaScript

Veruit de grootste oorzaak van trage Shopify-winkels. Elke app die scripts injecteert voegt ruwweg 150-300ms toe aan je LCP, en het effect op INP is erger, want JavaScript op de main thread is precies wat INP meet. Winkels met zware app-stacks komen regelmatig boven 500ms INP uit, ruim in de Poor-band.

De verborgen versie van dit probleem: een app verwijderen uit je Shopify-admin haalt niet altijd de themacode weg. Winkels stapelen scripts op van apps die maanden of jaren geleden verwijderd zijn, die nog op elke pagina laden en niets doen.

De audit:

1. Open Chrome DevTools > tabblad Coverage, herlaad een productpagina en kijk naar ongebruikte JavaScript per bestand. Dat laat zien welke scripts laden zonder gebruikt te worden.
2. Doorzoek je themabestanden (theme.liquid en je snippets) op script-tags. Leg ze naast je lijst geïnstalleerde apps. Alles van een app die je niet meer hebt is dood gewicht.
3. Vraag je bij elke overgebleven app af of die zijn laadkosten verdient. Een review-app wel. Een derde upsell-app waarschijnlijk niet.

De volgorde van oplossen: eerst dode code verwijderen (gratis, geen nadeel), dan apps die je niet gebruikt deinstalleren, en daarna beoordelen of apps die je wél gebruikt vervangen kunnen worden door native functionaliteit of themacode.

2. Themadrift

De slow-motionversie van appbloat, en degene die niemand ziet gebeuren.

Elke "kleine" aanpassing voegt iets toe: een custom announcement bar voegt een stylesheet toe, een hero-video een script, een nieuwe layout voor productkaarten extra CSS. Thema's hebben geen ingebouwde manier om die op te ruimen. Dus groeit de codebase twee jaar lang, haalt niemand iets weg, en wurgt het opgestapelde gewicht geleidelijk je LCP.

De discipline die het voorkomt: behandel themacode als appcode. Elke toevoeging krijgt ergens anders een verwijdering, of je LCP blijft klimmen. In de praktijk betekent dat: voeg je een nieuwe sectie toe, check dan of de oude die hij vervangt nog laadt.

3. Niet-geoptimaliseerde hero- en productmedia

Het LCP-element op de meeste Shopify-pagina's is de hero-afbeelding op de homepage of de hoofdproductafbeelding op een PDP. Is die afbeelding groot, ongecomprimeerd of in het verkeerde formaat, dan is je LCP traag ongeacht wat je verder doet.

De oplossingen, op volgorde:

• Preload de LCP-afbeelding. Een <link rel="preload" as="image"> in de head vertelt de browser die als eerste op te halen.
• Voeg fetchpriority="high" toe aan het LCP-afbeeldingselement. Dat omzeilt render-blokkerende wachtrijen.
• Lever WebP of AVIF. De beeldfilters van Shopify regelen dat; zorg dat je thema het juiste formaat en de juiste breedte opvraagt.
• Vraag de juiste maat op. Een afbeelding van 2400px in een container van 600px serveren verspilt het grootste deel van de download.
• Lazy-load nooit het LCP-element. Zie hieronder.

4. Render-blokkerende bronnen

CSS en JavaScript in de <head> die de browser moet downloaden en verwerken voordat hij iets kan tekenen. Bij zware thema's is dit een grote LCP-factor.

De oplossingen:

• Inline de kritieke CSS voor content boven de vouw, stel de rest uit
• Voeg defer of async toe aan niet-kritieke scripts
• Beperk custom lettertypes tot twee families, gebruik font-display: swap en preload het primaire fontbestand
• Laat externe tags (chatwidgets, heatmaps, pop-ups) pas na de eerste paint laden

5. Layout shift door laat ladende elementen

CLS-problemen op Shopify komen meestal uit vier bronnen:

• Afbeeldingen zonder width en height. De browser weet niet hoeveel ruimte hij moet reserveren, dus springt content zodra de afbeelding arriveert. Zet expliciete afmetingen in je thematemplates.
• Door apps geïnjecteerde content. Reviewwidgets, badges en banners die na het laden verschijnen en alles naar beneden duwen.
• Webfonts die laat laden, waardoor tekst opnieuw opbouwt.
• Announcement bars en cookiebanners die zichzelf boven bestaande content invoegen.

Reserveer ruimte voor alles wat asynchroon laadt. Een placeholder met de juiste afmetingen haalt de verschuiving volledig weg.

6. Theme app extensions en app blocks

Over het algemeen beter dan scriptinjectie, omdat ze via het eigen mechanisme van Shopify laden. Maar een slecht geïmplementeerd app block kan nog steeds CLS- en INP-verslechteringen veroorzaken.

Test elke nieuwe app-installatie met een voor-en-na-vergelijking op velddata. Geen labscore; velddata, twee weken later. Verslechtert een app je cijfers, dan is dat een zakelijke afweging of de functie die kosten waard is.

7. Markets en geo-redirectscripts

Automatische redirectscripts voor internationale bezoekers kunnen je LCP flink vertragen, want de browser wacht op een beslissing voordat hij rendert. Draai je Shopify Markets met geo-redirectie aan de clientzijde, beoordeel dan of die logica naar de server of de edge kan verhuizen.

8. Componenten van checkout extensibility

Heb je de checkout van Shopify uitgebreid met custom UI-componenten, controleer die dan specifiek op INP. Checkoutstappen zijn de interacties met de hoogste inzet in je winkel, en responsiviteit daar raakt je conversie rechtstreeks.

9. Het basisthema

Als laatste, en met ruime afstand. Moderne Online Store 2.0-thema's leveren redelijke standaardinstellingen mee: lazy loading, responsieve afbeeldingen, verstandige scriptafhandeling. Een trage winkel op Dawn is traag door de acht punten hierboven, niet door Dawn.

Dat is relevant omdat "we hebben een sneller thema nodig" een veelgetrokken conclusie is en zelden de juiste. Overstappen naar een custom thema met nog steeds vijftien apps geïnstalleerd levert een custom thema op dat traag is.

Over apps voor snelheidsoptimalisatie

Die zitten in een ongemakkelijk middengebied.

Wat ze goed doen: beeldcompressie automatiseren, lazy loading toevoegen aan afbeeldingen onder de vouw, CSS minificeren. Dat helpt LCP en CLS en vraagt geen ontwikkelwerk.

Waar ze tekortschieten of averechts werken: INP wordt veroorzaakt door JavaScript-uitvoering op de main thread. Een app die zelf JavaScript injecteert om "snelheid te boosten" voegt toe aan precies het probleem dat INP meet. Sommige stellen externe scripts echt uit en helpen; andere voegen een laag toe en noemen dat optimalisatie.

De eerlijke framing: echt prestatiewerk op Shopify komt meestal van gewicht weghalen, niet van er nog een softwarelaag bovenop zetten. Claimt een app alles automatisch op te lossen, wees dan sceptisch. De duurzame oplossingen (apps snoeien, themacode aanpassen om scripts uit te stellen, lange taken opknippen) zijn structureel developerwerk op themaniveau.

Gebruik je er toch een, meet dan velddata ervoor en twee weken erna, en wees bereid hem te verwijderen als de cijfers niet bewegen.

De audit van 90 minuten

Dit is de praktische versie. Draai hem op een echte productpagina, niet op de homepage, want op productpagina's zitten de meeste sessies en de meeste omzet.

Zet de fixes live in een gedupliceerd thema, nooit in het live thema. Meet daarna twee weken later opnieuw de velddata; die is een voortschrijdend gemiddelde en beweegt dus niet meteen.

De prioriteitsvolgorde voor fixes

Punt 1 tot en met 4 is doorgaans één dag werk en levert het grootste deel van de beschikbare winst op. Doe die voordat je iets structureels overweegt.

Het laten beklijven

Dit is het deel dat een eenmalige verbetering onderscheidt van een duurzame.

Drie gewoontes om op te bouwen:

1. Test elke nieuwe app-installatie twee weken later tegen de velddata. Verslechtert hij je cijfers, dan wordt dat een zakelijke afweging in plaats van een ongeluk.
2. Elke thema-toevoeging krijgt een verwijdering. Voeg je een sectie toe, check dan of wat die verving nog laadt.
3. Volg je veld-LCP maandelijks. Een stijging van 0,3 seconde maand op maand betekent dat er iets stuk is. Dat daar vangen is veel goedkoper dan het vangen wanneer je conversie zakt.

Hoe goed eruitziet

De conversiewinst is de reden om dit te doen, niet het rankingsignaal. Winkels die hun mobiele LCP onder 2,5 seconden krijgen, zien de conversieratio doorgaans binnen vier weken 0,4-0,7 punt terugveren, en dat is bij de meeste winkels aanzienlijk meer waard dan het rankingvoordeel.

Veelgemaakte snelheidsfouten

• Optimaliseren tegen de labscore. Velddata is wat Google gebruikt en wat je shoppers ervaren.
• De LCP-afbeelding lazy loaden. Vertraagt precies datgene wat gemeten wordt.
• Een snelheidsapp installeren en het daarbij laten. Helpt hooguit LCP en CLS; kan INP schaden.
• Aannemen dat het thema het probleem is. Het staat meestal achtste of negende op de lijst.
• Niet controleren op dode appcode. De goedkoopste winst die er is en de meest gemiste.
• Alleen de homepage testen. Op productpagina's zit het grootste deel van je verkeer en omzet.
• Eén keer optimaliseren en stoppen. Zonder kwartaalritme slijt de winst binnen een jaar weg.
• Een PageSpeed-score van 90+ als doel najagen. Scorejagen is niet hetzelfde als winkelsnelheid. Het doel is veld-LCP onder 2,5 seconden en een conversieratio die beweegt.
• Replatformen voor snelheid vóórdat je de app-audit en thema-opschoning hebt gedaan. Een custom thema met vijftien apps is nog steeds traag.

Wanneer je hulp inschakelt

De eerste vier punten uit de prioriteitstabel liggen binnen bereik van een technisch comfortabele winkeleigenaar en leveren het grootste deel van de beschikbare winst. De moeite waard om zelf te doen voordat je iemand betaalt.

Waar hulp van buiten zijn kosten verdient is het structurele werk: scripts uitstellen zonder functionaliteit te breken, lange taken opknippen, kritieke CSS inlinen, en vaststellen welke van negen mogelijke oorzaken jouw specifieke probleem veroorzaakt. Dat laatste is de echte vaardigheid, want een checklist blind toegepast op de verkeerde oorzaak levert geen beweging op.

Bekijk hoe wij Shopify-ontwikkeling en performancewerk aanpakken: eerst velddata, app- en thema-audit vóór elke structurele wijziging, en een uitgesproken LCP-doel met een kwartaalritme om het daar te houden.

Veelgestelde vragen

Welke LCP moet een Shopify-winkel op mobiel nastreven?

Onder 2,5 seconden, gemeten op echte mobiele bezoeken in velddata in plaats van in een labtest. Veel Shopify-winkels in het middensegment zitten in de bandbreedte van 3-5 seconden, vooral door niet-geoptimaliseerde hero-afbeeldingen en render-blokkerende themascripts. Winkels die hun LCP onder 2,5 seconden krijgen, zien de conversieratio doorgaans binnen vier weken 0,4-0,7 punt terugveren.

Werken apps voor snelheidsoptimalisatie op Shopify?

Deels, en soms averechts. Apps kunnen beeldcompressie en lazy loading automatiseren, en dat helpt LCP en CLS. Maar INP wordt veroorzaakt door JavaScript, en een app die zelf JavaScript injecteert om snelheid te boosten kan INP juist verslechteren. De duurzame oplossingen zijn apps snoeien en themacode aanpassen om scripts uit te stellen, en dat is structureel developerwerk in plaats van iets wat een app voor je kan doen.

Hoeveel vertraagt elke Shopify-app mijn winkel?

Ruwweg 150-300ms extra LCP per app die scripts injecteert, al is de spreiding groot en zijn sommige apps veel erger. Winkels met zware app-stacks komen regelmatig boven 500ms INP uit, ruim in de Poor-band. Het grotere probleem is achtergebleven code: een app uit je admin verwijderen haalt niet altijd de themacode weg.

Moet ik lazy loading op alle Shopify-afbeeldingen gebruiken?

Op afbeeldingen onder de vouw: ja. Nooit op je LCP-element, meestal de hero-afbeelding of de hoofdproductafbeelding. De LCP-afbeelding lazy loaden vertraagt precies datgene wat Google meet en maakt je score slechter in plaats van beter. Preload hem in plaats daarvan en voeg fetchpriority="high" toe.

Waarom wordt mijn Shopify-winkel na optimalisatie weer trager?

Themadrift en appopstapeling. Elke nieuwe app en elke kleine thema-aanpassing voegt een script of stylesheet toe, en thema's hebben geen ingebouwd mechanisme om die op te ruimen. Winkels die elk kwartaal een audit draaien blijven onbeperkt onder 2,5 seconden LCP; winkels die één keer optimaliseren en stoppen zakken doorgaans binnen 18 maanden terug voorbij 3,5 seconden.