De prestaties van je webshop verbeteren

Je webshop bestaat uit een reeks functies, zoals themacode, apps, afbeeldingen, video's, carrousels, socialmediafeeds en analytics. Deze functies kunnen de bezoekerservaring verbeteren en de mogelijkheden van je site uitbreiden.

Elke functie die je aan je webshop toevoegt, kan echter van invloed zijn op de prestaties van je winkel. Sommige functies kunnen je site vertragen of onverwacht gedrag veroorzaken dat de gebruikerservaring kan beïnvloeden.

Webprestaties zijn gericht op het optimaliseren van de gebruikerservaring. Momenteel zijn webprestaties gericht op drie belangrijke gebieden die ook worden weerspiegeld in de Core Web Vitals:

Laadsnelheid, gemeten door Largest Contentful Paint (LCP)
Opmaakstabiliteit, gemeten door Cumulative Layout Shift (CLS)
Reactievermogen op gebruikersinteractie, gemeten door Interaction to Next Paint (INP)

Het optimaliseren van webprestaties betekent dat je klanten waarschijnlijk langer op je site blijven en tot conversie overgaan.

Op deze pagina

Optimalisaties voor je webshop

Je webshop heeft ingebouwde weboptimalisatie. Weboptimalisatie is ook ingebouwd in alle nieuwe functies. Je hoeft niets speciaals te doen om van de volgende functies te profiteren:

Je webshop wordt gehost op snelle, wereldwijde servers en beperkt de bandbreedte van je winkel niet. Je kunt de status van je Shopify-winkel controleren op Shopify Status.
Je webshop heeft een content delivery network (CDN) van Cloudflare dat ervoor zorgt dat je webshop over de hele wereld snel laadt. Je kunt de CDN-status controleren op de statuspagina van Cloudflare.
Om laadtijden kort te houden, worden afbeeldingen automatisch geoptimaliseerd met behulp van de afbeeldings-CDN. In combinatie met je themacode kan de afbeeldings-CDN de beste afbeeldingsindeling leveren, die ook wordt verkleind en gecomprimeerd om de bestandsgrootte klein te houden.

Factoren die van invloed zijn op webprestaties

Voor Shopify-winkels zijn de volgende factoren het belangrijkst voor de webprestaties:

Het thema van je webshop
De apps die je hebt geïnstalleerd
Alle extra code van externe partijen die je handmatig aan je winkel hebt toegevoegd, inclusief tagmanagers en de tags daarin

Dit betekent dat je je moet richten op het volgende om je webprestaties te verbeteren:

Gebruik een bijgewerkt, geoptimaliseerd thema. Alle thema's van de Horizon-familie en Online Store 2.0-thema's van Shopify zijn gratis en geoptimaliseerd voor webprestaties. Daarnaast zijn veel andere thema's van externe partijen ook geoptimaliseerd voor webprestaties. Je kunt de nieuwste gegevens over themaprestaties bekijken.
Als je thema paginaovergangen of andere animaties biedt, vergelijk dan je webprestaties voor en na het activeren ervan. Animaties kunnen pagina's vertragen.
Voeg niet te veel secties toe aan paginatemplates in je thema. Een groot aantal secties op pagina's kan de webprestaties verslechteren.
Als je collecties met grote hoeveelheden producten hebt, overweeg dan om paginering te activeren om het aantal producten dat tegelijk wordt geladen te beperken.
Evalueer je geïnstalleerde apps en code van externe partijen om er zeker van te zijn dat ze voldoende waarde creëren om eventuele prestatieverliezen te compenseren.
Controleer je tagmanager om ongebruikte of weinig waardevolle tags te verwijderen. Meer informatie over best practices voor tags en tagmanagers.

Testtools

Je kunt de volgende tools gebruiken om de prestaties van je webshop te onderzoeken:

