Mange kunder forlater sider som laster tregt. Derfor må nettbutikken gi en god visuell opplevelse uten at bilder, skript og andre elementer gjør den unødvendig tung. Dette gjelder særlig når kunden går fra en produktoversikt til en produktside eller videre til kassen. Bilder og interaktive funksjoner kan være verdifulle, men de bør ikke hindre at det viktigste innholdet vises raskt.
Denne veiledningen viser deg hvordan du får til nettopp det.
Hva er optimalisering av nettstedshastighet?
Optimalisering av nettstedshastighet betyr å gjøre sidene i nettbutikken raskere og mer responsive. Det kan innebære å redusere filstørrelser, forbedre kode og serverrespons og laste innhold når det trengs.
Målet er at kundene raskt skal kunne se produkter og fullføre kjøp.
To begreper er nyttige når du vurderer hastighet:
- Sidehastighet beskriver hvor raskt en bestemt side lastes og kan brukes.
- Nettstedshastighet beskriver ytelsen på tvers av sider i nettbutikken. Verktøy som Google PageSpeed Insights kan hjelpe deg med å finne flaskehalser på enkeltsider.
Det finnes ingen universell lastetid som passer alle nettbutikker. Bruk faktiske målinger fra kundene dine og prioriter sidene som betyr mest for kjøpsreisen. Som Josh Stutt i byrået the49 sier: «Mennesker er utålmodige. Vi har alle prøvd å åpne et nettsted som ikke lastet raskt nok, og endt med å lukke fanen.»
Mål både hvor raskt hovedinnholdet vises, og hvor raskt kunden kan bruke siden. En god gjennomsnittsverdi hjelper lite dersom viktige produktsider er trege for mange av de besøkende.
Selv små forsinkelser kan få betydning når mange besøker butikken. Mål derfor både hastighet og konvertering før og etter endringene du gjør.
Hvorfor er nettstedshastighet viktig?
En rask nettbutikk gjør det enklere for kundene å finne produkter og fullføre kjøp, særlig når de bruker mobil.
I en Deloitte-studie fra 2020 var en forbedring på 0,1 sekund i hastigheten på mobilnettsteder knyttet til 8,4 % høyere konvertering og 9,2 % høyere gjennomsnittlig ordreverdi i detaljhandelen. Det var en sammenheng i de undersøkte nettbutikkene, ikke en garanti for enhver butikk.
Forskning fra Portent støtter disse funnene. Undersøkelsen viste at nettbutikker som laster i løpet av ett sekund, har en 2,5 ganger høyere konverteringsrate enn de som laster i løpet av fem sekunder.
Sideopplevelse kan også spille en rolle i Google Søk. Google bruker Core Web Vitals som signaler for sideopplevelse, men godt innhold og relevans er fortsatt avgjørende for rangeringen.
Trege landingssider kan dessuten påvirke resultatene fra betalte annonser. Test dem på mobil før du øker annonsebudsjettet, og se om forbedringene gir flere fullførte kjøp. Ved betalt søk bør du derfor se på landingssidens opplevelse sammen med annonsekostnaden og konverteringsraten. Et klikk som ender på en treg side, kan bli dyrt uten å gi et salg.
Vanlige faktorer som påvirker nettstedshastigheten
Netthandelsplattformen din
Velg en netthandelsplattform med infrastruktur som tåler trafikken din. Spør leverandøren hvordan serverrespons, bufring og temakode påvirker lastetiden kundene opplever. Be også om hjelp til forbedringer på serversiden. Et raskt tema kan ikke fullt ut kompensere for treg behandling av forespørsler før siden sendes til nettleseren.
Gjengivelse (rendering) er prosessen der HTML-koden opprettes når en bruker laster siden i nettleseren sin. Netthandelsinfrastrukturen din styrer gjengivelsesprosessen.
Shopifys Storefront Renderer (SFR) er laget for å behandle forespørsler til nettbutikken raskt. Serverresponsen er likevel bare én del av opplevelsen; bilder, skript og tredjepartsapper påvirker også hvor raskt siden blir brukbar.
«JavaScript- og CSS-filer kan hindre at en nettside vises raskt», sier Chris McCarron, eier av GoGoChimp. «Nettleseren må laste ned og behandle filene før den kan vise resten av innholdet.»
SFR kan særlig hjelpe ved en hurtigbufferbom, altså når en side eller data ikke finnes i den nærmeste hurtigbufferen. Serveren må da hente innholdet fra et annet nivå eller bygge det på nytt før siden kan sendes til nettleseren.
Ifølge Shopify tok Rhone Apparel i bruk SFR i april 2020. Sammenlignet med måneden før rapporterte selskapet:
- 15 % økning i omsetning
- 17 % økning i konverteringsrate
- 12 % reduksjon i gjennomsnittlig lastetid
- 37,95 % reduksjon i gjennomsnittlig svartid på serveren
- 3 % reduksjon i fluktfrekvens
Plattformens ytelse legger grunnlaget, men du kan også forbedre hastigheten selv. Begynn med endringene som påvirker de viktigste sidene i kundereisen. Hvis plattformen har svak ytelse ved høy belastning, får tiltak på enkeltsider mindre effekt. Når infrastrukturen fungerer godt, kan du konsentrere deg om bilder, apper og kode i din egen butikk.
Drift og kapasitet
Driftstjenesten og infrastrukturen påvirker ytelsen, særlig når trafikken og antallet bestillinger øker raskt.
Store salgskampanjer kan gi brå trafikktopper. Også store forhandlere har tidligere opplevd nedetid under Black Friday. Undersøk derfor hvordan plattformen håndterer høy belastning, og lag en plan for overvåking og feilsøking før årets viktigste salgsdager.
Når du vurderer driftsløsningen, bør du se etter:
- Begrensninger på minne eller båndbredde for skalering under sesongkampanjer
- Forventet trafikk og maksimal brukerbelastning, slik at du unngår krasj ved en plutselig økning i besøkende
Før et større salgsarrangement bør du be plattformleverandøren din om hjelp til å forberede deg på uventede trafikktopper eller en flom av bestillinger.
Under Black Friday og Cyber Monday i 2018 fikk JB Hi-Fi tekniske problemer. I om lag to timer kunne svært få besøkende fullføre et kjøp. «Hele landet får høre om det. Det er ille for kundene, og det er ille for merkevaren. Vi ville gjort hva som helst for å unngå det», sa Chris Lang i JB Hi-Fi.
Etter overgangen til Shopify Plus i 2019 fikk JB Hi-Fi sitt beste BFCM-salg til da. Netttrafikken var nesten dobbelt så høy som året før, uten at selskapet rapporterte problemer med nettstedytelsen.
Shopifys skybaserte infrastruktur er laget for å håndtere store trafikktopper. Be leverandøren om oppdaterte tall for oppetid og ytelse som er relevant for din butikk.
Nettstedarkitektur
Nettbutikker bruker en rekke ulike arkitekturer for å presentere informasjon til både brukere og nettlesere. Dette kan bli komplekst etter hvert som du vokser, sier Javier Moreno, dataanalysesjef i Shopify: «Etter hvert som merkevarer vokser og blir mer avanserte, blir nettstedene deres rikere. Denne rikdommen kommer som regel med en pris. Med mindre du aktivt følger med på hastigheten, vil endringene gjøre nettstedet tregere.»
Noen forhandlere velger hodeløs netthandel, der kundens grensesnitt er skilt fra systemet som håndterer produkter og bestillinger.
Forhandlere som bruker Commerce Components by Shopify, tar dette et skritt videre. De tar i bruk akkurat de netthandelsteknologiene de trenger, når de trenger dem, i stedet for å overbelaste nettleseren med for mye kode som går ut over hastigheten.
For mange tredjepartsapper
Gå jevnlig gjennom appene i butikken. Fjern dem du ikke bruker, og undersøk om de gjenværende laster skript, stilark eller andre ressurser som gjør sidene tregere. Noen apper kan ha blitt installert for å prøves ut og deretter glemt. Selv om du ikke aktivt bruker dem, kan tilhørende kode fortsatt bli lastet og påvirke ytelsen.
Få en utvikler til å fjerne alle unødvendige apper. Kjør deretter hastighetstester med verktøy som GTmetrix eller PageSpeed Insights, eller til og med en manuell test med utviklerverktøyene i Chrome. Klikk på fanen «Network» og last siden på nytt.
Hver gang du vurderer å installere en ny app, bør du spørre deg selv: Vil merverdien av denne appen veie opp for den mulige tregheten i lastetiden?
Noen apper legger til skript og stilark i temaet. Undersøk hvilke ressurser som lastes på hver sidetype, og om de faktisk trengs der.
Et skript som lastes tidlig og synkront, kan forsinke visningen av annet innhold.
Be en utvikler undersøke hvordan tredjepartsskript lastes. Skript som legges direkte i dokumentets
<head>-kode, kan forsinke visningen av resten av siden. Asynkron eller utsatt lasting kan hjelpe, men test endringene slik at appene fortsatt fungerer.
Slik måler du nettstedshastighet
Hastighetstestverktøy bruker ulike målinger. Noen viser tiden til første byte (TTFB), mens andre viser når hovedinnholdet blir synlig eller siden reagerer på brukerens handlinger. Sammenlign derfor målinger som beskriver det samme, og se på flere tall før du trekker en konklusjon.
Bruk testresultatene som støtte når du prioriterer tiltak. Hastighet må vurderes sammen med funksjonene kundene trenger for å finne produkter og fullføre kjøp.
Google PageSpeed Insights
Google PageSpeed Insights analyserer ytelsen på både mobil og datamaskin. Rapporten viser målinger og konkrete forslag, for eksempel om bilder, CSS eller JavaScript forsinker siden.
«Jeg sørger for at alle prosjektene jeg jobber med, testes jevnlig med Google PageSpeed Insights eller et lignende verktøy», sier Josh Stutt. «Du må vite hvordan du presterer og hvor de svake punktene ligger, før du kan forbedre deg.»
Du kan også teste konkurrentenes mobilnettsteder for å se hvordan de løser lignende utfordringer. Det kan avdekke hva som fungerer godt, og hvilke feil du selv bør unngå. Sammenlign gjerne både forsiden, produktsider og kassen på samme type mobilforbindelse.
GTmetrix
GTmetrix vurderer sidens ytelse med Lighthouse og gir en karakter fra A til F. Undersøk målingene bak karakteren i rapporten, som blant annet viser:
- Lastetiden for siden din
- Analyse av Web Vitals og Lighthouse
- Muligheter for å optimalisere hastigheten
- Oppdeling av siden etter forespørsler og total filstørrelse
Pingdom
Pingdom gir en oversikt over nettstedets ytelse og en fossefallsvisning som viser når hver ressurs lastes. Bruk den til å finne forespørsler som tar uforholdsmessig lang tid.
Slik optimaliserer du hastigheten på nettstedet ditt
Bruk et innholdsleveringsnettverk (CDN)
Et innholdsleveringsnettverk (CDN) består av servere på flere steder. Når en kunde ber om et bilde eller en annen fil, kan nettverket levere en lagret kopi fra et punkt nærmere kunden. Det fordeler belastningen og kan redusere ventetiden, særlig for butikker med kunder i flere land.
Et CDN kan også avlaste den opprinnelige serveren når mange besøker butikken samtidig. Det er særlig nyttig under internasjonale kampanjer og store salgsdager.
Shopify bruker et CDN til å levere butikkens filer. Hvor raskt sidene oppleves, avhenger likevel også av filstørrelser, tema og skript. CDN-et kan lagre statiske filer nærmere kunden, slik at de ikke må hentes fra samme server ved hvert besøk. Gevinsten blir størst når filene er godt optimalisert og hurtigbufringen fungerer som den skal.
Et CDN kan bidra til høyere hastighet. Kostnadene avhenger av den samlede løsningen. «At vi fikk lisens, hosting og CDN fra Shopify Plus sparte oss umiddelbart for rundt 100 000 dollar i året, sier Diana Harbour, eier av Red Dress Boutique.
Bilder er ofte blant de tyngste ressursene på en side. Når du oppdaterer filer, må nettverket levere riktig versjon til kundene.
Gjør dette med Shopify
I Shopify kan filteret asset_url legge et versjonsnummer til URL-en for en temafil, for eksempel ?v=1384022871. Da kan CDN-et levere den oppdaterte filen etter en endring. Versjonsnummeret gjør det lettere å skille en ny fil fra en eldre kopi i hurtigbufferen. Uten riktig versjonering kan en besøkende fortsette å se en gammel fil etter at temaet er oppdatert.
Bruker du en statisk filadresse direkte i CSS, kan du miste denne automatiske versjoneringen. Da kan nettleseren eller CDN-et fortsette å bruke en eldre kopi av filen. Gå derfor gjennom hvordan adresser til temafiler blir opprettet når du gjør endringer i CSS.
Bruk Shopifys filfiltre der de passer, og sjekk dokumentasjonen før du endrer temakoden. Det gjelder særlig filer du selv refererer til i temaet. Test etterpå at den oppdaterte filen faktisk vises for besøkende, og at URL-en inneholder riktig versjon.
Ikke overdriv med temajusteringer
Designet påvirker førsteinntrykket av butikken og bør gjøre det enkelt å finne produkter og forstå hva du tilbyr. Samtidig kan store animasjoner og grafiske filer øke lastetiden. Vurder derfor utseende og ytelse sammen når du velger tema og tilpasser det.
Et visuelt rikt tema kan inneholde flere effekter og mer kode enn butikken trenger. «Du trenger ikke et tema med alle mulige finesser», sier Josh Stutt. «Du trenger ett som er rent, raskt og enkelt å navigere i. Jeg har sett over 50 % lavere fluktfrekvens blant nye besøkende på forsiden bare ved å bytte til et enklere tema.»
Nirav Sheth, administrerende direktør og grunnlegger av Anatta, mener at kjappe tiltak ikke gir varig høy ytelse. Han peker på at forbedringene må begynne med temaets underliggende arkitektur.
Vurder å slå av hurtigvisning på kategorisider
Popup-vinduer for hurtigvisning viser et produkt direkte fra en produktoversiktsside, i stedet for at du må gå inn på en egen produktside.
I teorien skal hurtigvisning spare kundene dine for tid, men i praksis kan det faktisk stå i veien for opplevelsen i nettbutikken din:
- Det legger til et ekstra steg i kundereisen.
- Det kan klikkes på ved et uhell, noe som er frustrerende for brukeren.
- Det kan forveksles med en produktside.
- Aller viktigst: Det kan gjøre lastetiden betydelig tregere.
Popup-vinduer for hurtigvisning (enten de er innebygd i et tema eller kommer fra en app) kan noen ganger forhåndslaste informasjonen fra en hel produktside i tilfelle en besøkende klikker på «Hurtigvisning»-knappen.
På en samlingsside med 20 eller 30 produkter kan slik forhåndslasting utgjøre mye data. Et klikkart kan vise om kundene faktisk bruker hurtigvisning, slik at du kan vurdere om funksjonen er verdt belastningen.
Et eksempel på et verktøy for klikkart er:
Finn hurtigvisning i Shopify
Se etter hurtigvisning på produktbildene i butikken, og sjekk om den kan slås av i temaredigereren. Hvis du ikke finner innstillingene der, kan funksjonen komme fra en app. Undersøk da appens innstillinger eller fjern appen hvis du ikke trenger den.
Hvis de to første stegene ikke hjelper, er det sannsynlig at det er bakt inn i selve temaet. Da trenger du en utvikler til å finne og fjerne det. Finn en tjenestepartner for Shopify Plus som kan hjelpe deg med denne prosessen.
Bruk AJAX til å hente produktinformasjonen først når en besøkende klikker på hurtigvisningsknappen. Eller lagre et begrenset utvalg produktinformasjon som dataattributter på produktet i rutenettet. Bygg deretter HTML-en og popup-vinduet dynamisk med JavaScript.
Begge løsningene kan være mindre effektive enn å fjerne hurtigvisning helt, siden noe produktinformasjon fortsatt må lastes. De kan likevel være bedre enn å forhåndslaste alle produktbilder og lenker på samlingssiden.
Fjern unødvendige popup-vinduer
Popup-vinduer finnes for å vise spesialtilbud eller for å friste folk til å ta det neste steget i kundereisen. Enten det handler om å løse inn en kupong eller å oppgi e-postadressen sin, hjelper popup-vinduer med å engasjere førstegangsbesøkende og åpne døren for fremtidig kommunikasjon.
Popup-vinduer kan vise tilbud eller invitere besøkende til å melde seg på nyhetsbrevet. Brukt med måte kan de støtte kundereisen, men blinkende grafikk og tung kode kan gjøre siden tregere og trekke oppmerksomheten bort fra innholdet.
Last popup-vinduer først når de trengs, for eksempel etter et klikk, en tidsforsinkelse eller et tegn på at brukeren vil forlate siden. Da får hovedinnholdet tid til å vises først. Test både ytelsen og hvordan vinduene fungerer på mobil.
Begrens bildekaruseller på forsiden
Store bildekaruseller kan vise flere produkter, men de kan også øke lastetiden. Hvert lysbilde krever en bildefil, og filene må være store nok til å se gode ut på ulike skjermer.
Reduser antallet lysbilder på forsiden, eller bruk et tydelig hovedbilde med en relevant oppfordring til handling. Det gir færre store filer å laste og gjør budskapet enklere å få øye på.
Hvis du vil beholde en bildekarusell, kan du
- holde deg til to eller tre lysbilder
- la kunden bla mellom lysbildene i stedet for å rotere dem automatisk
- bruke responsive bilder og laste bilder utenfor skjermen ved behov
Chubbies bruker for eksempel optimaliserte bilder i stedet for en tradisjonell bildekarusell på forsiden. Medgrunnlegger Tom Montgomery sier: «Vi har vært med Shopify fra dag én. Ingen av oss er ingeniører, så det er flott å kunne stole på ekspertene hos Shopify slik at vi kan fokusere på å innovere.»
Komprimer, endre størrelse på og reduser bilder
Store bildefiler kan gjøre produkt- og kategorisider tregere. Jo flere produkter du viser på én side, desto flere filer og forespørsler må nettleseren håndtere. Bruk bilder som hjelper kunden å vurdere produktene, gi dem riktig størrelse og komprimer dem uten å ødelegge kvaliteten.
Alex Mirzaian, markedssjef i Eightvape, sier: «Når du hele tiden lager innhold gjennom blogginnlegg eller lager mange produkter om dagen, har du en tendens til bare å legge bilder på nettstedet uten å tenke over det. Å komprimere bilder kan hjelpe mye når du har tusenvis av bilder på nettstedet.»
Du kan redusere filstørrelsen uten vesentlig kvalitetstap ved å komprimere bildene med verktøy som TinyJPG eller TinyPNG.
Se også etter tomme eller ødelagte bildeadresser i koden. De kan skape unødvendige forespørsler. For små ikoner kan moderne SVG-filer være et godt alternativ. Små ikoner som brukes mange steder, kan også samles i en CSS-sprite for å redusere antallet separate filer. Velg løsningen som passer temaet, og mål om endringen faktisk gjør siden raskere.
Shopifys bildeparametere kan levere bilder i en størrelse som passer visningen. Da overføres mindre data fra CDN-et, og nettleseren slipper å skalere ned en unødvendig stor fil.
«En av kundene våre hadde et nettsted som lastet tregt, så vi begynte med å optimalisere bildene», sier Maria Harutyunyan, medgrunnlegger av Loopex Digital. «Vi gjorde dem mindre og komprimerte dem, noe som utgjorde en enorm forskjell for hvor raskt sidene lastes. Bildene tar nå faktisk 60 % mindre plass og lastes mye raskere.»
Bruk lette innbygginger for video
Video kan vise produktdetaljer som er vanskelige å formidle med tekst og bilder. En videospiller kan samtidig legge til mange filer og skript. Vurder derfor om videoen gir kunden nok verdi til å veie opp for belastningen, og bruk en lett innbygging når det passer.
En vanlig YouTube-innbygging kan laste skript før kunden trykker på avspillingsknappen. Den bruker som regel en iframe, som må tilpasses ulike skjermstørrelser. Kontroller både hvilke ressurser som lastes, og hvordan spilleren fungerer på mobil.
En lett videoinnbygging viser først et miniatyrbilde og laster selve spilleren når kunden velger å spille av videoen. Dermed trenger ikke nettleseren å hente alle spillerens JavaScript-filer ved første sidelasting.
Hvor mye du sparer, avhenger av innbyggingen og antallet videoer. Mål forskjellen på siden din før og etter endringen.
Reduser omdirigeringer og døde lenker
Lange omdirigeringskjeder og lenker som ikke virker, kan forsinke brukerne og gjøre nettstedet vanskeligere å bruke.
Bruk 301-omdirigering når en side er flyttet permanent, og 302 når flyttingen er midlertidig. En 302-omdirigering skader ikke SEO i seg selv, men unødvendige omdirigeringer gir ekstra ventetid.
Rett interne lenker mot den endelige adressen, og unngå kjeder der én omdirigering peker til en annen. Bruk Shopifys omdirigeringsfunksjon når en URL endres.
Døde lenker til sideelementer som bilder, CSS- og JS-filer fører til mislykkede HTTP-forespørsler og går ut over hastigheten din. Bruk et verktøy som Broken Link Checker til å fjerne dem. Å lage egne 404-feilsider hjelper besøkende som ved et uhell taster inn feil URL for nettstedet ditt.
Aktiver forsinket lasting
Forsinket lasting betyr at innhold utenfor den synlige delen av siden lastes når brukeren nærmer seg det. Slik slipper nettleseren å hente alle bilder og innbygginger med én gang.
På en produktside bør hovedbildet og annet viktig innhold øverst lastes tidlig. Bilder, kundeanmeldelser og innbygginger lenger nede på siden kan ofte lastes når kunden nærmer seg dem. Slik reduseres datamengden ved første sidelasting uten at kunden møter en tom side.
I en kundes nettbutikk fant Chris McCarron i GoGoChimp mange bilder langt nede på sidene. Ved å laste dem først når brukeren nærmet seg dem, reduserte teamet mengden data som måtte hentes ved første sidelasting.
Utsett skript som blokkerer sidevisningen
Nettleseren leser HTML-koden før den viser siden. Et synkront skript kan stoppe denne prosessen mens filen lastes og kjøres. Se derfor etter skript som ikke trenger å kjøres før innholdet vises, og vurder om de kan lastes senere.
Attributtene async og defer kan brukes til å laste eksterne skript uten å blokkere lesingen av HTML. Velg løsning etter hvilke avhengigheter skriptet har.
Synkront skript: <script src="jquery.js"></script> Utsatt skript: <script src="jquery.js" defer></script>
Måten JavaScript lastes på, avgjør om skriptene blokkerer sidevisningen. Etter en endring bør du måle hastigheten og teste at menyer, handlekurv og andre funksjoner fortsatt virker. Vær særlig oppmerksom på skript som er avhengige av hverandre.
Organiser sporing med Google Tag Manager
Sporingskoder er nyttige for analyse og markedsføring, men de kan også gjøre nettstedet tregere. Skript for analyse, konverteringer og målgrupper kan legge til mange forespørsler, særlig hvis flere tagger lastes på hver side.
Google Tag Manager samler administrasjonen av sporingskoder på ett sted og gjør det lettere for teamet å holde oversikt og fjerne problematiske tagger. Taggene kan likevel utløse egne nettverksforespørsler. Fjern dem du ikke trenger, og begrens når de kjøres.
Nirav Sheth forteller at da Anatta forbedret hastigheten i en skjønnhetsbutikk, var det særlig kombinasjonen av Shopifys API-er og opprydding i Google Tag Manager som ga resultater.
Følg gjeldende Shopify-dokumentasjon når du legger til Google Tag Manager, og test både sporing og sidehastighet etterpå. Slik kan teamet administrere sporingen samlet og raskere oppdage feil. Kontroller samtidig at løsningene du bruker, er støttet i den aktuelle Shopify-kassen og temaet.
Vær oppmerksom på for mange Liquid-løkker
Liquid er Shopifys malspråk. Løkker og andre funksjoner er nyttige når temaet skal vise produkter og varianter, men koden bør ikke gjøre mer arbeid enn nødvendig.
En Liquid-løkke går gjennom elementer, for eksempel produkter eller varianter, for å vise eller behandle data. Unødvendige eller gjentatte løkker kan gjøre en mal tyngre.
Liquid-løkker er nyttige når temaet skal vise bilder og produktvarianter. På store samlingssider bør du likevel undersøke om løkkene gjør mer arbeid enn nødvendig og påvirker lastetiden.
Når flere utviklere har arbeidet på samme tema, kan det oppstå Liquid-løkker som henter den samme informasjonen flere ganger. Gå gjennom koden, forenkle gjentakelsene der det er mulig, og mål effekten før og etter endringen.
Velg riktig Liquid-objekt og løkkestruktur for oppgaven. Shopifys dokumentasjon viser hvilke data som er tilgjengelige i temaet.
Slik gjennomfører du en hastighetstest av nettstedet
Core Web Vitals er Googles tre sentrale målinger for brukeropplevelse: lasting, respons og visuell stabilitet. Se både på faktiske brukerdata og på testresultater når du vurderer hastigheten.
- Largest Contentful Paint (LCP) måler når sidens største synlige innholdselement vises. En god verdi er høyst 2,5 sekunder.
- Interaction to Next Paint (INP) måler hvor raskt siden reagerer på brukerens handlinger. En god verdi er høyst 200 millisekunder.
- Cumulative Layout Shift (CLS) måler hvor mye innholdet flytter seg uventet. En god verdi er høyst 0,1.
PageSpeed Insights viser om målingene er gode, trenger forbedring eller er dårlige. Rapporten gir også forslag til hva du kan undersøke videre.
Hastighetsoptimalisering for mobil
Mange kunder handler på mobil. Derfor bør du teste de viktigste sidene i nettbutikken med mobilvisning og vanlige nettverkshastigheter. Brukerne kan veksle mellom Wi-Fi og mobilnett, og mange handler mens de er på farten. Test derfor både navigasjon, produktbilder og kassen under forhold som ligner kundenes faktiske bruk.
Raskere mobilopplevelse kan gjøre det enklere å fullføre kjøp. I Deloittes studie var en forbedring på 0,1 sekund i hastigheten på mobilnettsteder knyttet til 8,4 % høyere konvertering i detaljhandelen. På mobil kan store filer og skript merkes ekstra godt når forbindelsen er svak. Bruk derfor faktiske mobildata når du vurderer om endringene dine gjør det enklere å kjøpe.
Merchology, som selger firmaklær og gaver, oppdaget at mange mobilbesøkende ikke fullførte kjøp. Selskapet redesignet derfor mobilnettstedet med kundens mobilopplevelse som utgangspunkt. To måneder etter lanseringen rapporterte de 40 % høyere konverteringsrate på mobil.
Slik kan du forbedre mobilopplevelsen og sammenligne resultatene med relevante konkurrenter.
Vurder AMP bare når det dekker et konkret behov
Accelerated Mobile Pages (AMP) er et rammeverk for mobiltilpassede sider. Det er ikke et krav for å rangere i Google Søk eller for å få raske mobilsider. Vurder det opp mot andre måter å forbedre mobilopplevelsen på. AMP kan levere en egen versjon av en side, men det krever ekstra vedlikehold. For en nettbutikk er det særlig viktig å vurdere om løsningen fungerer med produkter, analyse og kjøpsflyt før den tas i bruk.
Begynn med å måle de vanlige mobilsidene dine. Optimaliser bilder, skript og kasseflyt før du vurderer en egen AMP-løsning.
Deaktiver automatisk avspilling av video på mobil
En kunde kan se på sko fra Allbirds mens han er ute på tur med ustabil mobildekning. En annen kan bestille Firebelly Tea på mobilen mens hun venter på barna etter skolen. Begge trenger en side som fungerer raskt også uten sterk Wi-Fi.
Besøkende på mobil kan ha lyst til å se produktvideoer, men automatisk avspilling kan gjøre siden merkbart tregere, særlig på en svak forbindelse.
Når en video spilles av automatisk, kan mobilen laste ned en stor fil med én gang. Et statisk miniatyrbilde og en avspillingsknapp lar kunden velge om videoen skal lastes. Da kan sidens viktigste innhold vises tidligere.
Optimaliser kassen på mobil
Når man forbedrer mobilnettstedets hastighet, får forsider, produkt- og kategorisider ofte mest oppmerksomhet. Kasseprosessen må også testes: Forsinkelser der kan føre til at kunder som allerede har valgt varer, avbryter kjøpet.
En treg kasse kan bidra til at flere forlater handlekurven. Kundene har kanskje brukt tid på å velge produkter, men de kan likevel gi opp hvis betalingen tar for lang tid eller krever for mange steg. Det gjelder særlig impulskjøp.
Shop Pay kan gjøre mobilkassen enklere ved å la kunder bruke lagrede betalings- og leveringsopplysninger. Test hele kasseflyten på mobil og se om den fungerer godt for kundene dine.
«De fleste av kundene våre oppdager nye produkter mens de er på farten med mobilen. Hvis de må fylle ut et skjema, mister vi dem», sa Benjamin Sehl, medgrunnlegger av Kotn, i den opprinnelige Shopify-artikkelen. «Med Shop Pay er det blitt mye enklere å betale. Fordi løsningen er koblet til et økosystem med en million forhandlere, kan selv nye kunder betale med ett klikk.»
Optimaliser hastigheten på nettstedet ditt og se effekten på konverteringene
Det er viktig å få teamet ditt med på å investere tid og ressurser i å optimalisere ytelsen og hastigheten på nettstedet. Dataene og verktøyene vi har delt, kan hjelpe deg med å bygge et godt argument.
Mange av disse optimaliseringene kan du gjøre selv. Når det ikke er mulig, kan du få hjelp av en Shopify Plus-partner. De kan veilede deg i hvordan du gjør Shopify-nettstedet ditt raskere.
Ofte stilte spørsmål om optimalisering av nettstedshastighet
Hvordan kan jeg optimalisere hastigheten på nettstedet mitt?
- Komprimer og endre størrelse på bilder.
- Aktiver forsinket lasting.
- Reduser omdirigeringer.
- Fiks døde lenker.
- Rett opp lenker som ikke virker.
- Aktiver nettleserbufring.
- Fjern overflødig kode.
Hvorfor er nettstedet mitt så tregt?
Nettbutikken kan være treg fordi temaet eller nettstedstrukturen er tung, bildene er for store, for mange skript lastes, eller plattformen reagerer langsomt. Mål hvor forsinkelsen oppstår før du velger tiltak.
Hvorfor er nettstedshastighet viktig i netthandel?
Hastigheten kan påvirke om en besøkende fullfører kjøpet. I en studie hadde nettbutikker som lastet på ett sekund, 2,5 ganger høyere konverteringsrate enn butikker som brukte fem sekunder. Resultatet viser en sammenheng, ikke en garanti for den enkelte butikk.
Hva er en god nettstedshastighet for SEO?
Det finnes ingen fast grense på to sekunder som garanterer god SEO. Sikt mot gode Core Web Vitals: LCP på høyst 2,5 sekunder, INP på høyst 200 millisekunder og CLS på høyst 0,1. Vurder samtidig innhold, relevans og brukeropplevelse.

