Hjelp
Logg på

Forbedre ytelsen til nettbutikken

Nettbutikken din består av et sett med funksjoner, som temakode, apper, bilder, videoer, karuseller, feeder fra sosiale medier og analyse. Disse funksjonene kan forbedre brukeropplevelsen og utvide nettstedets funksjonalitet.

Men hver funksjon du legger til i nettbutikken, kan påvirke butikkens ytelse. Noen funksjoner kan gjøre nettstedet tregere eller skape uventet atferd som kan påvirke brukeropplevelsen.

Nettstedytelse fokuserer på å optimalisere brukeropplevelsen. For tiden fokuserer nettstedytelse på tre hovedområder, som også gjenspeiles i Core Web Vitals:

  • Lastehastighet, målt ved Largest Contentful Paint (LCP)
  • Layoutstabilitet, målt ved Cumulative Layout Shift (CLS)
  • Responstid på brukerinteraksjon, målt ved Interaction to Next Paint (INP)

Optimalisering av nettstedytelsen betyr at det er mer sannsynlig at kundene dine blir værende på nettstedet og konverterer.

På denne siden

Optimaliseringer for nettbutikken

Nettbutikken din har innebygget nettoptimalisering. Nettoptimalisering er også innebygget i alle nye funksjoner. Du trenger ikke å gjøre noe spesielt for å dra nytte av følgende funksjoner:

  • Nettbutikken din driftes på raske, globale servere og begrenser ikke butikkens båndbredde. Du kan sjekke statusen til Shopify-butikken din på Shopify Status.
  • Nettbutikken din har et innholdsleveringsnettverk (CDN) som drives av Cloudflare, som sørger for at nettbutikken lastes raskt over hele verden. Du kan sjekke CDN-statusen på statussiden til Cloudflare.
  • For å holde lastetidene nede optimaliseres bilder automatisk ved hjelp av bilde-CDN. Kombinert med temakoden kan bilde-CDN-et levere det beste bildeformatet, som også er skalert og komprimert for å holde filstørrelsene små.

Faktorer som påvirker nettstedytelsen

For Shopify-butikker er følgende de største faktorene som påvirker nettstedytelsen:

  • Temaet for nettbutikken
  • Appene du har installert
  • Eventuell ekstra tredjepartskode du har lagt til manuelt i butikken, inkludert taggbehandlere og taggene i dem

Dette betyr at du bør fokusere på følgende for å forbedre nettstedytelsen:

  • Bruk et oppdatert og optimalisert tema. Alle temaene i Horizon-familien og Nettbutikk 2.0-temaer fra Shopify er gratis og optimalisert for nettstedytelse. I tillegg er mange andre tredjepartstemaer også optimalisert for nettstedytelse. Du kan se gjennom de nyeste dataene for temaytelse.
  • Hvis temaet ditt tilbyr sideoverganger eller andre animasjoner, bør du sammenligne nettstedytelsen før og etter du aktiverer dem. Animasjoner kan gjøre sidene tregere.
  • Unngå å legge til for mange seksjoner i sidemalene i temaet. Et høyt antall seksjoner på sidene kan redusere nettstedytelsen.
  • Hvis du har samlinger med store mengder produkter, bør du vurdere å aktivere sideinndeling for å begrense antallet produkter som lastes samtidig.
  • Evaluer de installerte appene og tredjepartskoden for å sikre at de skaper nok verdi til å veie opp for eventuelle ytelsestap.
  • Gå gjennom taggbehandleren for å fjerne ubrukte tagger eller tagger med lav verdi. Finn ut mer om anbefalte fremgangsmåter for tagger og taggbehandlere.

Testverktøy

Du kan bruke følgende verktøy til å undersøke ytelsen til nettbutikken:

  • Rapporter for nettstedytelse: Shopifys rapporter for nettstedytelse bruker Core Web Vitals til å måle hvordan virkelige brukere opplever nettbutikken din.
  • PageSpeed Insights: Du kan kjøre dine egne rapporter ved hjelp av Googles PageSpeed Insights for å se mer detaljerte målinger for sider i butikken din.

Forståelse av ytelsesanbefalinger fra tredjeparter

Tredjepartsverktøy for ytelsesskanning kan foreslå endringer for å forbedre butikkens hastighet. Mange av disse anbefalingene er imidlertid allerede implementert av Shopify eller gjelder ikke for Shopify-butikker.

Optimaliseringer som allerede er inkludert i Shopify

Shopify-butikken din inkluderer automatisk følgende ytelsesoptimaliseringer:

Innholdsleveringsnettverk (CDN): Shopify tilbyr et CDN i verdensklasse uten ekstra kostnad, som sikrer rask global ytelse. Alle ressurser leveres ved hjelp av HTTP/2, noe som reduserer systembelastningen sammenlignet med eldre protokoller.

Nettleserbuffer: Shopify angir nettleserbufferen for ressurser som kan bufres til ett år, som er den lengste mulige varigheten. Dette betyr at returnerende besøkende til butikken din vil oppleve raskere lastetider.

Gzip-komprimering: Shopify bruker Gzip-komprimering på CSS, JavaScript, dokumenter og sider for å redusere båndbredde og forbedre lastetider. Keep-alive er også aktivert for henting av flere filer.

Bildeoptimalisering: Shopify komprimerer JPG-bilder automatisk ved hjelp av avanserte algoritmer, og balanserer komprimering med visuelt uttrykk. Bilder leveres ofte i WebP-format for bedre komprimering og raskere lasting.

Filminifisering: Shopify minifiserer CSS- og JavaScript-filer automatisk når de etterspørres av utstillingsvinduet, noe som reduserer filstørrelser uten å påvirke funksjonaliteten.

Når tredjepartsanbefalinger ikke gjelder

Tredjeparts skanneverktøy kan foreslå endringer som ikke er relevante for Shopify-butikker:

  • Konfigurasjoner på servernivå: Anbefalinger om serveroppsett, HTTP-overskrifter eller retningslinjer for bufring er allerede optimalisert av Shopifys infrastruktur.
  • CDN-implementering: Forslag om å legge til et CDN er unødvendige, siden Shopify inkluderer et høyytelses-CDN som standard.
  • Komprimeringsinnstillinger: Anbefalinger om å aktivere komprimering er allerede implementert på tvers av Shopify-plattformen.

Følge relevante anbefalinger

Fokuser på anbefalinger som gjelder butikkens spesifikke innhold og funksjoner:

  • Bildeoptimalisering: Sørg for at bildene du laster opp har passende størrelse og bruker anbefalte formater.
  • Evaluering av apper: Vurder om installerte apper gir nok verdi til å veie opp for eventuell påvirkning på ytelsen.
  • Temaoptimalisering: Velg temaer som er optimalisert for ytelse, og begrens antall seksjoner i sidemaler.

Feilsøking av sider som laster sakte

Hvis butikken din laster sakte, kan du følge disse trinnene for å identifisere og løse problemet:

Trinn 1: Bekreft problemet

  1. Test butikkens lastehastighet selv fra ulike enheter og internettforbindelser.
  2. Be andre om å teste butikken din for å bekrefte at det ikke er et lokalt problem med internettforbindelsen din.
  3. Bruk testverktøy som PageSpeed Insights for å få spesifikke ytelsesberegninger.

Trinn 2: Identifiser årsaken

Se etter for mange apper: For mange apper som laster ressurser i utstillingsvinduet, kan redusere ytelsen. Gå gjennom de installerte appene og fjern alle som ikke er nødvendige for salget.

Gå gjennom store bilder: Sider med mange bilder av høy kvalitet kan laste sakte. Optimaliser bildene dine, eller reduser antallet som vises. Finn ut mer om anbefalte bildestørrelser.

Identifiser trege skript: Hvis nettstedet henger på en tom side før alt lastes inn samtidig, kan du bruke nettleserens utviklerverktøy for å identifisere skript som laster sakte. Kontakt app- eller temautvikleren for å få løst problemet.

Trinn 3: Gjør tiltak

Fjern unødvendige apper: Når du avinstallerer en app, fjernes ikke koden automatisk fra temaet. Du må kanskje kontakte apputvikleren for å få fullstendige instruksjoner om fjerning.

Optimaliser bilder: Bruk passende filformater (JPG for bilder, PNG for grafikk med gjennomsiktighet) og endre størrelsen på bildene slik at de samsvarer med visningsstørrelsen.

Evaluer temaytelse: Vurder å bytte til et ytelsesoptimalisert tema hvis det nåværende temaet forårsaker betydelige forsinkelser.

Få hjelp med nettbutikkens ytelse

Hvis du bruker et gratis tema fra Shopify, kan Shopifys brukerstøtte kanskje hjelpe deg med grunnleggende ytelsesforbedringer.

Hvis du bruker et tredjepartstema og trenger hjelp, må du kontakte temautvikleren, leie inn en Shopify-ekspert på ytelse på nettet eller en Shopify-partner for nettstedytelse og -hastighet. Finn ut mer om å leie inn en Shopify-partner.

Hvis ytelsesproblemet kommer fra en app, kan du kontakte apputvikleren.

Hvis du har et utviklerteam eller en byråpartner, kan du også kontakte dem for videre hjelp.

Teknisk informasjon og ressurser for feilsøking

Hvis du er en utvikler som ønsker å forbedre ytelsen for et Shopify-utstillingsvindu, -tema eller en app, kan du se gjennom følgende ressurser for hver Core Web Vital. Finn ut mer om beste praksis for ytelse for Shopify-temaer.

Lastehastighet

Largest Contentful Paint (LCP) måler lastehastighet, basert på hvor raskt det største elementet på skjermen blir synlig. Time to first byte (TTFB) og first contentful paint (FCP) er støtteberegninger som hjelper deg med å bedre forstå hvor hovedårsaken til problemet ligger. Du kan finne ut mer om feilsøking av vanlige årsaker til treg lasting i Shopify Liquid-utstillingsvinduer.

Visuell stabilitet

Cumulative Layout Shift (CLS) måler visuell stabilitet, basert på hvor mye innholdet flytter seg uventet under lasting. For en grundig gjennomgang av feilsøking av CLS kan du lese Slik optimaliserer du Cumulative Layout Shift (CLS) på Shopify-nettsteder.

Interaktivitet

Interaction to Next Paint (INP) måler interaktivitet basert på hvor lang tid det tar før siden blir responsiv for de fleste brukerhandlinger. For eksempel brukerhandlinger som å klikke på en kobling eller en knapp.

Hvis du opplever dårlig INP, har du sannsynligvis for mye JavaScript i butikken fra enten temakode, appkode eller kode fra tredjeparter eller tag-behandlere. Jobb med å rydde opp i de verste synderne. Finn ut mer i Tre måter å finne JavaScript-synderne som skaper trege sider på. Hvis du fremdeles har problemer med INP, kan du finne ut mer med ressursene på web.dev.