Rapporten over webprestaties: De rapporten over webprestaties van Shopify gebruiken Core Web Vitals om te meten hoe echte gebruikers je webshop ervaren.
PageSpeed Insights: Je kunt je eigen rapporten uitvoeren met PageSpeed Insights van Google om meer gedetailleerde statistieken voor pagina's in je winkel te bekijken.

Prestatieaanbevelingen van externe partijen begrijpen

Scantools voor prestaties van externe partijen kunnen wijzigingen voorstellen om de snelheid van je winkel te verbeteren. Veel van deze aanbevelingen zijn echter al geïmplementeerd door Shopify of zijn niet van toepassing op Shopify-winkels.

Optimalisaties die al in Shopify zijn inbegrepen

Je Shopify-winkel bevat automatisch de volgende prestatieoptimalisaties:

Content Delivery Network (CDN): Shopify biedt zonder extra kosten een CDN van wereldklasse, wat snelle wereldwijde prestaties garandeert. Alle assets worden geleverd via HTTP/2, wat de overhead vermindert in vergelijking met oudere protocollen.

Browsercaching: Shopify stelt browsercaching voor cachebare bronnen in op één jaar, de maximaal mogelijke duur. Dit betekent dat terugkerende bezoekers van je winkel snellere laadtijden zullen ervaren.

Gzip-compressie: Shopify maakt gebruik van Gzip-compressie op CSS, JavaScript, documenten en pagina's om de bandbreedte te verminderen en de laadtijden te verbeteren. Keep-alive is ook ingeschakeld voor het ophalen van meerdere bestanden.

Afbeeldingsoptimalisatie: Shopify comprimeert JPG-afbeeldingen automatisch met behulp van geavanceerde algoritmen, waarbij een balans wordt gevonden tussen compressie en visuele aantrekkingskracht. Afbeeldingen worden vaak in WebP-indeling geleverd voor betere compressie en sneller laden.

Bestandsminimalisatie: Shopify minimaliseert CSS- en JavaScript-bestanden automatisch wanneer ze door je webshop worden opgevraagd, waardoor de bestandsgrootte wordt verkleind zonder de functionaliteit te beïnvloeden.

Wanneer aanbevelingen van externe partijen niet van toepassing zijn

Scantools van externe partijen kunnen wijzigingen voorstellen die niet relevant zijn voor Shopify-winkels:

Configuraties op serverniveau: Aanbevelingen over serverinstallatie, HTTP-headers of cachingbeleid zijn al geoptimaliseerd door de infrastructuur van Shopify.
CDN-implementatie: Suggesties om een CDN toe te voegen zijn onnodig, aangezien Shopify standaard een hoogwaardige CDN bevat.
Compressie-instellingen: Aanbevelingen over het inschakelen van compressie zijn al geïmplementeerd op het Shopify-platform.

Relevante aanbevelingen opvolgen

Richt je op aanbevelingen die betrekking hebben op de specifieke content en functies van je winkel:

Afbeeldingoptimalisatie: Zorg ervoor dat je geüploade afbeeldingen de juiste grootte hebben en de aanbevolen formaten gebruiken.
App-evaluatie: overweeg of geïnstalleerde apps genoeg waarde bieden om de eventuele impact op de prestaties te compenseren.
Themaoptimalisatie: kies thema's die zijn geoptimaliseerd voor prestaties en beperk het aantal secties op paginatemplates.

Problemen met traag ladende pagina's oplossen

Als je winkel traag laadt, volg dan deze stappen om het probleem te identificeren en op te lossen:

Stap 1: Het probleem controleren

Test zelf de laadsnelheid van je winkel vanaf verschillende apparaten en internetverbindingen.
Vraag anderen om je winkel te testen om te bevestigen dat het geen lokaal probleem met je internetverbinding is.
Gebruik testtools zoals PageSpeed Insights om specifieke prestatiestatistieken te krijgen.

Stap 2: De oorzaak achterhalen

