Förbättra din webbutikshastighet

Flera faktorer påverkar din webbutiks hastighet och vissa av dem kan du styra.

Om du inte vet hur snabbt din webbutik fungerar idag kan du se rapporten för din Webbutiks hastighet .

Faktorer som du inte kan kontrollera

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 om butikens hastighet, be din kund att kontrollera att de har den senaste versionen av sin webbläsare, 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 hastighetspoäng.

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

Innehållsleveransnätverk (CDN)

CDN står för innehållsleveransnätverk (content delivery network). Shopify tillhandahåller handlare ett CDN i världsklass som drivs av Fastly och som säkerställer att din webbutik laddar snabbt runt om i världen. Du kan kontrollera statusen för CDN på Fastly:s 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 content_for_header Liquid-taggen

{% content_for_header %} Liquid-taggen matar in tillgångar som används av olika webbutiksfunktioner, inklusive prestationsanalyser och valfria funktioner såsom dynamiska kassaknappar. Om du laddar den här taggen och relaterade tillgångar påverkas butikens hastighet. Shopify optimerar taggen och dess tillgångar för att göra den snabbare.

Faktorer du kan styra

Nedan följer några faktorer som kan påverka hastigheten för din webbutik 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 webbutikens funktioner och hastighet.
  • Om du tar bort en app bör du överväga att ta bort kod som lades till som en del av appens installationsprocess. Vissa appar hjälper dig med den här processen genom att linda in sin kod i {% comment %}-taggar som nämner appnamnet.

Att ta bort oanvänd appkod är en bästa praxis som undviker att kod körs för oanvända funktioner och gör det enklare att läsa din temakod.

  • Rådgör med din apputvecklare.
  • Anlita en Shopify-expert för ytterligare hjälp.

Obs! appar som bara körs i admin, såsom Shopifys app för lokala leveranser, påverkar inte hastigheten i din webbutik.

Teman

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

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 din butikshastighet när de är aktiverade. Till exempel förladdar vissa snabbvisningspopup-fönster information från alla produktsidor när en kollektionssida laddas. Om du laddar extra data som dina kunder inte använder kan det påverka din butikshastighet utan att tillföra värde.

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 totala butikshastighet.

Om du till exempel vill beställa produkterna i en produktserie utifrån pris bör du göra det innan du loopar 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 att beräkna ordningen för produkterna lägger till bearbetningstid till förfrågan.

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

Varning! Shopify Theme Inspector för Chrome är avsett för handlare och partners som är bekväma med att läsa och redigera kod. Om du inte är bekväm med att läsa eller redigera kod kan du anlita en Shopify-expert för att vägleda dig. En Shopify-expert kan också hjälpa dig att förbättra din butiks prestanda med hjälp av det här verktygets resultat.

Bilder och videor

Överdimensionerade bilder och bilder som är dolda från vyn kan störa laddning av andra viktigare delar av en sida. Om användarna måste vänta på att stora bilder ska laddas 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 laddningen 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 webbutiks 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.
  • Anlita en Shopify-expert för ytterligare hjälp.

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 hastigheten i din webbutik.

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.

Lighthouse

Shopifys rapport för Webbutikshastighet använder Lighthouse för att mäta hastigheten i din butik. Du kan köra din egen Lighthouse-rapport med hjälp av Google PageSpeed Insights för att se mer detaljerade mätvärden för sidor i din butik. Om du vill veta mer om vad dessa mätvärden betyder, se dokumentationen för prestandaresultat i Google Lighthouse. Du kan även anlita en Shopify-expert som kan hjälpa dig att förstå mätvärdena och föreslå förbättringar.

Varning! Eftersom testvillkoren skiljer sig i Google PageSpeed Insights kan denna poäng skilja sig från poängen som listas i rapporten för webbutikshastighet. Läs mer om Shopifys testmiljö.

Shopify Theme Inspector för Chrome

Shopify Theme Inspector for 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.

Varning! Detta tillägg är avsett för handlare och partners som är vana vid att läsa och redigera kod. Om du inte är van vid att läsa eller redigera kod kan du anlita en Shopify-expert för att vägleda dig. En Shopify-expert kan också hjälpa dig att förbättra butikens resultat med hjälp av det här verktyget.

Få support med hastighet för webbutik

Om du använder ett gratistema från Shopifykan 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-expert.

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