Optimera webbplatsens hastighet: tips för Shopify-butiker

Internetanvändare är otåligare än någonsin. Runt 70 % av konsumenterna medger att en långsam webbplats påverkar deras vilja att handla från en näthandlare. Det innebär att det är avgörande att hitta rätt balans mellan att erbjuda vackra, innehållsrika digitala upplevelser och att se till att de förblir effektiva. Den här guiden visar hur du gör precis det.

Vad är optimering av webbplatsens hastighet?

Optimering av webbplatsens hastighet är strategin bakom att förbättra sidans laddningshastighet. Det kallas även prestandaoptimering av webbplatsen och målet är att få din e-handelsbutik att laddas så snabbt som möjligt, innan potentiella kunder tröttnar och stänger webbläsarfliken.

Det finns två centrala mått som används för att mäta hastighet:

1. Sidhastighet mäter tiden det tar för innehållet på en URL att laddas.
2. Webbplatshastighet, som visar hur din webbplats presterar överlag. Den bedöms av tjänster som Google PageSpeed Insights, som tittar på olika laddningstider på din webbplats sammantaget.

Google rekommenderar en laddningstid på två sekunder för en e-handelswebbplats. Men generellt gäller: ju snabbare, desto bättre. Den genomsnittliga konverteringsgraden för en e-handelsbutik minskar med 0,3 % för varje extra sekund det tar för din webbplats att laddas. "Människor är otåliga", säger Josh Stutt, marknadschef på the49, en byrå för digital innovation. "Vi kan alla minnas tillfällen då vi försökt besöka en webbplats och vi har helt enkelt stängt fliken för att den inte laddats tillräckligt snabbt."

Om du till exempel driver en butik med ett genomsnittligt ordervärde på 600 kronor och 5 000 besökare varje dag, kan en fördröjning på en sekund i webbplatshastigheten kosta dig 90 000 kronor om dagen.

Varför är webbplatsens hastighet viktig?

Ju snabbare din webbplats är, desto bättre kommer du att vara på att fånga kunder, inklusive de som lämnar en långsammare konkurrents webbplats.

Faktum är att bara en millisekunds förbättring i webbplatshastigheten kan påverka konverteringar positivt. Deloitte fann att en ökning av webbplatshastigheten med 0,1 sekunder ökade konverteringarna inom detaljhandeln med 8,4 %. Dessa konsumenter spenderade nästan 10 % mer under en enda snabbladdad session.

Forskning från Portent bekräftar dessa resultat. Den upptäckte att e-handelswebbplatser som laddas inom en sekund har en 2,5 gånger högre konverteringsgrad än de som laddas inom fem sekunder.

Konverteringsgraden minskar när laddningshastigheten ökar.

Långsamma webbplatser påverkar också din sökbarhet och din SEO-ranking negativt. Google, världens största sökmotor, prioriterar webbplatser med starka core web vitals (dvs. webbplatsens prestanda) i sina sökresultat.

Om du dessutom investerar i betald sökning som en kanal för kundanskaffning, sänker långsamma landningssidor din kvalitetspoäng i Google Ads, vilket innebär en högre kostnad per klick. Det är ett dyrt problem i en tid då kundanskaffnings- och annonseringskostnaderna ökar oproportionerligt inom de flesta branscher.

Vanliga faktorer som påverkar webbplatsens hastigheten

E-handelsplattformen

Ditt företag behöver en e-handelsplattform som har den infrastruktur som krävs för att stödja laddningstider. Som plattformsanvändare bör du prata med din plattformsleverantör om förbättringar av webbplatsens backend, så att dina sidor laddas snabbt för kunderna.

Rendering är processen när man skapar HTML-markup när en användare laddar sidan i sin webbläsare. Din e-handelsinfrastruktur styr renderingsprocessen.

Shopifys Storefront Renderer (SFR) är till exempel en applikation som är dedikerad till att hantera förfrågningar till butiksfronten så snabbt som möjligt, vilket ger prestandavinster på serversidan på 2,5 till 5 gånger hastigheten hos förfrågningar som görs utan SFR.

"Renderingsblockering innebär att saker som JavaScript- eller CSS-filer hindrar en webbsida från att visas snabbt", säger Chris McCarron, ägare av GoGoChimp. "När en webbläsare försöker ladda en webbsida måste den stanna och ladda ner dessa filer innan den kan visa resten av sidan."

De största prestandavinsterna via SFR kommer från cachemissar, alltså de tillfällen då en sida eller annan begärd data inte hittas i cacheminnet och måste hämtas från andra cachenivåer eller huvudminnet, vilket orsakar fördröjningar och avmattningar.

Rhone Apparel började använda SFR i april 2020 och såg dramatiska förbättringar jämfört med föregående månad:

• 15 % ökning av intäkterna
• 17 % ökning av konverteringsgraden
• 12 % minskning av genomsnittlig sidladdning
• 37,95 % minskning av genomsnittlig svarstid från servern
• 3 % minskning av avvisningsfrekvensen

Om din handelsplattform inte satsar på att göra hastighet till en topprioritet, kommer resten av förslagen inte att göra lika stor skillnad. När du nu vet att du har detta med Shopify kan du ta kontroll över e-handelswebbplatsens hastighet genom att arbeta med följande punkter för att ytterligare förbättra din webbplats.

Webbhotell

Din tjänst och infrastruktur för e-handelshosting kan påverka e-handelswebbplatsens prestanda, särskilt under dagar med hög trafik och många transaktioner.

Listan över kända detaljhandlare som drabbas av att e-handelswebbplatser kraschar under viktiga försäljningsperioder som Black Friday, som till exempel Lululemon, J.Crew och Lowe's, fortsätter att växa. Hela 81 procent av respondenterna i en undersökning uppgav att 60 minuters driftstopp kostar deras företag mer än 300 000 dollar (cirka 3 miljoner kronor).

När du undersöker kraven på en webbhotellsplattform, håll utkik efter:

• begränsningar av minne eller bandbredd för skalning under säsongsbetonade kampanjer
• beräknad trafik och maximal användarbelastning för att undvika krascher från en plötslig ökning av besökare

Be din handelsplattformsleverantör att hjälpa dig att förbereda dig för oväntade trafiktoppar eller ett inflöde av beställningar inför alla större försäljningsevent.

Driftstopp är aldrig lätt att hantera, men kan vara särskilt illa för ett företag värt fem miljarder dollar (cirka 50 miljarder kronor) under årets största försäljningssäsong. JB Hi-Fi:s webbplats låg nere i två timmar under Black Friday och Cyber Monday på grund av webbplatsproblem. "Vi har sett välkända detaljhandlares webbplatser gå ner", säger Chris Lang, teknikchef på JB Hi-Fi. "Hela landet får reda på det. Det är dåligt för kunderna och dåligt för varumärket. Vi skulle göra vad som helst för att undvika det."

Efter att ha bytt till Shopify Plus såg JB Hi-Fi rekordförsäljning, tack vare nästan dubbelt så mycket trafik online under BFCM, allt utan prestandaproblem på webbplatsen.

Med sin molnbaserade infrastruktur har Shopify Plus en total drifttid på 99,98 %, med en butiksfront som laddas 2,97 gånger snabbare än andra SaaS-plattformar.

Webbplatsens arkitektur

E-handelswebbplatser använder en mängd olika arkitekturer för att presentera information för både användare och webbläsare. Detta kan bli komplext när du växer, säger Javier Moreno, chef för dataanalys på Shopify: "När varumärken växer och blir mer sofistikerade blir deras webbplatser rikare. Denna rikedom kommer vanligtvis med ett pris; om du inte aktivt uppmärksammar hastigheten kommer förändringar att göra din webbplats långsammare."

I ett försök att förbättra webbplatsens hastighet vänder sig vissa handlare till headless handel, ett koncept som frikopplar frontend på din e-handelswebbplats från backend-plattformen som driver den.

Detaljhandlare som använder Commerce Components by Shopify tar detta till nästa nivå. De använder de e-handelsteknologier de behöver, när de behöver dem, i stället för att överbelasta en webbläsare med för många kodavsnitt som påverkar webbplatshastigheten negativt.

Webbplatsens prestanda försämras när din webbplats växer.

För många tredjepartsappar

Om du har fler än 20 e-handelsplugins installerade i din butik, använder du förmodligen inte alla. Kanske installerade du några på prov och glömde sedan att ta bort dem. Men dessa appar körs fortfarande i bakgrunden och kan aktivt skada webbplatsens prestanda.

Anlita en utvecklare för att ta bort onödiga appar. Kör sedan tester av sidhastigheten med verktyg som GTmetrix eller PageSpeed Insights, eller till och med ett manuellt test med Chromes utvecklarverktyg. Klicka på fliken "Network" och ladda om sidan.

Varje gång du vill installera en ny app ska du fråga dig själv: Kommer mervärdet av den här appen att väga tyngre än den möjliga försämringen av laddningshastigheten?

Majoriteten av script-/CSS-filer för appar som laddas ner via Shopify Plus Admin injiceras i <head> i din theme.liquid-fil inom {{ content_for_header }}.

En app måste renderas innan någon annan kod laddas.

"Att navigera i denna spänning mellan snabbare laddning och apparnas upplevelse- och försäljningsvärde är anledningen till att vi laddar script som lagts till med Script Tag API asynkront, så att sidladdningen inte stoppas", säger Jason Bowman, teamledare inom lösningsteknik på Shopify Plus. "Däremot har <scripts> som läggs direkt i <head> ofta en omedelbar inverkan på prestandan."

Sätt att komma åt information om webbplatsens hastighet

Varje verktyg för hastighetstester använder en egen poängmetod, precis som varje team har en egen definition av bra webbplatshastighet. Verktyg som ger tidsangivelser för "sidladdning" måste välja en specifik tidsmarkör, som "time to first byte" (TTFB), i sina resultat.

Använd dessa hastighetstester för att vägleda ditt beslutsfattande, men håll ett öppet sinne. Du måste balansera din webbplatshastighet med att bygga ett användargränssnitt som optimerar kundens resa.

Google PageSpeed Insights

PageSpeed Insights är ett verktyg från Google Labs som ger dig anpassade förslag för att förbättra webbplatens prestanda. Det pekar också ut de element på din webbplats som gör sidan långsammare, som CSS och JavaScript.

"Jag ser till att varje projekt jag arbetar med konsekvent testas i Google PageSpeed Insights eller ett liknande verktyg", säger Josh Stutt. "Du behöver veta hur du presterar och vilka dina svaga punkter kan vara innan du kan förbättras."

Du kan till och med titta på dina konkurrenters mobila webbplats och deras prestanda. Att veta vad som är fel med deras webbplats kan hjälpa dig att undvika samma misstag.

GTMetrix

GTMetrix ger din webbplats ett betyg på hastighet från A till F. Det kombinerar data från både Yslow och PageSpeed Insights för att ge en prestandarapport som inkluderar:

• Sidans laddningshastighet
• Web Vitals- och Lighthouse-analys
• Möjligheter att optimera webbplatshastigheten
• Uppdelning av sidans sammansättning efter förfrågningar och total byte-storlek

Pingdom

Pingdom.com bedömer din webbplats prestanda (från 0 % till 100 %). Det har också en användbar funktion för "vattenfallsanalys" som hjälper dig att identifiera andra stora problemområden. Denna rad-för-rad-bedömning är ett användbart referensverktyg.

Så optimerar du webbplatsens hastighet

• Använd ett content delivery network
• Överdriv inte tema-anpassningar
• Aktivera snabbvy på kategorisidor
• Ta bort onödiga popup-fönster
• Var återhållsam med hero-bildspel på startsidan
• Komprimera, ändra storlek på och minska bilder
• Använd lite-inbäddningar för video
• Minska omdirigeringar och trasiga länkar
• Aktivera lazy loading
• Frigör webbläsaren från parserblockerande script
• Organisera spårning med Google Tag Manager
• Var vaksam på överdrivna Liquid-loopar

Använd ett content delivery network (CDN)

Ett content delivery network, eller nätverk för innehållsdistribution (CDN), är en grupp servrar som är spridda runt om i världen. Det fördelar belastningen för innehållsleverans genom den server som ligger närmast din besökares plats, vilket gör lokala användarupplevelser snabbare.

Eftersom allt fler e-handelswebbplatser blir globala är ett CDN, eller i Shopifys fall dubbla CDN, en icke förhandlingsbar ingrediens för plattformsprestanda.

Shopify erbjuder ett CDN i världsklass som drivs av Fastly utan extra kostnad. Det finns nu färre, mer kraftfulla Fastly Points of Presence (PoPs) på strategiska platser runt om i världen. PoPs med hög densitet gör att de kan leverera mer från cache, inklusive statiskt och händelsestyrt innehåll. Detta förbättrar din cacheträffkvot, vilket resulterar i bättre användarupplevelser.

Sammantaget ökar CDN-hastigheten samtidigt som kostnaderna minskar. "Att få vår licens, hosting och CDN från Shopify Plus sparade cirka 100 000 dollar per år direkt", säger Diana Harbour, ägare av Red Dress Boutique.

Ta till exempel visuellt innehåll, som ofta är orsaken till långsam webbplatsprestanda. Shopify informerar CDN:et när dina tillgångar (t.ex. bilder, JavaScript och CSS) har ändrats.

Gör det här med Shopify

Shopify-handlare kan använda filtret asset_url och automatiskt lägga till versionsnummer till alla URL:er vi genererar. Ett versionsnummer som läggs till i slutet av en URL kan till exempel se ut så här: ?v=1384022871. Det här filtret talar om för CDN att hämta rätt version. Utan det kanske du inte ser den tillgång du förväntar dig efter att du har gjort ändringar i ditt innehåll.

Om du dessutom hänvisar direkt till innehållet i din CSS blir URL:en statisk. Den kommer inte heller att bära med sig den tillgångsversion som Shopify uppdaterar automatiskt.

För att säkerställa automatiska uppdateringar ska du ändra din CSS-syntax så att den inkluderar filtret asset_url. För information om alla URL-filter som hjälper till att hämta tillgångar, besök Shopifys hjälpcenter.

Överdriv inte tema-anpassningar

En webbplats utseende avgör om en kund kommer att engagera sig i den eller inte. Studier visar att första intrycket till 94 % handlar om design, och dessa beslut sker i rekordfart. En webbplatsbesökares första intryck bildas inom en tiondels sekund.

Med det sagt finns det en avvägning mellan webbplatshastighet och ett vackert tema, där det senare ofta kommer med rörig kod och överdriven grafik. "Du behöver inte ett tema med alla tänkbara finesser", säger Josh Stutt. "Du behöver ett som är rent, snabbt och lätt att navigera i. Jag har sett över 50 % förbättring av avvisningsfrekvensen på startsidan för nya besökare bara genom att byta till ett smidigare tema."

Nirav Sheth, vd och grundare av Anatta, säger: "Snabba hastighetsknep bygger inte grunden för långsiktig prestanda. Det gör bara verkliga hastighetsförbättringar, och det börjar med att optimera din underliggande temaarkitektur."

Aktivera snabbvy på kategorisidor

Popup-fönster för snabbvy visar en produkt direkt från en produktlistningssida, i stället för att du behöver besöka en produktdetaljsida.

I teorin borde snabbvy spara tid för dina kunder, men det kan faktiskt hindra en kunds upplevelse på din e-handelswebbplats:

• Den lägger till ett extra steg i kundresan.
• Den kan klickas på av misstag, vilket är frustrerande för användaren.
• Den kan misstas för en produktsida.
• Viktigast av allt är att den kan göra din sidladdningstid betydligt längre.

Implementeringar av popup-fönster för snabbvy (antingen inbyggda i ett tema eller från en app) kan ibland förladda informationen från en hel produktsida i fall en besökare klickar på knappen "Snabbvy".

Men det är en enorm mängd data att ladda, särskilt på en kollektionssida med 20 eller 30 produktminiatyrer. Klick-kartläggning, ett JavaScript-baserat verktyg som spårar var användare scrollar eller för sin markör för att klicka på dina sidor, kan hjälpa dig att se om dina kunder ens använder snabbvyn.

Några appar som kan hjälpa är:

• Mida Replay
• Hotjar

Hitta snabbvyn i Shopify

Det bör vara lätt att se om det finns en snabbvy-knapp på dina produktminiatyrer i butiksfronten. Kontrollera din temaanpassare för alternativet att aktivera eller inaktivera denna funktion. Om du inte ser detta alternativ i temaanpassaren kan du kontrollera om det kommer från en app. Om så är fallet bör det vara uppenbart hur du tar bort det.

Om de första två stegen inte hjälper är det troligen inbyggt i själva temat. I så fall behöver du en utvecklare för att identifiera och ta bort det. Hitta en Shopify Plus Service Partner som kan hjälpa till med denna process.

Använd AJAX för att hämta produktinformationen när en besökare klickar på knappen för snabbvy-popup. Eller spara en begränsad uppsättning produktinformation som dataattribut på produktrutnätets objekt. Bygg sedan HTML och popup-fönstret dynamiskt med JavaScript.

Båda alternativen är mindre idealiska än att ta bort snabbvy-alternativet. Produktinformationen måste fortfarande laddas för varje produkt. Ändå är det bättre än att ladda ner alla produktbilder och länkar.

Ta bort onödiga popup-fönster

Popup-fönster finns för att visa specialerbjudanden eller locka människor att ta nästa steg i kundresan. Oavsett om det handlar om att lösa in en rabattkod eller ange sin e-postadress, hjälper popup-fönster till att engagera förstagångsbesökare och öppnar dörren för framtida kommunikation.

Men att lägga till popup-fönster för e-handel är en finess. För mycket blinkande grafik kan vara skadligt för webbplatsens hastighet och prestanda, för att inte tala om att det distraherar användare från att engagera sig i det webbplatsinnehåll som du redan har optimerat för konverteringar.

Sätt ramar kring din användning av popup-fönster för att förhindra fördröjningar i webbplatshastigheten. Du kan till exempel skapa utlösare för popup-fönster så att extra kod inte bidrar till en långsam webbplats. Visa dem inte direkt när sidan laddas, utan använd i stället exit intent- eller tidsfördröjda popup-fönster. Båda dessa utlösare ger lite andrum mellan den första sidladdningen och laddningen av popup-fönstret.

Var återhållsam med hero-bildspel på startsidan

Enorma bildspel med flera hero-bilder är utmärkta för att visa upp dina produkter. Tyvärr finns det en nackdel: storleken och kvaliteten som krävs för att ett hero-bildspel ska se bra ut kan öka laddningstiderna, särskilt om du har fyra till fem bilder.

Minska antalet bilder på startsidan eller ta bort dem helt. En enda genomtänkt hero-bild av hög kvalitet, med en tydlig uppmaning till handling, hjälper till att dra in dina kunder snabbt, eftersom hjärnan bearbetar visuella bilder 60 000 gånger snabbare än den bearbetar text.

Om du måste använda ett bildspel, följ bästa praxis för UX, till exempel:

• Håll dig till två till tre bilder
• Visa bilderna som statiska innehållssektioner i stället för automatiskt roterande karuseller
• Använd srcset eller Lazy Load som en universallösning

Chubbies använder till exempel optimerade bilder i stället för ett traditionellt hero-bildspel på startsidan. Medgrundaren Tom Montgomery säger: "Vi har varit med Shopify sedan dag ett. Ingen av oss är ingenjörer, så det är fantastiskt att kunna förlita sig på Shopifys experter så att vi kan fokusera på att förnya."

Komprimera, ändra storlek på och minska bilder

Bilder står för någonstans mellan 50 % och 75 % av webbsidornas totala vikt. Detta kan vara ett större problem när din e-handelswebbplats växer. Ju fler produkter du säljer, desto fler bildfiler har du på din server. Varje bild du använder på en sida skapar en ny HTTP-förfrågan. Samtidigt som du effektiviserar sidhastigheten hjälper det att trimma bilder för att göra mer med mindre.

Alex Mirzaian, marknadschef för Eightvape, säger: "När du ständigt skapar innehåll genom blogginlägg eller skapar många produkter om dagen, tenderar du att bara lägga till bilder på webbplatsen utan att tänka. Att komprimera bilder kan hjälpa mycket när du har tusentals bilder på webbplatsen."

Du kan minimera bildstorleken utan att minska kvaliteten med förlustfri komprimering, tack vare verktyg som TinyJPG eller TinyPNG.

Håll också utkik efter tomma bildkällor, <img src = ' '>, i din kod. Dessa orsakar en onödig belastning på webbläsaren genom att skicka ännu en förfrågan till dina servrar. En enkel lösning är CSS "sprites", som slår samman flera bilder som ikoner till en enda, vilket begränsar antalet enskilda bildförfrågningar till servern. Det förbättrar också din sidhastighet.

Shopifys inbyggda parametrar för bildstorlek låter dig ladda ner minsta möjliga bild samtidigt som kvaliteten behålls. Den ber Shopify om exakt den bildstorlek som ska visas, minskar sedan den filstorlek som laddas ner från CDN:et och minskar den skalning som krävs på webbläsarsidan.

"En av våra kunder hade en långsam webbplats, så vi började med att optimera bilderna", säger Maria Harutyunyan, medgrundare av Loopex Digital. "Vi gjorde dem mindre och komprimerade dem, vilket gjorde en enorm skillnad för hur snabbt sidorna laddas. Faktum är att bilderna nu tar upp 60 % mindre utrymme och laddas mycket snabbare."

Använd lite-inbäddningar för video

Video håller snabbt på att bli internets språk. Runt 91 % av företagen använder video som ett marknadsföringsverktyg. Men beroende på hur de bäddas in på din webbplats kan de orsaka stora skillnader i laddningstid.

Standard inbäddningskoden från YouTube gör inte bara din webbplats uppsvälld, eftersom vissa filer laddas ner redan innan besökaren har klickat på uppspelningsknappen, utan använder också taggen <iframe> där videospelarens bredd och höjd är fasta. Din video anpassar sig inte till skärmstorleken på olika enheter.

Lösningen är lite-inbäddningar, som laddar videorna direkt på din webbsida. När sidan först laddas bäddar webbplatsen bara in miniatyrbilden av YouTube-videon. Själva videospelaren (och dess extra JavaScript) laddas bara när användaren klickar på miniatyren.

YouTube-miniatyrer är ungefär 15 kilobyte, så lite-inbäddningar kan minska storleken på webbsidor med nästan en megabyte.

Minska omdirigeringar och trasiga länkar

För många omdirigeringar och trasiga länkar kan påverka prestandan negativt och skada din SEO-ranking.

Städa upp lite bland dina omdirigeringar. Till exempel kan 302-omdirigeringar, som anger att en sida har flyttats tillfälligt, skada din SEO. Det utlöser också ytterligare HTTP-förfrågningar och fördröjer dataöverföringar.

Använd i stället en "cachebar omdirigering" eller Shopifys inbyggda omdirigeringsfunktion, som är 301:or som standard, i din navigeringspanel. Och kom ihåg: omdirigera aldrig URL:er till sidor som själva är omdirigeringar.

Trasiga länkar till sidelement som bilder, CSS- och JS-filer ökar antalet HTTP-förfrågningar och sänker din webbplatshastighet. Använd ett verktyg som Broken Link Checker för att ta bort dem. Att skapa anpassade 404-felsidor hjälper besökare som av misstag anger en felaktig URL för din webbplats.

Shopify Plus-handlaren Gymshark leder personer som landar på en trasig länk till sina två största kategorier: kläder för dam och herr.

Aktivera lazy loading

Lazy loading är en teknik som förhindrar att allt innehåll laddas omedelbart på en webbsida. E-handelswebbplatser som använder lazy loading visar bara innehåll när användare når vissa utlösare.

Vi kan se lazy loading i praktiken när en användare besöker din produktsida. Endast innehåll som är synligt ovanför vikningen visas omedelbart vid ankomst, såsom produktens titel, bilder och produktbeskrivning. Kompletterande innehåll visas när användaren scrollar nedanför denna sektion. Användargenererat innehåll, karuseller för sociala medier och kundrecensioner laddas alla med lazy loading för att förhindra att koden överväldigar servern med för mycket information direkt vid laddning.

GoGoChimps Chris McCarron använde denna strategi för att optimera webbplatshastigheten för en kunds e-handelsbutik: "Det fanns ett häpnadsväckande antal bilder under vikningen på varje webbsida. Problemet med detta är att en webbläsare samtidigt laddar ner varje bild på en webbsida, oavsett vilka bilder som är synliga. Lazy load laddar dock bara ner en bild när den kan visas i webbläsaren."

Frigör webbläsaren från parserblockerande script

Innan en webbläsare kan visa en sida för din kund måste den gå igenom en process som kallas "parsing av HTML". Men parserblockerande script avbryter denna process: När en webbläsare stöter på ett parserblockerande script måste den stoppa allt och bara fokusera på att köra det scriptet innan den kan fortsätta att göra något annat.

Lyckligtvis finns det en enkel lösning och allt som krävs är attributet "async" eller "defer".

Parserblockerande: <script src="jquery.js"></script> Inte parserblockerande: <script src="jquery.js" defer></script>

Det är värt att notera att JavaScript i sig inte blockerar webbläsare, det är hur JavaScript laddas som avgör om det blockerar webbläsaren eller inte. Efter att du har gjort dessa ändringar i din kod, kontrollera att din webbplats fortfarande erbjuder samma önskade upplevelse.

Organisera spårning med Google Tag Manager

Kunddata driver dina strategier för e-handel och digital marknadsföring. Men att samla in den datan kan också göra webbplatsens prestanda långsammare. Alla dessa JavaScript-spårningstaggar (t.ex. för allmän analys, konverteringar, mål och beteendebaserad retargeting) är ofta boven i dramat.

Insamling av kunddata kan också vara en belastning i tid och resurser för dina utvecklar-, IT- eller marknadsföringsteam. Ett tagghanteringssystem (TMS) som Google Tag Manager förenar alla dina taggar till en enda JavaScript-förfrågan. Om ett taggfel gör att din webbplats går ner, hjälper ett TMS dig också att ta bort taggen snabbt.

Nirav Sheth tillägger att när Anatta optimerade webbplatshastigheten för en e-handelswebbplats inom skönhetsbranschen, "Det som flyttade nålen för webbplatshastigheten mer än något annat är kombinationen av att utnyttja Shopifys API:er och att städa upp i Google Tag Manager."

Ett enda kodavsnitt är allt du behöver för att hantera taggarna i din Shopify Plus-butik på ett ställe med Google Tag Manager. För att lära dig mer, se riktlinjerna i Shopify Plus-hjälpcenter.

Var vaksam på överdrivna Liquid-loopar

Liquid är ett kraftfullt kodspråk från Shopify. Det finns dock vissa fall när du behöver väga fördelarna mot nackdelarna.

Iterationen med Forloop är ett av dessa tillfällen. Forloop innebär att systemet måste loopa (t.ex. genomsöka eller söka igenom) alla produkter i en kollektion, och det sker när det letar efter ett specifikt villkor (t.ex. pris eller en tagg).

Dessa funktioner kan vara till nytta i vissa fall, som när du vill skapa bilder eller produktvarianter. De är också hjälpsamma när du har ett mindre antal produkter på en kollektionssida, men var vaksam på dess inverkan på laddningstiderna.

Granska din temakod för att säkerställa att du inte kör Liquid-forloopar flera gånger på jakt efter samma information. Detta kan hända när flera utvecklare arbetar med ett tema och kan duplicera uppgifter eller introducera motstridig kod. Att ta bort dessa dubbletter gör att din sida laddas snabbare.

Det är ofta enklare att använda en enkel product.options_with_values-loop. Granska dokumentationen för att förstå hur Shopifys mallspråk och Liquid-loopar fungerar.

Så genomför du ett hastighetstest av webbplatsen

Core web vitals är en grupp mått som hjälper till att utvärdera webbplatsens hastighet. På webbplatser som uppfyller dessa tröskelvärden för core web vitals var det 24 % mindre sannolikt att användare lämnade webbplatsen mitt under en sidladdning.

• Fullständigt laddad sida: Detta är det mest traditionella måttet på hur lång tid det tar för din sida att laddas helt.
• Time to first byte: Hastigheten det tar för en sida att påbörja laddningsprocessen.
• First meaningful paint: Hastigheten med vilken webbplatsbesökare kan ladda tillräckligt mycket av en sida för att förstå den.

Google PageSpeed Insights bedömer var och en av dessa core web vitals med en status: Bra, Behöver förbättras och Dålig. Under varje poäng ser du också rekommendationer för webbhastighet som är anpassade för din webbplats.

Google PageSpeed Insights rapport om core web vitals.

Optimera hastigheten för mobilen

Mobilshoppingsstrenden kommer bara att fortsätta växa. Mobilförsäljning beräknades stå för 10,4 % av all e-handelsförsäljning år 2025.

Trots höga inköpsfrekvenser på mobilen är inte alla mobilkunder glada över att spendera pengar på långsamma webbplatser. Det är så pass att bara en millisekunds förbättring i mobil laddningshastighet kan förbättra konverteringsgraden med 8,4 %.