Controleren op te veel apps: te veel apps die assets in je webshop laden, kunnen de prestaties vertragen. Controleer je geïnstalleerde apps en verwijder alle apps die niet essentieel zijn voor de verkoop.

Grote afbeeldingen controleren: pagina's met veel afbeeldingen van hoge kwaliteit kunnen traag laden. Optimaliseer je afbeeldingen of verminder het aantal weergegeven afbeeldingen. Meer informatie over aanbevolen afbeeldingsgroottes.

Trage scripts identificeren: als je site op een lege pagina blijft hangen voordat alles in één keer laadt, gebruik dan de ontwikkelaarstools van je browser om traag ladende scripts te identificeren. Neem contact op met de app- of themaontwikkelaar voor een oplossing.

Stap 3: Actie ondernemen

Onnodige apps verwijderen: wanneer je een app verwijdert, wordt de code ervan niet automatisch uit je thema verwijderd. Mogelijk moet je contact opnemen met de app-ontwikkelaar voor volledige verwijderingsinstructies.

Afbeeldingen optimaliseren: gebruik de juiste bestandsindelingen (JPG voor foto's, PNG voor afbeeldingen met transparantie) en wijzig het formaat van afbeeldingen zodat dit overeenkomt met de weergavegrootte.

Themaprestaties evalueren: overweeg over te stappen op een voor prestaties geoptimaliseerd thema als je huidige thema aanzienlijke vertragingen veroorzaakt.

Ondersteuning krijgen voor webshopprestaties

Als je een gratis thema van Shopify gebruikt, kan Shopify Support je mogelijk helpen met eenvoudige prestatieverbeteringen.

Als je een thema van een externe partij gebruikt en hulp nodig hebt, moet je contact opnemen met je themaontwikkelaar, een Shopify-expert in webprestaties inhuren of een Shopify Partner voor siteprestaties en -snelheid inhuren. Meer informatie over het inhuren van een Shopify Partner.

Als je prestatieprobleem door een app wordt veroorzaakt, kun je contact opnemen met je app-ontwikkelaar.

Als je een ontwikkelteam of partnerbureau hebt, kun je ook contact met hen opnemen voor verdere hulp.

Technische informatie en bronnen voor probleemoplossing

Als je een ontwikkelaar bent en de prestaties van een Shopify-webshop, -thema of -app wilt verbeteren, kun je de volgende bronnen voor elke Core Web Vital bekijken. Meer informatie over best practices voor de prestaties van Shopify-thema's.

Laadsnelheid

Largest Contentful Paint (LCP) meet de laadsnelheid op basis van hoe snel het grootste element op het scherm zichtbaar wordt. Time to first byte (TTFB) en first contentful paint (FCP) zijn ondersteunende statistieken die je helpen beter te begrijpen waar de hoofdoorzaak van het probleem ligt. Je kunt meer informatie vinden over het debuggen van veelvoorkomende oorzaken van traag laden in Shopify Liquid-webshops.

Visuele stabiliteit

Cumulative Layout Shift (CLS) meet de visuele stabiliteit op basis van hoeveel de content onverwacht verschuift tijdens het laden. Lees voor een diepgaande analyse van het debuggen van CLS Cumulative Layout Shift (CLS) optimaliseren op Shopify-sites.

Interactiviteit

Interaction to Next Paint (INP) meet de interactiviteit op basis van hoe lang het duurt voordat de pagina reageert op de meeste gebruikersacties. Bijvoorbeeld gebruikersacties zoals het klikken op een link of een knop.

Als je last hebt van een slechte INP, heb je hoogstwaarschijnlijk te veel JavaScript in je winkel, afkomstig van themacode, app-code of code van een externe partij/tagmanager. Pak je ergste boosdoeners aan. Meer informatie over 3 manieren om je ergste JavaScript-boosdoeners voor het laden van pagina's te vinden. Als je nog steeds problemen hebt met INP, kun je meer informatie vinden in de bronnen op web.dev.