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 overonlinewinkelsnelheidbekijken.

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

Shopifyhosts jouw onlinewinkel opsnelle, wereldwijde serversen beperkt de bandbreedte van je winkel niet. Je kunt de status van je Shopify-winkel controleren opShopify-status.

Shopifybrengt 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 doorFastly, die ervoor zorgt dat je onlinewinkel snel over de hele wereld wordt geladen. Je kunt de CDN-status controleren op deFastly-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.

Shopifystelt 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 hetcontent_for_headerLiquid-object

Het `` Liquid-object injecteert items die worden gebruikt door verschillende onlinewinkelfuncties, waaronder prestatieanalyses en optionele functies, zoals dynamische checkoutknoppen. Het laden van dit object en gerelateerde items heeft invloed op de snelheid van je winkel. Shopify optimaliseert het object 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:

• Schakelapp-functies die je niet gebruiktuit of verwijder de apps als je ze niet nodig hebt. Denk na over debalans 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应用代码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 ondersteuning. Meer informatie over het inhuren vanShopifyExperts.

主题的Thema

主题的Themabestaan 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:

• Schakelthemafuncties die je niet gebruiktuit. Denk na over debalans tussen de functies en de snelheid van de onlinewinkel.
• Je kunt eensysteemlettertypegebruiken.
• Neem contact op met jouw thema-ontwikkelaar. Als je eengratis thema van Shopifygebruikt, kun jecontact opnemen met support.
• Als je een thema van derden gebruikt, kun je contact opnemen met deontwikkelaar van het themaof een Shopify Expert inhuren.
• Overweeg om een thema te installeren dat is geoptimaliseerd voor prestaties, zoalsDawn.
• Huur een Shopify Expert in voor verdere ondersteuning. Meer informatie over het inhuren vanShopifyExperts.

Thema-of app-functies

Bepaalde functies,印度ingeschakeld, kunnen书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:

• Gebruik eenheatmap-toolom te zien of klanten bepaalde functies gebruiken. Schakel functies uit als ze niet worden gebruikt.
• Schakel de functie uit als je deze niet nodig hebt. Denk na over debalans tussen de functies en de snelheid van de onlinewinkel.
• Raadpleeg de thema-en app-ontwikkelaars en vraag of ze gegevens vooraf laden.
• Huur een Shopify Expert in voor verdere ondersteuning. Meer informatie over het inhuren vanShopifyExperts.

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:

• Voer deShopifyTheme Inspector voor Chromeuit om de regels met code te identificeren die pagina's in je onlinewinkel vertragen.
• Huur een Shopify Expert in om je te helpen inefficiënte of nutteloze code te vinden.

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.

Shopifyvoegt 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'sstellenhet 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 dehandleiding 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. Meer informatie over het inhuren vanShopifyExperts.

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

Je kunt de volgende tools gebruiken om de snelheid van je onlinewinkel 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 overShopify.dev.

Lighthouse

Het rapportSnelheidvan jouw onlinewinkelvan Shopify gebruikt Lighthouse om de snelheid van je winkel te meten. Je kunt jouw eigen Lighthouse-rapport maken met behulp vanGoogle PageSpeed Insightsom meer gedetailleerde statistieken voor pagina's in je winkel te bekijken. Raadpleeg dedocumentatie 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. Meer informatie over het inhuren vanShopifyExperts.

ShopifyTheme Inspector voor Chrome

DeShopifyTheme Inspector voor Chromeis 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. Ontdekhoe je de Shopify Theme Inspector kunt gebruiken.

Krijg ondersteuning met de snelheid van je onlinewinkel

Als je eengratis thema van Shopifygebruikt, dan 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 deontwikkelaar van het themaof een Shopify Expert inhuren. Meer informatie over het inhuren vanShopifyExperts.

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