Du trenger en mobiltilpasset nettside om du ønsker å være konkurransedyktig i dagens marked. Forskning viser at hele 63 % av alle nettsidebesøk kommer fra en mobil enhet. Hvis siden din ikke er god nok, så utelukker du halvparten av brukergruppen din.

Én ting er at siden din skal se pen ut på små skjermer. Den må ha en egen mobilmeny, og designelementene må flyte i riktig rekkefølge når det ikke er nok plass i bredden. I tillegg må typografi og bilder være tiltenkt mobile enheter.

Like viktig er det at siden laster raskt. Visste du at nesten halvparten av alle som besøker en nettside forventer at den laster i løpet av 2 sekunder? I tillegg vil 40 % forlate siden din uten å bry seg om innholdet om det tar mer enn 3 sekunder før det kommer noe på skjermen.

Da sier det seg selv at du må ha en mobiltilpasset nettside for å holde på kundene dine.

Test hastigheten på nettsiden din

For å finne ut hvor god din nettside er på mobil, så må du gjøre litt testing. Dette er ikke vanskeligere enn å bruke Google sitt verktøy Test My Site. Skriv inn din URL og la verktøyet fortelle deg hvor raskt siden laster, og hva du kan gjøre for å forbedre den.

Bruk også Pingdom sin Website Speed Test for å se hvilke filer som bruker lang tid på å laste. Her kan du velge den serveren som er nærmest din målgruppe. Har du for eksempel en norsk nettside, så velger du en server i Europa. Verktøyet viser deg hvor stor del av forsinkelsen som kanskje kommer fra din nettsideleverandør, og hvor stor del som kommer av dårlig optimaliserte bilder og kodefiler.

Utvikle nettsiden for mobil først

Når du vet hvor problemene ligger, så er det flere ting du kan gjøre for å forbedre mobilopplevelsen. Det ene er selvsagt å passe på at du har designet for mobil først. Kort forklart så betyr dette at du utvikler siden for å fungere godt på mobil, for deretter å tilpasse den til større skjermer.

Det har seg nemlig slik at mobiltelefonen må laste inn alle filene som hører til et nettsidedesign, for deretter å gå gjennom for å se hvilke «regler» som passer til skjermstørrelsen. Hvis mobiltelefonen først må sortere seg gjennom mange regler som kun gjelder for store skjermer, så vil lastingen av siden ta lenger tid. Bruk derfor @media-regler i CSS-filene dine for å tilpasse siden til store skjermer, og la alle «grunnreglene» i filen være tilpasset mobil.

Optimaliser alle bilder på siden

For at siden skal laste raskt, så må du passe på at bildefilene ikke er for store. Bruk JPEG på alle bilder som ikke krever gjennomsiktighet. Juster også ned oppløsning og kvalitet så langt det lar seg gjøre uten at bildet blir synlig dårligere. Jo lavere filstørrelse, jo bedre.

Det finnes også noen nyere filformater med bedre komprimering som du kan bruke. Da må du bare huske på å legge inn et såkalt «fallback image» i vanlig format for nettleserne som ikke støtter de nyere filtypene.

Last alle bilder så sent som mulig

I tillegg til at bildefilene bør være så små som mulig, så bør alle bilder lastes så sent som mulig. Dette betyr at et bilde som ikke er synlig på skjermen idet siden lastes, ikke trenger å bruke ressurser. Det er først når brukeren ruller ned til bildet at mobilen eller datamaskinen skal bruke tid på å laste det inn. Dette kalles «lazy loading», og kan gjøre mye for hastighetsopplevelsen på nettsiden din.

Unngå såkalt «render blocking»

Det er viktig for brukeren at det kommer noe på skjermen så raskt som mulig. Likevel er ikke dette alltid tilfelle. Du har kanskje selv opplevd den irriterende følelsen av en side som laster og laster, men fortsatt er helt hvit. Vi er utålmodige, og dette gir en negativ opplevelse.

Grunnen til at dette skjer er at nettleseren prøver å laste inn alt den trenger for at siden skal vises før den begynner å tegne ting på skjermen. Dette kalles «render blocking», og er noe du bør unngå.

For eksempel kan du utsette lasting av alle kodefiler og skript som ikke er nødvendig for det som vises på skjermen idet en side laster. Prioriter lasting av det første brukeren ser, for deretter å laste resten av siden.

Det er veldig dumt å la en bruker vente lenge på at noe skal vises på skjermen bare fordi du må laste en hel masse animasjoner, analyseskript og CSS-filer som ikke engang er i bruk før man har rullet langt ned på siden.

Bruk et solid caching-system

Mange nettsider i dag genereres på serveren i det brukeren kommer inn på siden. Dette betyr at serveren må bruke tid på å lage siden for hver bruker. Ikke bare er dette ineffektiv bruk av ressurser, men det gjør også brukeropplevelsen dårligere. En side laster mye raskere om den allerede er generert og klar til sending.

Du oppnår dette ved å bruke et såkalt caching-system. Dette er et system som genererer enkle filer som legges et eget sted på serveren. Når en bruker kommer inn på en side, så sendes disse filene umiddelbart til brukeren uten at serveren trenger å lage dem på nytt.

Et slikt system kan øke hastighetsopplevelsen betraktelig. Vi har for eksempel slike systemer på plass for våre kunder som både inkluderer «lazy-loading», bildeoptimalisering og generering av enkle filer som laster raskt.

Hvis du trenger hjelp til å gjøre din nettside mobilvennlig, så er det bare å ta kontakt med oss!