Förbättra din webbshops prestanda

Din webbshop består av en uppsättning funktioner, till exempel temakod, appar, bilder, videor, karuseller, flöden från sociala medier och analyser. Dessa funktioner kan förbättra besökarupplevelsen och utöka din webbplats kapacitet.

Varje funktion du lägger till i din webbshop kan dock påverka butikens prestanda. Vissa funktioner kan göra din webbplats långsammare eller skapa oväntade beteenden som kan påverka användarupplevelsen.

Webbprestanda fokuserar på att optimera användarupplevelsen. För närvarande fokuserar webbprestanda på tre huvudområden som även återspeglas i Core Web Vitals:

• Inläsningshastighet, mätt med Largest Contentful Paint (LCP)
• Layoutstabilitet, mätt med Cumulative Layout Shift (CLS)
• Svarskänslighet för användarinteraktion, mätt med Interaction to Next Paint (INP)

Optimering av webbprestanda innebär att dina kunder är mer benägna att stanna kvar på din webbplats och konvertera.

Optimeringar för din webbshop

Din webbshop har inbyggd webboptimering. Webboptimering är även inbyggt i alla nya funktioner. Du behöver inte göra något särskilt för att dra nytta av följande funktioner:

• Din webbshop driftas på snabba, globala servrar och begränsar inte din butiks bandbredd. Du kan kontrollera statusen för din Shopify-butik på Shopify Status.
• Din webbshop har ett Content Delivery Network (CDN) som drivs av Cloudflare som ser till att din webbshop läses in snabbt över hela världen. Du kan kontrollera CDN-statusen på Cloudflares statussida.
• För att hålla inläsningstiderna korta optimeras bilder automatiskt med hjälp av bild-CDN. I kombination med din temakod kan bild-CDN:et leverera det bästa bildformatet som också är storleksändrat och komprimerat för att hålla filstorlekarna små.

Faktorer som påverkar webbprestanda

För Shopify-butiker är följande de största faktorerna som påverkar webbprestanda:

• Din webbshops tema
• De appar du har installerat
• Eventuell ytterligare tredjepartskod som du har lagt till manuellt i din butik, inklusive tagghanterare och taggarna i dem

Det innebär att du bör fokusera på följande för att förbättra din webbprestanda:

• Använd ett uppdaterat, optimerat tema. Alla teman i Horizon-familjen och Online Store 2.0-teman från Shopify är gratis och optimerade för webbprestanda. Dessutom är många andra tredjepartsteman också optimerade för webbprestanda. Du kan granska de senaste data om temaprestanda.
• Om ditt tema erbjuder sidövergångar eller andra animationer, jämför då din webbprestanda före och efter att du aktiverat dem. Animationer kan göra sidor långsammare.
• Undvik att lägga till för många avsnitt i sidmallarna i ditt tema. Ett stort antal avsnitt på sidor kan sänka webbprestandan.
• Om du har produktserier med stora mängder produkter i dem, överväg då att aktivera paginering för att begränsa antalet produkter som läses in samtidigt.
• Utvärdera dina installerade appar och din tredjepartskod för att säkerställa att de skapar tillräckligt med värde för att kompensera för eventuella prestandaförluster.
• Granska din tagghanterare för att ta bort oanvända taggar eller taggar med lågt värde. Läs mer om bästa praxis för taggar och tagghanterare.

Testverktyg

Du kan använda följande verktyg för att undersöka din webbshops prestanda:

• Webbprestandarapporter: Shopifys webbprestandarapporter använder Core Web Vitals för att mäta hur verkliga användare upplever din webbshop.
• PageSpeed Insights: Du kan köra dina egna rapporter med hjälp av Googles PageSpeed Insights för att se mer detaljerade mätvärden för sidor i din butik.

Förstå prestandarekommendationer från tredjepart

Prestandaskanningsverktyg från tredjepart kan föreslå ändringar för att förbättra din butiks hastighet. Många av dessa rekommendationer är dock redan implementerade av Shopify eller gäller inte för Shopify-butiker.

Optimeringar som redan ingår i Shopify

Din Shopify-butik inkluderar automatiskt följande prestandaoptimeringar:

Content Delivery Network (CDN): Shopify tillhandahåller ett CDN i världsklass utan extra kostnad, vilket säkerställer snabb global prestanda. Alla resurser levereras med HTTP/2, vilket minskar omkostnaderna jämfört med äldre protokoll.

Webbläsarcachelagring: Shopify ställer in webbläsarcachelagring för cachelagringsbara resurser till ett år, vilket är den maximala möjliga varaktigheten. Detta innebär att återkommande besökare i din butik kommer att uppleva snabbare inläsningstider.

Gzip-komprimering: Shopify använder gzip-komprimering på CSS, JavaScript, dokument och sidor för att minska bandbredden och förbättra inläsningstiderna. Keep-alive är också aktiverat för hämtning av flera filer.

Bildoptimering: Shopify komprimerar automatiskt jpg-bilder med avancerade algoritmer och balanserar komprimering och visuellt utseende. Bilder levereras ofta i WebP-format för bättre komprimering och snabbare inläsning.

