Shopify zorgt voor servers, schaalvergroting en een wereldwijde CDN. Waarom voelen zoveel Shopify-winkels dan nog steeds traag aan op mobiel? Het antwoord is bijna altijd wat bovenop Shopify draait: apps, themacode, afbeeldingen en scripts van derden.
Het goede nieuws: al deze zaken liggen in jouw controle. Hier zijn 15 praktische manieren om een Shopify-winkel te versnellen.
Hoe de snelheid van Shopify te meten
- Shopify admin → Analytics → Webprestaties: Core Web Vitals van echte bezoekers (waar beschikbaar)
- Google Search Console → Core Web Vitals
- PageSpeed Insights voor individuele pagina’s
- Chrome DevTools (Prestatie- en Netwerk-tabbladen) om te zien wat er laadt
Focus op echte gebruikersdata (LCP, INP, CLS) op mobiel voor je homepage, collectie- en productpagina’s. Zie Core Web Vitals voor e-commerce.
Apps en scripts
1. Controleer je apps
Elke app die functies aan uw winkel toevoegt, kan JavaScript en CSS toevoegen. Lijst alle geïnstalleerde apps op en vraag voor elke app: hebben we dit nog nodig, en laadt het op elke pagina?
2. Verwijder overgebleven app-code
Het verwijderen van een app verwijdert niet altijd de code. Oudere apps injecteerden vaak snippets in het thema. Zoek in de themacode naar verwijzingen naar apps die je hebt verwijderd (snippets, script-tags, {% render %} aanroepen) en ruim ze op. Nieuwere apps die gebruikmaken van theme app extensions worden schoner verwijderd.
3. Geef de voorkeur aan thematoepassing extensies en app blokken
Bij het kiezen van apps, geef de voorkeur aan die welke app-blokken/embeds gebruiken. Ze zijn gemakkelijker te plaatsen waar nodig en te verwijderen.
4. Controleer tracking- en marketingtags
Pixels, heatmaps, chatwidgets, beoordelingen, pop-ups en A/B-testtools stapelen zich snel op. Gebruik Shopify’s Klantenevenementen voor pixels waar mogelijk, verwijder duplicaten en laad chatwidgets pas na interactie.
Thema
5. Gebruik een modern, lichtgewicht thema
Recente Online Store 2.0-thema’s, inclusief de gratis thema’s van Shopify, zijn over het algemeen gebouwd met prestaties in gedachten. Zeer zware premium thema’s met veel ingebouwde effecten kunnen traag zijn.
6. Beperk secties op de startpagina
Elke slider, video en productcarrousel voegt gewicht toe. Houd de homepage gefocust. Eén sterke held is beter dan vijf sliders.
7. Vermijd zware sliders en autoplay video boven de vouw
Ze worden vaak het LCP-element en vertragen de weergave. Een statische heldenafbeelding is meestal sneller en converteert net zo goed.
8. Optimaliseer Liquid-code
Inefficiënte Liquid (geneste lussen over grote collecties, veel all_products opzoekingen) vertraagt server-rendering. Gebruik Shopify’s Theme Inspector voor Chrome om trage Liquid-secties te vinden.
Afbeeldingen
9. Gebruik Shopify’s afbeeldingsfilters met de juiste afmetingen
Gebruik image_url met breedteparameters en image_tag met widths en sizes, zodat de browser de juiste grootte downloadt. Shopify’s CDN levert automatisch moderne formaten.
10. Laad de held of de hoofdproductafbeelding niet lui.
De LCP-afbeelding moet onmiddellijk laden. Gebruik loading: 'eager' en fetchpriority: 'high' daarvoor, en laad alles onder de vouw lui.
11. Stel afbeeldingsafmetingen in
Breedte en hoogte (of beeldverhouding) op elke afbeelding voorkomen lay-outverschuiving (CLS).
Lettertypen en CSS
12. Beperk aangepaste lettertypen
Elke lettertypefamilie en -gewicht is een extra download. Gebruik systeemlettertypen of een klein aantal lettertypebestanden, en laad het belangrijkste vooraf.
13. Verminder ongebruikte CSS en JavaScript
Verwijder themakenmerken die je niet gebruikt. Vermijd het toevoegen van grote bibliotheken (bijvoorbeeld een volledige animatiebibliotheek) voor kleine effecten.
Inhoud en structuur
14. Pagineer grote collecties
Collecties met honderden producten op één pagina zijn traag. Gebruik paginering of “meer laden” met redelijke paginagroottes.
15. Corrigeer interne links naar op collectie gebaseerde product-URL’s
Linken naar /products/handle in plaats van op collectie gebaseerde URL’s helpt bij SEO en cachingconsistentie (zie de Shopify SEO-checklist).
Snelle prioriteitenlijst
| Fix | Impact | Inspanning |
|---|---|---|
| Verwijder ongebruikte apps en overgebleven code | Hoog | Laag tot gemiddeld |
| Hero/LCP afbeelding gretig + juiste grootte | Hoog | Laag |
| Vertraag chat en niet-essentiële tags | Hoog (INP) | Laag |
| Vereenvoudig de secties van de startpagina | Medium | Laag |
| Optimaliseer Liquid | Gemiddeld tot hoog | Medium |
| Schakel over naar een lichter thema | Hoog | Hoog |
Voor het hoogseizoen
Maak snelheidswijzigingen voor je code freeze. Bekijk de Black Friday checklist.
Veelgestelde vragen
Heeft het Shopify-abonnement invloed op de snelheid?
De snelheid van de winkelpagina wordt voornamelijk bepaald door je thema, apps en inhoud, niet door het plan.
Is de Shopify snelheidsscore in de admin belangrijk?
Echte gebruikers Core Web Vitals zijn belangrijker dan welke enkele labscore dan ook. Gebruik scores als een gids, niet als een doel.
Kan ik Shopify net zo snel maken als een aangepaste headless winkel?
Een goed geoptimaliseerd Online Store 2.0-thema kan zeer snel zijn. Headless opstellingen bieden meer controle, maar voegen complexiteit en kosten toe; ze zijn niet automatisch sneller.
Wil je een snellere Shopify-winkel?
Ik controleer en optimaliseer Shopify-thema’s en app-configuraties voor snelheid en Core Web Vitals. Bekijk mijn Shopify-service of vraag een snelheid audit aan.