De snelheid van je onlinewinkel verbeteren

Verschillende factoren zijn van invloed op de snelheid van je onlinewinkel, waarvan je sommige kunt controleren.

Als je niet weet hoe snel je onlinewinkel vandaag presteert, kun je het rapport over onlinewinkelsnelheid bekijken.

Factoren waar je geen controle over hebt

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 om te controleren of ze de nieuwste versie van hun browser gebruiken, of ze onlangs hun cache gewist hebben en of hun internetserviceprovider momenteel geen stroingen 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 zijn code en infrastructuur. Sommige verbeteringen kunnen worden weerspiegeld in je snelheidsscore.

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

Content Delivery Network (CDN)

CDN staat voor content delivery network. Shopify biedt verkopers een CDN van wereldklasse die wordt gerund door Fastly, die ervoor zorgt dat je onlinewinkel snel over de hele wereld wordt geladen. Je kunt de CDN-status controleren op de Fastly-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 de content_for_header Liquid-tag

De {% content_for_header %} Liquid-tag injecteert items die worden gebruikt door verschillende onlinewinkelfuncties, waaronder prestatieanalyses en optionele functies, zoals dynamische checkoutknoppen. Het laden van deze tag 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 je kunt controleren

Hieronder staan enkele factoren die van invloed kunnen zijn op de snelheid van je onlinewinkel 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:

  • Schakel app-functies uit die je niet gebruikt uit of verwijder de apps als je ze niet nodig hebt. Denk na over de balans tussen de functies en de snelheid van de onlinewinkel.
  • Als je een app verwijdert, overweeg dan om de code te verwijderen die is toegevoegd als onderdeel van het app-installatieproces. 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 die het uitvoeren van code voor ongebruikte functies vermijdt en je themacode gemakkelijker leesbaar maakt.

  • Neem contact op met je app-ontwikkelaar.

  • Huur een Shopify-expert in voor verdere hulp.

Thema's

Thema's bestaan uit Liquid-, HTML-, CSS- en JavaScript-code. Wanneer je thema's bewerkt of aanpast, kunnen de bestandsgroottes toenemen en de snelheid van je winkel beïnvloeden.

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

Thema-of app-functies

Bepaalde functies, indien ingeschakeld, kunnen ook van invloed zijn op jouw winkel snelheid. Sommige pop-ups met snelle weergave laden informatie van elke productpagina vooraf wanneer een collectiepagina wordt geladen. Het laden van extra gegevens die jouw klanten niet gebruiken, kan van invloed zijn op je winkel snelheid zonder toegevoegde waarde.

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-code te schrijven. Door herhaaldelijk complexe bewerkingen te doen, kun je de Liquid-rendertijd verhogen, wat van invloed is op de algehele snelheid van je winkel.

Als je bijvoorbeeld de producten in een collectie op prijs wilt bestellen, moet je dat doen voordat je de producten in je collectie doorloopt, en niet als onderdeel van de loop code. Dit komt omdat de volgorde van de producten niet voor elk product verandert en het berekenen van de volgorde van de producten verwerkingstijd aan het verzoek toevoegt.

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

Afbeeldingen en video's

Extra grote afbeeldingen en afbeeldingen niet zichtbaar zijn, kunnen het laden van andere, belangrijkere delen van een pagina verhinderen. Als gebruikers moeten wachten tot grote afbeeldingen zijn geladen, kunnen ze zien dat je winkel traag is.

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.
  • Veel thema's stellen het laden van afbeeldingen uit die momenteel niet op het scherm staan.
  • Veel thema's laden ook een specifieke grootte van een afbeelding op basis van de schermgrootte waarop deze wordt weergegeven.

Deze beveiligingen verhinderen echter niet volledig dat afbeeldingen of video's van invloed zijn op de prestaties van je onlinewinkel.

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

  • Bekijk de handleiding 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.
  • Huur een Shopify Expert in voor verdere ondersteuning.

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

Hulpmiddelen voor troubleshooting

Hieronder staan tools die je kunt gebruiken om de snelheid van je onlinewinkel te onderzoeken.

Lighthouse

Het rapport over de Snelheid van jouw onlinewinkel van Shopify gebruikt van Lighthouse om de snelheid van je winkel te meten. Je kunt jouw eigen Lighthouse-rapport maken met behulp van Google Page Speed Insights om meer gedetailleerde statistieken voor pagina's in je winkel te bekijken. Raadpleeg de documentatie over prestatiestatistieken van Google Lighthousevoor meer informatie over de inhoud van deze statistieken. Je kunt ook een Shopify Expert inhuren om je te helpen de statistieken te begrijpen en verbeteringen voor te stellen.

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.

Waar je ondersteuning kunt krijgen

Als je een gratis thema van Shopify gebruikt, dan kan Shopify-ondersteuning 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 Expert inhuren.

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

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis