Forbedre ytelsene til nettbutikken

Flere faktorer påvirker nettbutikkens ytelse, og du har kontroll over noen av dem.

Se Nettytelser-rapporten for å finne ut hvordan nettbutikken gjør det i dag.

Faktorer du ikke kan kontrollere

Disse faktorene kan påvirke ytelsene til butikken din, men kan ikke kontrolleres av noen innstillinger eller justeringer du kan gjøre i Shopify-butikken. Dette inkluderer faktorer fra kundene dine, som enheten eller internetthastigheten, samt faktorer fra Shopify, som oppdateringer i Shopifys infrastruktur.

Kundens enhet, nettverk og plassering

Kunder som besøker nettbutikken din befinner seg over hele verden, og har ulike enheter og internettilkoblinger. Det betyr at butikken din kan laste raskere eller tregere hos dem, avhengig av disse faktorene.

Hvis en kunde kontakter deg om hastigheten i butikken din, kan du be kunden sjekke at de har siste versjon av nettleseren, at de nylig har tømt bufferen og at internett-leverandøren ikke opplever feil eller dårlig yteevne.

Shopify-infrastruktur

Shopify driver nettbutikken din på raske, globale servere, og begrenser ikke båndbredden i butikken. Du kan sjekke status for Shopify-butikken din på Shopify Status.

Shopify gjør kontinuerlige forbedringer i kode og infrastruktur. Noen av disse forbedringene gjenspeiles kanskje i måledataene for ytelse.

Her er noen funksjoner som påvirker nettbutikkens hastighet.

Content Delivery Network (CDN)

CDN står for content delivery network, eller innholdsleveransenettverk. CDN lagrer bildene dine og andre filer, for eksempel innholdet på siden Innhold > Filer i Shopify-administrator. CDN er der Shopify tilbyr forhandlere en CDN i verdensklasse drevet av Cloudflare som sikrer at nettbutikken laster raskt over hele verden. Du kan kontrollere CDN-statusen på Cloudflares statusside.

Lokalt nettleserbuffer

Butikken din bufrer, eller lagrer, midlertidig noen elementer i kundens lokale lagring. Neste gang kunden besøker nettbutikken din, kan nettleseren laste inn ressurser fra bufferet i stedet for å sende en ny forespørsel til serveren.

Shopify setter nettleserbufring for ressurser som kan bufres til ett år for hver fil. Filer som kan bufres inkluderer bildefiler, PDF-er, JS-filer og CSS-filer.

Hurtigbuffer på serversiden

I tillegg til lokal nettleserbufring, bufrer Shopify sider på serversiden. Første gang en side lastes kan den være tregere, men senere sideinnlastinger er raskere fordi kundene mottar en bufret kopi.

Ressursene i Liquid-objektet content_for_header

Liquid-objektet `` setter inn materiell som brukes av en rekke funksjoner i nettbutikken, inkludert ytelsesanalyse og valgfrie funksjoner som dynamiske knapper for å gå til kassen. Innlasting av dette objektet og tilknyttet materiell påvirker hastigheten i butikken. Shopify optimaliserer taggen og materiellet for å gjøre dem raskere.

Faktorer du kan kontrollere

Nedenfor er noen av faktorene som kan påvirke nettbutikkens ytelse, og hvordan du kan gjøre noe med dem.

Apper

Når du legger til apper for å endre funksjonaliteten eller utseendet til nettbutikken, legger de til kode i temaet slik at de kan kjøre. Noe av koden kan fjernes eller omorganiseres for å forbedre ytelsene i nettbutikken. Hvis du ikke bruker en app, kan du fjerne den.

Hvis du tror at en app gjør butikken din tregere, bør du gjøre følgende:

  • Deaktiver appfunksjoner du ikke bruker, eller fjern appen hvis du ikke trenger den. Se på balansen mellom nettbutikkens funksjoner og hastighet.
  • Hvis du fjerner en app, bør du vurdere å fjerne kode som ble lagt til som en del av appens installasjonsprosess. De fleste apper vil fjerne koden automatisk for deg, men du kan sjekke med appens utvikler for å være sikker. Noen apper hjelper deg med denne prosessen ved å pakke inn koden med {% comment %}-tagger som oppgir appnavnet. Fjerning av ubrukt appkode er en beste praksis som unngår at kode kjøres for ubrukte funksjoner, og gjør temakoden lettere å lese.
  • Kontakt app-utvikleren din.

Temaer

Temaer består av Liquid-, HTML-, CSS- og JavaScript-kode. Når du redigerer eller tilpasser temaer, kan filstørrelsen øke, noe som kan påvirke nettytelsene.

Hvis du tror at noe i temaet ditt gjør nettbutikken tregere, bør du gjøre følgende:

Tema- eller appfunksjoner

Når bestemte funksjoner aktiveres, kan det også påvirke butikkens ytelse. Noen pop-up-funksjoner for hurtigvisning forhåndslaster for eksempel informasjon fra hver produktside når en samlingsside laster. Innlasting av ekstra data som kundene ikke bruker kan påvirke innlastingshastigheten i nettbutikken uten at det tilfører verdi.

Hvis du tror en funksjon gjør butikken din tregere, kan du gjøre følgende:

Kompleks eller ineffektiv Liquid-kode

Du kan redigere nesten all Liquid-kode som brukes til å gjengi butikken. Det finnes effektive og ineffektive måter å skrive Liquid-kode på. Komplekse operasjoner som gjentas kan øke gjengivelsestiden for Liquid-koden, noe som vil påvirke den totale nettytelsen.

Hvis du for eksempel vil sortere produktene i en samling etter pris, bør du gjøre det før du kjører en løkke gjennom produktene i samlingen, og ikke som en del av løkkekoden. Dette er fordi rekkefølgen på produktene ikke endrer seg for hvert enkelt produkt, og beregning av rekkefølgen øker behandlingstiden for forespørselen.

Hvis du er bekymret for at koden din ikke er optimalisert, kan du gjøre følgende:

  • Kjør Shopify Theme Inspector for Chrome for å identifisere kodelinjene som gjør sider i nettbutikken tregere.
  • Lei inn en Shopify-partner som kan hjelpe deg med å finne ineffektiv eller unyttig kode.

Bilder og videoer

Overdimensjonerte bilder og bilder som er skjult for visning kan påvirke innlastingen av andre og viktigere deler av en side. Hvis brukerne må vente på store bilder som lastes, kan de oppfatte butikken din som treg.

Shopify legger til noen sikkerhetstiltak for å hindre deg fra å overbelaste nettbutikken med bilder eller videoer. For eksempel:

  • Du kan ikke ha mer enn 50 produkter på en samlingsside eller 25 seksjoner på startsiden.
  • Mange temaer utsetter innlasting av bilder som ikke vises på skjermen for øyeblikket.
  • Mange temaer laster også inn en bestemt størrelse av et bilde basert på skjermstørrelsen det vises på.

Disse sikkerhetstiltakene hindrer imidlertid ikke helt bilder og videoer fra å påvirke ytelsene i nettbutikken din.

Hvis du tror at bilder gjør butikken din tregere, kan du gjøre følgende:

  • Gjennomgå veiledningen for bildeoptimalisering.
  • Hold lysbildefremvisninger av utvalgte bilder til 2-3 lysbilder, eller bruk ett utvalgt bilde.
  • Be temautvikleren din om råd for beste metode for å bruke bilder på temaet.

Skrifttyper

Du kan velge mellom flere skrifttyper for teksten i nettbutikken. Hvis du imidlertid bruker en skrift som ikke finnes på kundens datamaskin fra før, må skriften lastes ned før teksten kan vises. Dette påvirker lastetiden for butikken din.

For å unngå nedlasting av en ny skrifttype til kundens datamaskin kan du bruke en systemskrift. En systemskrift er en skrifttype som allerede er installert på de fleste datamaskiner.

Du kan velge en skriftfamilie i mono-, serif- eller sans-serif-familien. Du kan fortsatt bruke skriftstiler, som fet eller kursiv, når du bruker en av disse skriftfamiliene.

Skrifttypen som vises på kundens datamaskin er avhengig av operativsystemet deres. Under er noen eksempler på skrifttyper som kan brukes til å vise tekst når du velger en systemskriftfamilie:

  • 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

Feilsøkingsverktøy

Du kan bruke følgende verktøy til å granske nettbutikkens ytelse.

Hvis du er utvikler, kan du ytterligere optimalisere temaet for ytelser med Shopify-verktøy og beste praksis. Finn ut mer på Shopify.dev.

PageSpeed Insights

Shopifys Nettytelser-instrumentbord-rapport bruker Core Web Vitals til å måle hvordan faktiske brukere opplever nettbutikken. Du kan kjøre dine egne rapporter med Google PageSpeed Insights for å se mer detaljerte beregninger for sidene i butikken.

Shopify Theme Inspector for Chrome

Shopify Theme Inspector for Chrome er et profileringsverktøy som bruker et flammediagram for å vise behandlingsytelser for Liquid. Dette verktøyet hjelper deg med å identifisere kodelinjer som forsinker sidene i nettbutikken. Finn ut hvordan du bruker Shopify Theme Inspector.

Få hjelp med ytelsen til nettbutikken din

Hvis du bruker et gratis tema fra Shopify, kan Shopify-brukerstøtte være i stand til å hjelpe deg med grunnleggende ytelsesforbedringer.

Hvis du bruker et tredjepartstema og trenger hjelp, må du kontakte temautvikleren eller leie inn en Shopify-partner. Finn ut mer om å leie inn en Shopify-partner.

Hvis du har et utviklingsteam eller en byråpartner, kan du også ta kontakt med dem for mer hjelp.

Er du klar til å begynne å selge med Shopify?

Prøv det gratis