Efter att ha upptäckt att majoriteten av dess mobilbesökare inte konverterade, beslutade varumärket för företagskläder och presenter, Merchology, att göra om sin mobila webbplats för en kundupplevelse med mobilen i fokus. Två månader efter lanseringen av den mobila webbplatsen uppnådde Merchology en ökning på 40 % i mobil konverteringsgrad.

Så här kan du säkerställa att din närvaro på mobiler och webbplatsens prestanda och hastighet överlag matchar eller överträffar dina konkurrenters.

Bygg Accelerated Mobile Pages

Accelerated Mobile Pages (AMP) är ett Google-sponsrat projekt som formaterar om webbplatsinnehåll för mobila enheter. På webbplatser med AMP aktiverat cachelagrar Google varje sida och laddar om den varje gång en användare besöker den från en sökning. Detta minskar sidladdningstiderna, vilket resulterar i en fördubbling av tiden på sidan och en ökning med 20 % av konverteringar jämfört med sidor utan AMP.

Implementera AMP i din e-handelsbutik med Shopify-appar som AMP, Fire AMP eller The AMP App. Var och en eliminerar komplex kod som skräpar ner din mobila webbplats så att sidor laddas snabbt.

Inaktivera automatisk uppspelning av video på mobilen

Alla mobila internetanvändare surfar inte på din e-handelswebbplats med en stark nätverksanslutning. Kanske är de en Allbirds-kund som skummar butikens webbplats mitt under en vandring när skorna de har på sig går sönder. Eller så är de en Firebelly Tea-kund som beställer sin nästa låda med tepåsar medan de väntar på parkeringen på att deras barn ska sluta skolan.

Hur som helst kanske dessa personer engagerar sig i de videor som detaljhandlare använder för att kommunicera med potentiella kunder på sin mobila webbplats. Men att spela upp dessa videor automatiskt kan orsaka allvarliga fördröjningar i webbplatshastigheten.

Den mobila nätverksanslutningen måste ladda ner en stor fil när en video är inställd på automatisk uppspelning. När det ersätts med en statisk miniatyrbild och en valfri knapp för att starta videon, behöver inte filen i full storlek laddas genom en svag internetanslutning. Besökare får sin första meningsfulla vy på rekordtid.

Optimera kassan på mobilen

Kassaprocessen glöms ofta bort när man förbättrar webbplatshastigheten på mobilen. Start-, produkt- och kategorisidor får mest uppmärksamhet, till stor del för att du inte vill att potentiella kunder ska falla vid det första hindret: deras allra första interaktion med din butik på mobilen.

Att inte inkludera kassaprocessen i din strategi för optimeringen av webbplatshastighet kommer sannolikt att resultera i en högre frekvens av övergivna varukorgar. Människor är tillräckligt säkra på sig själva för att handplocka de varor de vill köpa. Men om de möts av fördröjningar i kassan måste de verkligen älska produkten i sin varukorg för att stanna kvar. (Vilket betyder att du kommer att förlora impulsköparna.)

Shop Pay gör att mobilkunder kan ta sig igenom kassan i rekordfart. Enligt Shopify har handlare som använder Shop Pay-kassor en 1,91 gånger högre andel mobila transaktioner i kassan som blir till en order än de som går genom en vanlig kassa.

"Majoriteten av våra kunder idag upptäcker nya produkter i farten på sina mobila enheter, och om de måste fylla i ett formulär har vi förlorat dem", säger Benjamin Sehl, medgrundare av Kotn. "Att aktivera Shop Pay i vår kassa har verkligen gjort den mest smärtsamma punkten i kundupplevelsen till en fröjd. Eftersom den är kopplad till ett ekosystem med miljontals handlare kan även nya kunder gå igenom kassan med ett enda klick."

Kotn använder Shop Pay för att erbjuda snabba upplevelser i kassan på mobilen.

Optimera webbplatsens hastighet och se effekten på konverteringen

Det är viktigt att få stöd från ditt team till att investera tid och resurser i att optimera webbplatsens prestanda och hastighet. Datan och verktygen vi har delat kan hjälpa dig att bygga upp ett underlag.

Många av dessa optimeringar kan du göra själv. När det inte är möjligt kan du ta hjälp av en Shopify Plus-partner. De kan vägleda dig i hur du snabbar upp din Shopify-webbplats.