Hvordan optimalisere hastigheten i nettbutikker på America-malen

Denne hjelpeartikkelen handler om hvordan du kan jobbe for å optimalisere hastigheten i en nettbutikk som bruker designmalen America.

Hastigheten i nettbutikken din har postiv 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 butikk 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 en 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 ting. Prinsippene vi har jobbet etter kan den mer teknisk interesserte lese mer om på web.dev/vitals.

De foreløpige resultatene fra hastighetsarbeidet vi har lagt ned er meget positivt. Vi har gjort tester som for noen av nettbutikkene som kjører på America-malen viser at de har gjort store byks mot en meget god pagespeed score.

SLIK KAN DU GJØRE NETTBUTIKKEN 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, oppsett og nye innstillinger som er lagt til under malens designinnstillinger. 

Optimalisere bilder

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. bannerstørrelse

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? 

NB! Dersom du har fått utført mye spesialtilpasninger i din nettbutikk anbefaler vi at du tar kontakt med kundeservice@mystore.no før du begynner arbeidet med å endre på designinnstillingene nevnt under.

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. Screenshot 2020-12-07 at 13.14.21

2. Aktivere "Use Native Lazy Load" og "Bruk lazy load på produktboks bilder" under Design innstillinger > Avanserte Innstillinger > Hastighetsoptimalisering. Screenshot 2020-12-07 at 13.17.41

 

Se også artikkelen Avansert banner-optimalisering for ytterligere tiltak du kan gjøre for å øke hastigheten i nettbutikken.