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.

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:

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.

Felsökningsverktyg

Nedanför finns verktyg du kan använda för att undersöka hastigheten i din webbutik.

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

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.

Var får jag support?

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