Full fart: 5 strategier for en lynrask nettside 

Det stilles stadig større krav til nettsider når det gjelder lastetid og opplevd fart. Enhetene vi bruker blir raskere og raskere, og brukerne blir mer og mer utålmodige. Lastetiden på en nettside har stor innvirkning på sidevisninger, kundetilfredshet og konverteringsrate. I tillegg er fart en viktig bidragsyter til plasseringen i søkeresultater.

For å levere en nettside som er rask nok, må man legge til rette for optimalisering i alle ledd, helt fra serverens hardware til brukerens nettleser. I denne artikkelen presenterer vi noen av strategiene vi benytter for å levere nettsider som innfrir dagens strenge krav til hastighet og ytelse:

1. Infrastruktur og programvare

En nettside er aldri raskere enn sitt svakeste ledd. Derfor er det viktig at underliggende programvare og hardware er oppdatert. 

De aller fleste serverleverandører har i dag moderne hardware og raske nettverk. Dersom nettsiden har avansert funksjonalitet kan det lønne seg å bruke en server med raskere prosessor. Er det mange store filer, og mye som skal leses og skrives fra disk, er det anbefalt å bruke en SSD (Solid-state drive), som er mye raskere enn en tradisjonell harddisk. 

SSD er en type lagringsenhet som er raskere, mer pålitelig, mer holdbar og stille sammenlignet med en tradisjonell harddisk (HDD). Den er en viktig del av moderne datateknologi og brukes i alt fra bærbare datamaskiner til stasjonære datamaskiner og servere for å lagre data og programmer.

For å oppnå raskest mulig fart, er det også viktig at webserveren og programvaren som nettsiden kjører på er oppdatert og riktig konfigurert. Nye versjoner av programmeringsspråk, databaser og serverprogramvare kommer ofte med forbedret ytelse. Derfor er det å oppdatere til de nyeste versjonene en enkel måte å skvise ut litt mer fart på. I tillegg må serveren konfigureres for å håndtere ting som caching, load balancing og filkomprimering, med mindre man bruker en CDN. Dette kommer vi tilbake til i et senere punkt.

Når serveren er riktig konfigurert, har vi et godt utgangspunkt for videre optimalisering.

Les mer: Dette bør du gjøt før du starter prosessen med ny nettside

2. Optimalisering av bilder

Bilder er fantastiske virkemidler for å skape riktig stemning eller kommunisere avanserte konsepter. Her er det viktig å balansere visuell kvalitet og ytelse. Store bildefiler tar lang tid å laste, og er en av hovedårsakene til at mange nettsider laster tregt.

Heldigvis finnes det mange grep du kan ta for å optimalisere bilder for web. Kombinerer du disse, vil du kunne bruke bilder på nettsiden uten at det går utover ytelsen.

• Velg riktig filformat: Tradisjonelt sett er det JPEG og PNG som har vært de mest brukte filformatene. De siste årene har det kommet til filformater utviklet spesifikt for bruk på nett. Et av de mest populære er WebP. Et WebP-bilde vil være 25-35% mindre enn en tilsvarende JPEG-fil.
• Komprimer bilder: Ved å fjerne unødvendig data fra en bildefil, kan filstørrelsen reduseres. Dette kan for eksempel være å lagre piksler som har lik farge på en mer effektiv måte, fjerne metadata, eller droppe detaljer i bildet som vi ikke legger merke til at blir borte. Mange publiseringssystemer har dette innebygd, men det finnes flere nyttige verktøy for å komprimere bilder manuelt. ImageOptim eller TinyPNG er populære eksempler på slike verktøy.
• Bildeskalering: En nettside skal vises på alt fra høyoppløste TV-skjermer til små mobilskjermer. For å få optimal balanse mellom filstørrelse og kvalitet, bør bildefilen ha tilnærmet samme størrelse som det skal vises i nettleseren. Heldigvis kan moderne nettlesere hjelpe med dette. Dersom vi genererer versjoner av et bilde i ulike størrelser, kan vi sende disse til nettleseren, og den vil velge den versjonen som passer best for brukerens skjerm. Dermed vil de som bruker store skjermer få skarpe bilder, mens brukere med mobiltelefoner vil få en mindre versjon som laster raskere.
• Bruk lazy loading: Lazy loading er en teknikk hvor man ikke laster bilder før de skal vises på skjermen. I praksis betyr det at bilder som er lenger nede på siden ikke lastes inn før man scroller dit. Dette gir en mye raskere sidelasting, og man slipper å laste inn bilder som brukeren ikke kommer til å se.

Vårt beste tips er å sette opp publiseringssystemet til å automatisk konvertere, komprimere og generere ulike versjoner av alle bilder du laster opp. Da slipper du å tenke på det, og vil kunne nyte forbedret ytelse. 

3. Kodeoptimalisering

For at en nettside skal bli så rask som mulig, må koden som kjører den være effektiv. Hvordan man optimaliserer kode er i stor grad avhengig av funksjonalitet, og hvilke programmeringsspråk og kodebibliotek som blir brukt. Heldigvis finnes det noen generelle tips som kan brukes overalt:

