De prestaties van je webshop verbeteren

Verschillende factoren zijn van invloed op de prestaties van je webshop. Een aantal daarvan kun je zelf beïnvloeden.

Bekijk je webprestatierapport voor meer informatie over hoe je webshop het vandaag doet.

Factoren die buiten je macht liggen

Deze factoren kunnen van invloed zijn op de prestaties van je winkel, maar je hebt er geen controle over via instellingen of aanpassingen die je in je Shopify-winkel kunt maken. Dit omvat factoren bij klanten, zoals hun apparaat- of internetsnelheid, evenals factoren bij Shopify, zoals updates van de infrastructuur van Shopify.

Het apparaat, het netwerk en de locatie van de klant

Klanten die jouw winkel bezoeken, wonen over de hele wereld en hebben verschillende apparaten en internetverbindingen. Dit betekent dat je winkel voor hen sneller of langzamer kan laden, afhankelijk van deze factoren.

Als een klant contact met je opneemt over de snelheid van je winkel, vraag dan aan de klant of ze de nieuwste versie van hun browser gebruiken, of ze onlangs hun cache gewist hebben en of hun internetserviceprovider momenteel geen storingen of verminderde prestaties ondervindt.

Shopify-infrastructuur

Shopify hosts jouw onlinewinkel op snelle, wereldwijde servers en beperkt de bandbreedte van je winkel niet. Je kunt de status van je Shopify-winkel controleren op Shopify-status.

Shopify brengt voortdurend verbeteringen aan in de code en infrastructuur. Sommige verbeteringen kunnen worden weerspiegeld in de prestatiestatistieken.

Hieronder staan enkele functies die de snelheid van je webshop kunnen beïnvloeden.

Content Delivery Network (CDN)

CDN staat voor Content Delivery Network (netwerk voor de bezorging van content). Het CDN slaat afbeeldingen en andere bestanden op, zoals de content op de pagina Content > Bestanden van het Shopify-beheercentrum. In het CDN biedt Shopify merchants een CDN van wereldklasse die wordt uitgevoerd door Cloudflare, die ervoor zorgt dat je webshop over de hele wereld snel wordt geladen. Je kunt de CDN-status controleren op de Cloudflare-statuspagina.

Lokale browsercache

Je winkel slaat bepaalde elementen tijdelijk op in de lokale opslag van de klant. De volgende keer dat de klant jouw onlinewinkel bezoekt, kan de browser bronnen uit de cache laden in plaats van een nieuw verzoek naar de server te sturen.

Shopify stelt browsercaching voor cachebare bronnen in jouw winkel in op één jaar voor elk bestand. Bestanden die in de cache worden opgeslagen, zijn onder andere afbeeldingsbestanden, PDF's, JS-bestanden en CSS-bestanden.

Paginacache aan serverzijde

Naast caching in de lokale browser, slaat Shopify pagina's op aan de serverzijde. De eerste keer dat een pagina wordt geladen, kan deze langzamer zijn, maar later wordt de pagina sneller geladen omdat klanten een kopie uit de cache ontvangen.

De items in het content_for_header Liquid-object

Het `` Liquid-object injecteert items die worden gebruikt voor verschillende webshopfuncties, waaronder prestatieanalytics en optionele functies, zoals dynamische checkout-knoppen. Het laden van dit object en gerelateerde items heeft invloed op de snelheid van je winkel. Shopify optimaliseert de tag en de bijbehorende items om deze sneller te maken.

Factoren die binnen je macht liggen

Hieronder staan enkele factoren die van invloed kunnen zijn op de prestaties van je webshop en manieren waarop je deze kunt aanpakken.

Apps

Wanneer je apps toevoegt om de functionaliteit of het uiterlijk van je onlinewinkel te wijzigen, voegen ze code toe aan het thema zodat ze kunnen worden uitgevoerd. Sommige code kan worden verwijderd of opnieuw worden besteld om de prestaties van je onlinewinkel te verbeteren. Als je geen app gebruikt, kun je deze verwijderen.

Als je denkt dat een app je winkel vertraagt, kun je de volgende stappen uitvoeren:

  • Deactiveer app-functies die je niet gebruikt of verwijder de app als je deze niet nodig hebt. Denk na over de balans tussen de functies en de snelheid van de webshop.
  • Overweeg bij het verwijderen van een app om de code te verwijderen die is toegevoegd als onderdeel van het app-installatieproces. De meeste apps verwijderen de code automatisch voor je, maar je kunt contact op nemen met de ontwikkelaar van de app om dit na te vragen. Sommige apps helpen je bij dit proces door hun code in {% comment %}-tags te plaatsen die de naam van de app vermelden. Het verwijderen van ongebruikte app-code is een best practice waarmee je het uitvoeren van code voor ongebruikte functies vermijdt en de themacode gemakkelijker leesbaar maakt.
  • Neem contact op met je app-ontwikkelaar.

Thema's

Thema's bestaan uit Liquid-, HTML-, CSS- en JavaScript-code. Wanneer je thema's bewerkt of aanpast, kunnen bestanden groter worden, wat de webprestaties kan beïnvloeden.

Als je denkt dat iets in je thema je winkel vertraagt, neem dan de volgende stappen:

Thema- of app-functies

