Sådan forbedrer du hastigheden i din webshop
Der er adskillige faktorer, som påvirker hastigheden i din webshop. Du kan kontrollere nogle af dem.
Hvis du ikke ved, hvor hurtigt din webshop kører i dag, kan du se det i rapporten Hastighedsanalyse af webshop.
Faktorer, du ikke kan kontrollere
Din kundes enhed, netværk og lokation
Kunder, der besøger din webshop, bor i hele verden og har forskellige enheder og internetforbindelser. Dette betyder, at din butik muligvis indlæses hurtigere eller langsommere alt afhængigt af disse faktorer.
Hvis en kunde kontakter dig angående hastigheden i din butik, skal du bede kunden om at kontrollere, at han eller hun bruger den nyeste version af den benyttede browser, at han eller hun har ryddet cachelageret for nyligt, og at hans eller hendes internetudbyder ikke oplever udfald eller forringet ydeevne.
Shopifys infrastruktur
Shopify hoster din webshop på hurtige, globale servere og begrænser ikke din butiks båndbredde. Du kan kontrollere statussen for din Shopify-butik på Shopify-status.
Shopify foretager løbende forbedringer af sin kode og infrastruktur. Nogle af disse forbedringer kan blive afspejlet i din hastighedsscore.
Herunder er nogle funktioner, der kan påvirke hastigheden i din webshop.
Netværk, der leverer indhold (CDN)
CDN står for "content delivery network" (netværk, der leverer indhold). Shopify leverer et CDN i verdensklasse til shopejere via Fastly. Dette sikrer, at din webshop indlæses hurtigt over hele verden. Du kan kontrollere CDN-statussen på Fastly-statussiden.
Cachelagring i lokal browser
Din butik lagrer midlertidigt nogle elementer i dine kunders lokale lagerplads. Næste gang kunderne besøger din webshop, kan browseren indlæse ressourcerne fra cachen i stedet for at sende en ny anmodning til serveren.
Shopify angiver cachelagring i browseren for ressourcer i din butik, der kan lagres i cachen. Dette sker for ét år for hver fil. Filer, der kan lagres i cachen, omfatter billedfiler, PDF-filer, JS-filer og CSS-filer.
Cachelagring af side på serverside
Shopify lagrer sider i cachen på serversiden udover cachelagring i lokale browsere. Første gang siden indlæses, kan det tage længere tid, men indlæsninger af siden på et senere tidspunkt er hurtigere, fordi kunderne modtager en cachelagret kopi.
Aktiverne i Liquid-objektet “content_for_header”
Liquid-objektet “``” indsætter aktiver, der benyttes af en række funktioner i webshoppen, herunder analyser af ydeevnen og valgfrie funktioner såsom dynamiske betalingsknapper. Hvis du indlæser dette objekt og dets relaterede aktiver, vil det påvirke hastigheden i din butik. Shopify optimerer tagget og dets aktiver for at gøre det hurtigere.
Faktorer, du kan kontrollere
Herunder er nogle af de faktorer, der kan påvirke hastigheden i din webshop samt, hvordan du kan løse dem.
Apps
Når du tilføjer apps for at ændre funktionaliteten eller udseendet af din webshop, føjer de kode til dit tema for at kunne køre. Nogle koder kan fjernes eller flyttes rundt for at forbedre din webshops ydeevne. Du kan fjerne koden, hvis du ikke bruger en app.
Hvis du mener, at en app gør din butik langsommere, kan du gøre følgende:
- Deaktiver de appfunktioner, du ikke bruger, eller fjern appen, hvis du ikke har brug for den. Tænk på balancen mellem funktionalitet og hastighed i din webshop.
- Hvis du fjerner en app, bør du overveje at fjerne koden, der blev tilføjet som en del af appens installationsproces. Nogle apps hjælper dig med denne proces ved at ombryde deres kode i
{% comment %}-tags, der nævner appens navn.
Hvis du fjerner ubrugt appkode, er det den bedste fremgangsmåde til at undgå at køre koder for ubrugte funktioner. Dette gør din temakode lettere at læse.
- Kontakt din appudvikler.
- Ansæt en Shopify Expert, hvis det er aktuelt. Få mere at vide om at ansætte Shopify-eksperter.
Temaer
Temaer består af Liquid-, HTML-, CSS- og JavaScript-kode. Når du redigerer eller tilpasser temaer, kan filerne blive større og derved påvirke hastigheden i din butik.
Hvis du mener, at noget i dit tema gør din butik langsommere, kan du gøre følgende:
- Deaktiver de temafunktioner, du ikke bruger. Tænk på balancen mellem funktionalitet og hastighed i din webshop.
- Overvej at bruge en systemskrifttype.
- Rådfør dig med temaudvikleren. Hvis du bruger et gratis tema fra Shopify, kan du kontakte support for at få vejledning.
- Hvis du bruger et tema fra tredjepart, kan du kontakte temaudvikleren eller ansætte en Shopify Expert.
- Overvej at installere et tema, der er optimeret til ydeevne, såsom Dawn.
- Ansæt en Shopify Expert, hvis det er aktuelt. Få mere at vide om at ansætte Shopify-eksperter.
Tema- eller appfunktioner
Når visse funktioner er aktiveret, kan det påvirke hastigheden i din butik. Nogle pop op-vinduer til hurtige visninger forudindlæser f.eks. oplysninger fra alle produktsider, når en kollektionsside indlæses. Hvis du indlæser ekstra data, som dine kunder ikke bruger, kan det påvirke hastigheden i din butik uden at tilføre værdi.
Hvis du mener, at en funktion gør din butik langsommere, kan du gøre følgende:
- Brug et heatmap-værktøj til at se, om dine kunder bruger bestemte funktioner. Deaktiver funktionerne, hvis de ikke bruges.
- Deaktiver funktionen, hvis du ikke har brug for den. Tænk på balancen mellem funktionalitet og hastighed i din webshop.
- Rådfør dig med udviklerne af dit tema og dine apps, og spørg dem, om de forudindlæser data.
- Ansæt en Shopify Expert, hvis det er aktuelt. Få mere at vide om at ansætte Shopify-eksperter.
Kompleks eller ineffektiv Liquid-kode
Du kan redigere næste alt i Liquid, der bruges til at gengive din butik. Der findes både effektive og ineffektive måder at skrive Liquid-kode på. Hvis du gentagne gange udfører komplekse handlinger, kan det øge gengivelsestiden for Liquid – dette påvirker hastigheden i din butik.
Hvis du f.eks. ønsker at sætte produkterne i en kollektion i rækkefølge efter pris, bør du gøre dette, før du anvender loops til produkterne i din kollektion – og ikke som en del af loop-koden. Dette skyldes, at produkternes rækkefølge ikke ændres for hvert produkt, og beregningen af produkternes rækkefølge føjer behandlingstid til anmodningen.
Du kan foretage følgende handlinger, hvis du er bekymret for, at din kode ikke er optimeret:
- Kør Shopify Theme Inspector til Chrome for at identificere, hvilke kodelinjer, der gør siderne i din webshop langsommere.
- Ansæt en Shopify Expert til at finde ineffektiv eller ubrugelig kode.
Billeder og videoer
Overdimensionerede billede og billeder, der er skjult for visninger, kan påvirke indlæsningen af andre, og vigtigere dele af en side. Hvis brugere skal vente længe på, at store billeder indlæses, kan de opfatte din butik som langsom.
Shopify tilføjer nogle sikkerhedsforanstaltninger, som forhindrer dig i at overbelaste din webshop med billeder og videoer. For eksempel:
- Du må ikke have mere end 50 produkter på en kollektionsside eller 25 afsnit på din startside.
- Mange temaer udskyder indlæsningen af billeder, der ikke vises på skærmen.
- Mange temaer indlæser også en specifik størrelse billeder afhængigt af den skærmstørrelse, som billedet vises på.
Disse sikkerhedsforanstaltninger forhindrer dog ikke, at billeder og videoer kan påvirke din webshops ydeevne.
Hvis du mener, at billeder gør din butik langsommere, kan du gøre følgende:
- Læs vejledningen til billedoptimering.
- Brug kun 2-3 dias til diasshow med udvalgte billeder eller ét udvalgt billede.
- Rådfør dig med udvikleren af dit tema for at få at vide, hvordan du bedst bruger billeder sammen med deres tema.
- Ansæt en Shopify Expert, hvis det er aktuelt. Få mere at vide om at ansætte Shopify-eksperter.
Skrifttyper
Du kan vælge mellem flere forskellige skrifttyper til teksten i din webshop. Bemærk: Hvis du bruger en skrifttype, der ikke findes på din kundes computer, skal skrifttypen downloades, før teksten kan vises. Dette påvirker indlæsningstiden for din butik.
Hvis du vil undgå at skulle downloade en ny skrifttype på dine kunders computere, kan du bruge en systemskrifttype. En systemskrifttype er en skrifttype, der allerede er installeret på de fleste computere.
Du kan vælge en mono-, serif- eller sans serif-skrifttypefamilie. Du kan stadig bruge typografier, såsom fed eller klursiv, når du bruger en af disse skrittypefamilier.
Den skrifttype, der vises på din kundes computer, afhænger af kundens operativsystem. Herunder er nogle eksempler på de skrifttyper, der kan bruges til at gengive tekst, når du vælger en systemskrifttypefamilie:
- 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
Værktøjer til fejlfinding
Du kan bruge følgende værktøjer til at undersøge hastigheden i din webshop.
Tip: Hvis du er udvikler, kan du optimere dit tema yderligere i forhold til ydeevnen ved hjælp af Shopifys værktøjer og bedste fremgangsmåder. Få mere at vide på Shopify.dev.
Lighthouse
Shopify-rapporten Hastighedsanalyse af webshop måler hastigheden i din butik ved hjælp af Lighthouse. Du kan køre din egen Lighthouse-rapport ved hjælp af Google PageSpeed Insights for at få mere detaljerede parametre for siderne i din butik. Få mere at vide om, hvad disse parametre betyder, i dokumentationen for Google Lighthouses performancetal. Du kan også ansætte en Shopify Expert til at forstå parametrene og få anbefalinger til forbedringer. Få mere at vide om at ansætte Shopify-eksperter.
Shopify Theme Inspector til Chrome
Shopify Theme Inspector til Chrome er et profileringsværktøj, der viser ydeevnen for Liquid-gengivelser via en graf med flammer. Dette værktøj giver dig mulighed for at identificere, hvilke kodelinjer der gør siderne i din webshop langsommere. Få mere at vide om, hvordan du bruger Shopify Theme Inspector.
Få support til hastigheden i din webshop
Hvis du bruger et gratis tema fra Shopify, vil Shopify Support muligvis kunne hjælpe dig med grundlæggende forbedringer af din ydeevne.
Hvis du bruger et tema fra tredjepart og har brug for hjælp, kan du kontakte udvikleren af dit tema eller ansætte en Shopify Expert. Få mere at vide om at ansætte Shopify-eksperter.
Hvis du har et udviklingsteam eller et partnerbureau, kan du også kontakte dem for at få hjælp.