Optimalisere nettbutikkens hastighet

Denne hjelpeartikkelen handler om hvordan du kan jobbe for å optimalisere hastigheten i en nettbutikk som bruker designmalene Rio eller Santiago.

Økt hastighet i nettbutikken din kan ha positiv effekt for både brukeropplevelsen og butikkens digitale synlighet (SEO). I denne artikkelen vil du lære mer om hva du kan gjøre for å optimalisere din nettbutikk med utgangspunkt i dine forutsetninger slik at du får en så bra nettbutikk som mulig.

PageSpeed

Når vi i hjelpeartikkelen snakker om pagespeed, eller nettsidehastighet om du vil, så er det viktig å huske at en god og effektiv nettbutikk også handler om mer enn bare pagespeed.

Antallet innholdselementer (bilder, script, spesialtilpasninger, banner m.m.), og om disse er optimalisert eller ikke, vil påvirke hastigheten og kan dermed gi deg en lav pagespeed score. Se gjerne Google sin PageSpeed Insights for å lære mer om nettsidehastighet.

Å ha en stor nettbutikk med høy omsetning er ikke alltid ensbetydende med å ha en raskt nettbutikk. Flere store nettbutikker i Norge scorer ikke spesielt bra på pagespeed. Grunnen til dette kan være at de helt enkelt prioriterer andre tilpasninger og tiltak som de mener er viktig for å gi en god kundeopplevelse. Hastighet er ikke derfor ikke noe man utelukkende skal se på for å gi kundene en god opplevelse. Da er det kanskje viktigere at man fokuserer på hvor rask man kan gjøre nettbutikken med utgangspunkt i de funksjoner en selv mener det er viktig å være god på.

Raskere America-mal

Mystore.no har høsten 2020 hatt et mål å gjøre America-malen til en av de raskeste malene på markedet. I dette arbeidet har vi sett på hvordan de forskjellige innholdselementene i malen presenteres og fungerer sammen.

Blant annet har vi identifisert overflødig kode som er blitt fjernet eller endret. Vi har også jobbet med å optimalisere hvilket innhold malen viser først, hva som vises i det første skjermbildet og kvalitetssikret at nettlesere klarer å bygge dette innholdet på en korrekt og strukturert måte.

Så har vi også gjort en hel rekke andre litt mer tekniske justeringer. Prinsippene vi har jobbet etter kan leses mer om på web.dev/vitals.

De foreløpige resultatene fra arbeidet vi har lagt ned er meget positivt. Vi har gjort tester, som for noen av nettbutikkene på America-malen, viser stor progresjon mot en meget god pagespeed score.

Slik kan du gjøre nettbutikken din raskere

For at du som butikk skal kunne få ut maks utbytte av arbeidet vi har gjort oppfordrer vi alle som benytter America-malen å iverksette tiltak. Dette omfatter eksempelvis bilder og andre innstillinger som er lagt til under malens designinnstillinger. 

Optimalisere bilder

Slik kan du optimalisere bildene dine: 

1. Sett størrelse på bannerbilder slik indikert i designinnstillingene. Dersom en banner gir deg mulighet å legge inn en egen størrelse for mobil, bruk denne. 

Eksempel: 

2. Bruk jpeg eller jpg i sted for PNG. Dette gjeler fremfor alt produktbilder der det ikke er behov for bruk av PNG. 

3. Bruk kompressor av bilder for å gjøre dem optimaliserte. Dere kan f.eks. bruke https://imagecompressor.com/ eller https://tinypng.com

4. Bruk ikke mer enn 3 bilder for banner A slider. Husk at noen kunder ikke ser mer enn den første uansett. Hvis du kun har en banner så vil siden laste raskere. 

5. Dersom du har "fri frakt-nedteller" slått på i butikken så kan dette bidra til å øke sidens lastehastighet. 

Hvilke innstillinger bør jeg aktivere i designinnstillinger? 

Det er flere ting og innstillinger som kan benyttes for å gjøre nettbutikken raskere. Du finner en del av disse under Design innstillinger > Avanserte Innstillinger > Hastighetsoptimalisering. Her vil du finne ulike settings som kan aktiveres. 

1. Aktivere "Enable theme optimization" under Design innstillinger > Avanserte Innstillinger > Hastighetsoptimalisering. Denne innstilling strukturerer om koden og gir deg den nye oppdateringen. 

2. Aktivere "Use Native Lazy Load" og "Bruk lazy load på produktboks bilder" under Design innstillinger > Avanserte Innstillinger > Hastighetsoptimalisering.