Sommige functies kunnen ook een effect hebben op de prestaties van je winkel als deze zijn ingeschakeld. Sommige pop-ups voor snelle weergave laden bijvoorbeeld vooraf gegevens van elke productpagina wanneer een collectiepagina wordt geladen. Het laden van extra gegevens die klanten niet gebruiken kan de laadsnelheid van je winkel beïnvloeden zonder dat het iets toevoegt.

Als je denkt dat een functie je winkel vertraagt, kun je de volgende stappen nemen:

Complexe of inefficiënte Liquid-code

Je kunt vrijwel alle Liquid-code bewerken die wordt gebruikt om je winkel weer te geven. Er zijn efficiënte en inefficiënte manieren om Liquid-ode te schrijven. Als je herhaaldelijk complexe bewerkingen uitvoert, kan dit de Liquid-rendertijd verhogen, wat de algehele webprestaties kan vertragen.

Als je bijvoorbeeld de producten in een collectie op prijs wilt ordenen, is het handig dat je dit doet voordat je de producten in je collectie doorloopt, en niet als onderdeel van de loop code. Dit komt doordat de volgorde van de producten niet voor elk product verandert en er extra verwerkingstijd nodig kan zijn om de volgorde van producten te berekenen.

Als je denkt dat je code niet geoptimaliseerd is, kun je de volgende stappen nemen:

  • Voer de Shopify Theme Inspector voor Chrome uit om de regels met code te identificeren die pagina's in je onlinewinkel vertragen.
  • Huur een Shopify-partner in om je te helpen inefficiënte of nutteloze code te vinden.

Afbeeldingen en video's

Extra grote afbeeldingen en afbeeldingen die niet zichtbaar zijn, kunnen het laden van andere, belangrijkere onderdelen van een pagina hinderen. Als gebruikers moeten wachten op het laden van grote afbeeldingen, maakt je winkel op hen misschien een trage indruk.

Shopify voegt enkele voorzorgsmaatregelen toe om te voorkomen dat je jouw onlinewinkel overbelast met afbeeldingen of video's. Bijvoorbeeld:

  • Je kunt niet meer dan 50 producten op een collectiepagina of 25 secties op je homepage hebben.
  • Bij veel thema's wordt het laden van afbeeldingen die op dat moment niet op het scherm staan uitgesteld.
  • Veel thema's laden ook een specifieke grootte van een afbeelding op basis van de schermgrootte waarop deze wordt weergegeven.

Maar deze maatregelen voorkomen niet altijd dat afbeeldingen of video's een vertragend effect hebben op je onlinewinkel.

Als je denkt dat afbeeldingen je winkel vertragen, kun je de volgende stappen nemen:

  • Bekijk de gids voor afbeeldingsoptimalisatie.
  • Beperk diavoorstellingen van uitgelichte afbeeldingen tot 2 of 3 dia's of gebruik één uitgelichte afbeelding.
  • Vraag je themaontwikkelaar om advies over de beste manier om afbeeldingen bij hun thema te gebruiken.

Lettertypen

Je kunt kiezen uit verschillende lettertypen voor de tekst in je onlinewinkel. Als je echter een lettertype gebruikt dat nog niet op de computer van je klant staat, moet het lettertype worden gedownload voordat je tekst kan worden weergegeven. Dit heeft gevolgen voor de laadtijd van je winkel.

Om te voorkomen dat je een nieuw lettertype naar de computer van de klant downloadt, kun je een systeemlettertype gebruiken. Een systeemlettertype is een lettertype dat al op de meeste computers is geïnstalleerd.

Je kunt een mono, serif of sans-serif lettertypefamilie selecteren. Je kunt nog steeds lettertypestijlen gebruiken, zoals vet of cursief, wanneer je een van deze lettertypefamilies gebruikt.

Het lettertype dat op de computer van de klant wordt weergegeven, is afhankelijk van hun besturingssysteem. Hieronder staan enkele voorbeelden van de lettertypen die kunnen worden gebruikt om tekst weer te geven wanneer je een systeemlettertypefamilie selecteert:

  • Mono: Menlo, Consolas, Monaco, Liberation mono of Lucida Console
  • Sans-Serif: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu of Helvetica Neue
  • Serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times of Source Serif Pro

Problemen met tools oplossen

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

Als je een ontwikkelaar bent, kun je je thema verder optimaliseren voor prestaties met behulp van Shopify-tools en best practices. Meer informatie over Shopify.dev.

PageSpeed Insights

Het rapport van het webprestatiedashboard van Shopify maakt gebruik van Core Web Vitals om te meten hoe echte gebruikers je webshop ervaren. Je kunt zelf ook rapporten maken met behulp van Google PageSpeed Insights om meer gedetailleerde statistieken voor pagina's in je winkel te bekijken.

Shopify Theme Inspector voor Chrome

De Shopify Theme Inspector voor Chrome is een profileringstool die gebruikmaakt van een vlamgrafiek om Liquid render-prestaties weer te geven. Dit hulpmiddel helpt je bij het identificeren van de regels code die pagina's in je onlinewinkel vertragen. Ontdek hoe je de Shopify Theme Inspector kunt gebruiken.

Ondersteuning krijgen voor de prestaties van je webshop

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

Als je een thema van derden gebruikt en hulp nodig hebt, kun je contact opnemen met de ontwikkelaar van het thema of een Shopify-partner inhuren. Meer informatie over Een Shopify-partner inhuren.

Als je met een ontwikkelingsteam of een bureau samenwerkt, kun je ook contact met hen opnemen voor verdere hulp.

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis