Förbättra resultaten för din webbshop

Flera faktorer påverkar din webbshops prestanda och vissa av dem kan du styra.

Se rapporten Webbprestanda om du vill veta hur det går för din webbshop idag.

Faktorer som du inte kan kontrollera

Dessa faktorer kan påverka butikens resultat men de kan inte kontrolleras av några inställningar eller justeringar som du kan göra i din Shopify-butik. Detta inkluderar faktorer gällande dina kunder, som till exempel deras enhets- eller internethastighet, så väl som faktorer från Shopify, som uppdateringar av Shopifys infrastruktur.

Din kunds enhet, nätverk och plats

Kunder som besöker din butik bor runt om i världen och har olika enheter och internetanslutningar. Det innebär att din butik kan läsas in snabbare eller långsammare för dem beroende på dessa faktorer.

Om en kund kontaktar dig angående butikens hastighet ska du be kunden att kontrollera att de använder den senaste versionen av sin webbläsare, att de nyligen har rensat cacheminnet och att deras internetleverantör inte upplever några avbrott eller försämrad prestanda.

Shopifys infrastruktur

Shopify är värd för din webbutik på snabba, globala servrar och begränsar inte butikens bandbredd. Du kan kontrollera statusen för din Shopify-butik påShopify-status.

Shopify förbättrar hela tiden sin kod och infrastruktur. En del av förbättringarna kan visas i dina prestandamätvärden.

Nedan följer några funktioner som påverkar hastigheten i din webbshop.

Innehållsleveransnätverk (CDN)

CDN står för innehållsleveransnätverk. CDN lagrar dina bilder och andra filer, som till exempel innehållet i din Shopify-administratörs sida Innehåll > Filer. Det är i CDN som Shopify tillhandahåller handlare ett CDN i världsklass som drivs av Cloudflare , som säkerställer att din webbshop läses in snabbt runt om i världen. Du kan kontrollera CDN-statusen på Cloudfares statussida.

Cacheminne för lokal webbläsare

Din butik cachelagrar, eller sparar, vissa element i din kunds lokala lagringsutrymme tillfälligt. Nästa gång din kund besöker din webbutik kan webbläsaren ladda resurser från cachen istället för att skicka en till förfrågan till servern.

Shopify ställer in webbläsarens cachelagring för lagringsbara resurser i din butik till ett år för varje fil. Filer som kan cachelagras inkluderar bildfiler, PDF-filer, JS-filer och CSS-filer.

Cacheminne för serversida

Förutom cachelagring på lokala webbläsare, cachelagrar Shopify sidor på serversidan. Första gången en sida läses in kan den vara långsammare, men senare läses sidan in snabbare eftersom kunderna får en cachelagrad kopia.

Tillgångarna i Liquid-objektet content_for_header

Liquid-objektet `` matar in tillgångar som används av olika webbshopsfunktioner, inklusive prestandaanalyser och valfria funktioner såsom dynamiska kassaknappar. Din butiks hastighet påverkas om du läser in detta objekt och relaterade tillgångar. Shopify optimerar taggen och dess tillgångar för att öka hastigheten.

Faktorer du kan kontrollera

Nedan följer några faktorer som kan påverka prestandan för din webbshop och hur du kan åtgärda dem.

Appar

När du lägger till appar för att ändra funktionaliteten eller utseendet för din webbutik, lägger de till kod i temat så att de kan köras. Koden kan tas bort eller beställas igen för att förbättra din webbutiks prestanda. Om du inte använder en app kan du ta bort den.

Om du tror att en app gör din butik långsammare, utför då följande steg:

  • Inaktivera appfunktioner som du inte använder eller ta bort appen om du inte behöver den. Överväg balansen mellan webbshoppens funktioner och hastighet.
  • Om du tar bort en app så ska du överväga att ta bort kod som lagts till som en del i appens installationsprocess. De flesta appar kommer att ta bort sin kod automatiskt åt dig, men du kan kontrollera med appens utvecklare för att vara säker. Vissa appar hjälper dig med den här processen genom att svepa in koden i {% comment %}-taggar som nämner appnamnet. Att ta bort oanvänd appkod är bästa praxis för att undvika att köra kod för oanvända funktioner och göra din temakod lättare att läsa.
  • Rådgör med din apputvecklare.

Teman

Teman består av Liquid-, HTML-, CSS- och JavaScript-kod. När du redigerar eller anpassar teman kan filstorlekar öka och påverka webbprestandan.

Om du tror att något i ditt tema gör din butik långsammare, utför då följande steg:

Tema- eller appfunktioner

Vissa funktioner kan också påverka butikens prestanda när de aktiverats. Vissa popup-fönster med snabbvisning förladdar exempelvis information från alla produktsidor när en produktseriesida läses in. Om du läser in extra data som dina kunder inte använder kan butikens inläsningshastighet påverkas i onödan.

Vidta följande åtgärder om du tror att en funktion gör din butik långsam:

Komplex eller ineffektiv Liquid-kod

Du kan redigera nästan alla Liquid som används för att återge din butik. Det finns effektiva och ineffektiva sätt att skriva Liquid-kod. Om du gör komplexa åtgärder upprepade gånger kan du öka återgivningstiden för Liquid, vilket påverkar din övergripande webbprestanda.

Om du till exempel vill sortera produkterna i en produktserie efter pris så bör du göra det innan du går igenom produkterna i din produktserie och inte som en del av loop-koden. Detta beror på att produkternas ordning inte ändras för varje produkt, och beräkning av produkternas ordning ökar bearbetningstiden för en förfrågan.

Du kan vidta följande åtgärder om du är orolig över att din kod inte är optimerad:

  • Kör Shopify Theme Inspector for Chrome för att identifiera de rader med kod som gör att sidor i din webbutik blir långsammare.
  • Anlita en Shopify partner för att få hjälp med att hitta ineffektiv eller oanvändbar kod.

Bilder och videor

Överdimensionerade bilder och bilder som döljs i visningen kan störa inläsningen av andra, viktigare delar av en sida. Om användare måste vänta på att stora bilder ska läsas in kan de uppfatta din butik som långsam.

Shopify lägger till vissa skyddsåtgärder för att hindra dig från att överbelasta din webbutik med bilder eller videoklipp. Till exempel:

  • Du kan inte ha mer än 50 produkter på en kollektionssida eller 25 avsnitt på din hemsida.
  • Många teman skjuter upp inläsning av bilder som för närvarande inte visas på skärmen.
  • Många teman laddar också en specifik storlek på en bild baserat på skärmstorleken den visas på.

Dessa skyddsåtgärder hindrar dock inte helt bilder eller videor från att påverka din webbshops prestanda.

Vidta följande åtgärder om du tror att bilder gör din butik långsam:

  • Gå igenom bildoptimeringsguiden.
  • Håll bildspel med utvalda bilder till 2-3 bilder eller använd en utvald bild.
  • Konsultera temautvecklaren för deras rekommendationer om användning av bilder med temat.

Typsnitt

Du kan välja mellan flera typsnitt för texten i din webbutik. Om du däremot använder ett typsnitt som ännu inte finns på kundens dator så måste typsnittet laddas ner innan din text kan visas. Detta påverkar den tid som det tar för din butik att ladda.

För att undvika att ladda ner ett nytt typsnitt till din kunds dator kan du använda ett systemtypsnitt. Ett systemtypsnitt är ett typsnitt som redan är installerat på de flesta datorer.

Du kan välja en mono-, serif- eller sans-serif-typsnittsfamilj. Du kan fortfarande använda typsnittsstilar, till exempel fet eller kursiv, när du använder någon av dessa typsnittsfamiljer.

Vilket typsnitt som visas på din kunds dator beror på deras operativsystem. Nedan följer några exempel på de typsnitt som kan användas för att återge text när du väljer en familj med systemtypsnitt:

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

Felsökningsverktyg

Du kan använda följande verktyg för att undersöka prestandan för din webbshop.

Om du är en utvecklare kan du ytterligare optimera ditt tema för prestanda med hjälp av Shopify-verktyg och bästa praxis. Läs mer om Shopify.dev.

Insikter om PageSpeed

Shopifys rapport Instrumentpanel för webbprestanda använder Core Web Vitals för att mäta hur verkliga användare upplever din webbshop. Du kan köra egna rapporter med hjälp av Google PageSpeed Insights för att visa mer detaljerade mätvärden för sidor i din butik.

Shopify Theme Inspector för Chrome

Shopify Theme Inspector för Chrome är ett profileringsverktyg som använder ett flamdiagram för att visa Liquid-renderingsprestanda. Det här verktyget hjälper dig att identifiera kodraderna som saktar ner sidor i din webbutik. Lär dig hur du använder Shopify Theme Inspector.

Få support med webbshopsprestanda

Om du använder ett gratistema från Shopify kan Shopify-support kanske hjälpa dig med grundläggande prestandaförbättringar.

Om du använder ett tema från tredje part och behöver hjälp måste du kontakta din temautvecklare eller anlita en Shopify partner. Läs mer om att anlita en Shopify partner.

Om du har ett utvecklingsteam eller en byråpartner kan du även kontakta dem för ytterligare hjälp.

Är du redo att börja sälja med Shopify?

Prova gratis