• Optimalisering av funksjoner: Ineffektiv kode kan gjøre at siden laster tregere. Dette gjelder spesielt sider som gjør mange operasjoner på mengdedata før den skal vises. Her kan det være en del å hente på å optimalisere koden.
• Unngå tidkrevende forespørsler: Å hente data fra en database eller et eksternt API tar tid. Derfor bør du unngå dette i så stor grad som mulig. En mulig optimalisering kan være å slå sammen to databasekall, slik at man kan sende én forespørsel istedenfor to. Man kan også mellomlagre resultatet slik at man slipper å etterspør samme data flere ganger.
• Kjør tidkrevende forespørsler asynkront: Dersom man ikke kan unngå en tidkrevende forespørsel, kan man kjøre den etter at resten av nettsiden er lastet inn. Dette er spesielt nyttig dersom funksjonaliteten som er støttet av forespørselen ikke er hovedfunksjonalitet på siden. Et tips her er å bruke en indikator som viser at innholdet er i ferd med å laste inn, slik at brukeren ser at noe skjer.
• Send minimerte og komprimerte filer fra server: På samme måte som man kan redusere filstørrelsen på et bilde ved å fjerne unødvendig data, kan man fjerne unødvendige tegn og mellomrom i kodefiler, for at de skal bli mindre. Dette kalles minimering, og gjøres ofte med Javascript- og CSS-filer som skal brukes på nettsiden. Man kan også bruke komprimeringsteknikker som gzip og brotli for å redusere filstørrelsen enda mer. Da vil filene som sendes fra serveren til brukerens nettleser bli mindre, noe som resulterer i raskere overføringstider.

Les mer: Slik bygger du en god nettside

4. Caching

Caching er en av de mest effektive måtene å øke den opplevde farten til en nettside på. Når vi bruker caching, mellomlagrer vi resultatet av et database- eller API-kall, eller en forespørsel, slik at vi kan gjenbruke det helt frem til den underliggende dataen endrer seg. Vi skiller mellom to typer caching for nettsider: Browser caching og server caching. 

Moderne nettlesere har blitt svært gode til å unngå unødvendig lasting av innhold og filer. En nettleser vil for eksempel automatisk mellomlagre Javascript-filer, CSS-filer og bilder lokalt på enheten, slik at de ikke trenger å lastes igjen. Ulempen med browser caching er at dette først trer i kraft når en bruker besøker siden for andre gang.

For å kunne servere raske sider også til brukere som besøker siden for første gang, benytter vi oss av server caching. Når en bruker forsøker å laste en side, vil publiseringssystemet ofte hente innhold fra en database eller ekstern tjeneste, generere en HTML-fil basert på innholdet, og sende den tilbake til brukeren. Databasekall og API-kall kan være tidkrevende. Resultatet av kallene kan mellomlagres og sendes direkte til brukeren. Dette går mye raskere enn å måtte utføre dem hver gang en bruker laster siden. 

For å optimalisere enda mer, kan vi benytte oss av såkalt statisk caching. Istedenfor å mellomlagre resultatet av databasekall og API-kall eller utregninger, kan den genererte HTML-filen lagres. Så lenge det underliggende innholdet ikke er endret, er det ingen grunn til å spør etter det flere ganger. Serveren vil kunne generere HTML-koden første gang noen besøker en side. Alle andre brukere som spør etter siden, vil få tilsendt HTML-filen direkte. Dette vil kunne føre til en kraftig reduksjon i lastetiden, avhengig av hvor mye jobb serveren må gjøre for å bygge HTML-koden første gang.

5. CDN

En CDN, eller Content Delivery Network er en tjeneste som kan brukes til å distribuere innholdet ditt fra ulike servere rundt om i verden. Du sender filene til nettsiden dit, og så blir de kopiert over til servere som er skreddersydd for å levere nettsider. Dette gir mange fordeler, også når det gjelder ytelse:

• Raskere responstid: Fordi en CDN plasserer kopier innholdet på flere servere rundt om i verden, vil forespørsler fra en bruker gå til den serveren som er nærmest. Kortere fysisk avstand betyr raskere responstid.
• Ytelse ved høy trafikk: Fordi det er flere servere som håndterer forespørsler, vil en CDN kunne håndtere perioder med økt trafikk ved å fordele forespørslene, noe som sikrer jevn ytelse.
• Optimalisering for ulike typer innhold: CDNer er laget for å levere ulike typer innhold på en rask og effektiv måte.

I tillegg til å hjelpe på ytelsen, har en CDN også andre fordeler, som forbedret sikkerhet og sikring mot nedetid.

Ytelse er nøkkelen til suksess

Hastigheten på nettsiden er avgjørende for brukeropplevelsen. En rask nettside fører til mer fornøyde brukere, bedre plassering i søkeresultater, og flere konverteringer. Ved å benytte deg av strategiene over, vil du kunne ta din nettside til et helt nytt nivå når det gjelder fart.

Husk også at optimalisering er en kontinuerlig prosess. Det dukker stadig opp nye måter du kan skvies ut det lille ekstra på. For å se hvordan du ligger an i dag, kan du sjekke nettsiden din med analyseverktøy som Google PageSpeed Insights eller GTmetrix.

Våre team benytter seg av disse strategiene hver dag, og vi vil gjerne hjelpe deg. Ta kontakt med oss dersom du har spørsmål, eller ønsker å implementere disse strategiene på din nettside.