Filminimering: Shopify minimerar automatiskt CSS- och JavaScript-filer när de begärs av ditt digitala skyltfönster, vilket minskar filstorlekarna utan att påverka funktionaliteten.

När tredjepartsrekommendationer inte är tillämpliga

Skanningsverktyg från tredjepart kan föreslå ändringar som inte är relevanta för Shopify-butiker:

• Konfigurationer på servernivå: Rekommendationer om serverkonfiguration, HTTP-sidhuvuden eller cachelagringspolicyer är redan optimerade av Shopifys infrastruktur.
• CDN-implementering: Förslag om att lägga till ett CDN är onödiga eftersom Shopify som standard inkluderar ett högpresterande CDN.
• Komprimeringsinställningar: Rekommendationer om att aktivera komprimering är redan implementerade på hela Shopifys plattform.

Agera på relevanta rekommendationer

Fokusera på rekommendationer som är relevanta för din butiks specifika innehåll och funktioner:

• Bildoptimering: Se till att dina uppladdade bilder har rätt storlek och använder rekommenderade format.
• Apputvärdering: Fundera på om installerade appar tillför tillräckligt med värde för att kompensera för eventuell prestandapåverkan.
• Temaoptimering: Välj teman som är optimerade för prestanda och begränsa antalet avsnitt i sidmallar.

Felsökning av långsamma sidor

Om din butik läses in långsamt följer du dessa steg för att identifiera och lösa problemet:

Steg 1: Verifiera problemet

1. Testa din butiks inläsningshastighet själv från olika enheter och internetanslutningar.
2. Be andra att testa din butik för att bekräfta att det inte är ett lokalt problem med din internetanslutning.
3. Använd testverktyg som PageSpeed Insights för att få specifika prestandamått.

Steg 2: Identifiera orsaken

Kontrollera om du har för många appar: Prestandan kan försämras om för många appar läser in resurser i ditt digitala skyltfönster. Granska dina installerade appar och ta bort de som inte är nödvändiga för försäljningen.

Granska stora bilder: Sidor med många högkvalitativa bilder kan läsas in långsamt. Optimera dina bilder eller minska antalet som visas. Mer information om rekommenderade bildstorlekar.

Identifiera långsamma skript: Om din webbplats hänger sig och visar en tom sida innan allt läses in på en gång, använd webbläsarens utvecklarverktyg för att identifiera skript som läses in långsamt. Kontakta app- eller temautvecklaren för att få hjälp med att lösa problemet.

Steg 3: Vidta åtgärder

Ta bort onödiga appar: När du avinstallerar en app tas inte dess kod bort automatiskt från ditt tema. Du kan behöva kontakta apputvecklaren för fullständiga borttagningsinstruktioner.

Optimera bilder: Använd lämpliga filformat (jpg för foton, PNG för grafik med transparens) och ändra storlek på bilder så att de matchar sin visningsstorlek.

Utvärdera temaprestanda: Överväg att byta till ett prestandaoptimerat tema om ditt nuvarande tema orsakar betydande prestandaförsämringar.

Få support för webbshopens prestanda

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

Om du använder ett tredjepartstema och behöver hjälp måste du kontakta din temautvecklare, anlita en Shopify-expert på webbprestanda eller anlita en Shopify-partner för webbplatsprestanda och -hastighet. Mer information om att anlita en Shopify-partner.

Om ditt prestandaproblem orsakas av en app kan du kontakta din apputvecklare.

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

Teknisk information och resurser för felsökning

Om du är en utvecklare som vill förbättra prestandan för ett digitalt skyltfönster, tema eller en app i Shopify kan du granska följande resurser för varje Core Web Vital. Mer information om bästa praxis för prestanda för Shopify-teman.

Inläsningshastighet

Largest Contentful Paint (LCP) mäter inläsningshastigheten baserat på hur snabbt det största elementet på skärmen blir synligt. Time to first byte (TTFB) och first contentful paint (FCP) är stödjande mätvärden som hjälper dig att bättre förstå var grundorsaken till problemet finns. Du kan läsa mer om att felsöka vanliga orsaker till långsam inläsning i digitala skyltfönster med Shopify Liquid.

Visuell stabilitet

Cumulative Layout Shift (CLS) mäter visuell stabilitet baserat på hur mycket innehållet oväntat flyttar på sig under inläsningen. För en djupdykning i felsökning av CLS, läs How to optimize Cumulative Layout Shift (CLS) on Shopify sites.

Interaktivitet

Interaction to Next Paint (INP) mäter interaktivitet baserat på hur lång tid det tar för sidan att bli responsiv för de flesta användaråtgärder. Till exempel användaråtgärder som att klicka på en länk eller en knapp.

Om du har dålig INP har du troligtvis för mycket JavaScript i din butik, antingen från temakod, appkod eller tredjeparts-/tagghanterarkod. Arbeta med att rensa bort de värsta syndarna. Läs mer i 3 ways to find your worst JavaScript offenders for page load. Om du fortfarande har problem med INP kan du läsa mer med hjälp av resurserna på web.dev.