Alt du trenger å vite om nettsider og lastetid
Det er mange grunner til at du vil ha ned lastetiden på nettsiden din. Rask lastetid gjør at du mister færre besøkende, det gir en god brukeropplevelse, og søkemotorene liker det. Resultatet er at siden din kommer høyere opp i søk, som igjen gir flere besøkende og flere konverteringer.
More...
I denne artikkelen, som er del av vår artikkelsamling om søkemotoroptimalisering (SEO), viser vi hvordan du går frem for å optimalisere lastetiden til nettsiden din.
Fakta om lastetid
Lastetid er utvilsomt viktig, uansett om det er snakk om sider som vises på desktop eller om de vises på mobil. Frem til juli 2018 hadde ikke lastetiden for mobil noen virkning på plasseringen i søkeresultatene.
Men slik er det altså ikke lenger, og dersom nettsiden din ikke er optimalisert for mobil, er det på høy tid at den blir det. I følge Google er gjennomsnittlig lastetid for en mobil nettside i dag hele 15 sekunder. Et svært høyt tall, tatt i betraktning at Googles egne tall viser at 53% forlater mobile nettsider som bruker mer enn 3 sekunder på å laste.
For å si noe om hvor effektiv en nettside er til å fange besøkendes interesse, brukes utrykket “fluktfrekvens” (“bounce rate”). Dette tallet forteller hvor mange som kommer inn på en side og går videre, uten å klikke seg videre til en annen side på domenet. I følge Google er det en tydelig sammenheng mellom lastetid og fluktfrekvens.
Fluktfrekvensen øker med 32% hvis lastetiden øker fra 1 til 3 sekunder
Fluktfrekvensen øker med 90% hvis lastetiden øker fra 1 til 5 sekunder
Fluktfrekvensen øker med 106% hvis lastetiden øker fra 1 til 6 sekunder
Fluktfrekvensen øker med 123% hvis lastetiden øker fra 1 til 10 sekunder
Analyser hastigheten til nettsiden
Det første du bør gjøre, er å analysere lastetiden til nettsiden din. Google sier at man bør sikte seg inn på en lastetid under 3 sekunder for mobile enheter, og reaksjonstiden til første byte blir lastet bør være på under 1.3 sekunder. Sistnevnte er tiden det tar fra du sender en forespørsel til webserveren, til du får svar.
Det finnes flere verktøy du kan benytte til å analysere lastetid. Jeg kommer tilbake til de snart.
La oss starte med å definere hva lastetid er. Vi kan nemlig dele lastetid opp i 3 kategorier.
- 1Tiden det tar å overlevere innhold til en enhet, sammen med HTML innpakningen
- 2Tiden nettleseren bruker på å motta forespørsler om å laste nettsiden
- 3Tiden som går fra noen aktiverer lasting av nettsiden, til den er synlig i en nettleser
Når vi snakker om optimalisering av lastetid, så er det i punkt 1 og 2 vi foretar forbedringer. Punkt 3 er måleenheten for resultatet av disse forbedringene.
Dette er de vanligste årsakene til at nettsider er trege
Det kan være mange årsaker til at en nettside laster tregt. De vanligste grunnene er:
For store bilder
Hvis du bruker for store bilder (målt i kB), så påvirker det lastetiden. Du bør derfor alltid komprimere bilder.
Når du komprimerer et bilde riktig, blir filstørrelsen mindre uten at det går nevneverdig på bekostning av bildekvaliteten. Vi opererer med to ulike begrep når vi snakker om bildekomprimering, lossless og lossy.
Lossless
“Lossless” betyr at bildet blir komprimert uten synlig endring for det blotte øye. Med lossless komprimering, blir all data fra originalfilen beholdt.
Lossy
“Lossy” gir bedre komprimering, i form av at filstørrelsen blir enda mindre. I mange tilfeller vil du ikke se forskjell fra originalbildet. Men dette avhenger imidlertid av detaljnivået på bildet, og skjermen det vises på.
Valg av bildeformat
De vanligste bildeformatene på nett er JPEG, PNG og GIF. Til bilder med animasjon, er GIF det vanligste formatet. Når det gjelde PNG vs. JPG, så er det argumenter for og mot begge. PNG gir ofte mindre filstørrelse, og åpner for å ha gjennomsiktig bakgrunn. Mens JPG gir bedre kvalitet hvis du har bilder med mange detaljer. Vår anbefaling er å benytte PNG så langt det lar seg gjøre, siden filstørrelsen er så viktig for lastetiden.
JPG | PNG | GIF |
|---|---|---|
Bilder med viktige detaljer | Tegninger og bilder med tekst | Animasjoner og bevegelse |
Lossy komprimering | Lossless komprimering | Lossless komprimering |
Hvordan komprimere bilder?
Det finnes flere måter å komprimere bilder på. Du kan bruke software som Photoshop, Illustrator, Pixelmator eller Gimp. Det finnes også gode online-løsninger, som toolur,
TinyJPG og ResizeImage.
Litt avhengig av hva slags CMS system du bruker, finnes det ulike løsninger. Bruker du for eksempel WordPress eller Joomla, kan du også bruke ulike plugins.
WordPress
Noen populære plugins er Smush, Shortpixel (vi bruker den), Imagify og Kraken.
Joomla
Image Recycle og PXLCompressor er ofte brukt av Joomla nettsider.
Bruker du en av de større CMS-løsningene, som Hubspot, Sitecore eller tilsvarende, kan bildekomprimering være bygget inn i løsningen.
JavaScript
De fleste moderne nettsider bruker JavaScript. Litt enkelt forklart: Alt innhold som ikke er statisk på nettsiden din, kan inneholde Javascript. For eksempel kart, 3D-grafikk, videoer og klikkbart innhold. Dersom JavaScript ikke blir programmert riktig, kan det senke hastigheten på nettsiden.
Mens HTML lager strukturen på nettsiden, og CSS forteller hvordan noe ser ut (farger, fonter osv.), så gir JavaScript designet liv og bevegelighet.
Når en nettside lastes, sendes det en http-forespørsel til JavaScriptet for å få svar på funksjonaliteten som ligger i koden. Dersom du for eksempel har mange plugins på nettsiden din, kan dette resulterer i mange forespørsler, som igjen øker lastetiden.
Det du ønsker å gjøre, er å samle all JavaScript-kode til en fil, og så komprimere den. Da senker du antall http-forespørsler drastisk, og lastetiden går ned. Det finnes flere måter å gjøre dette på. Du kan bruke online-verktøy som JSCompress, Closure Compiler eller Refresh-SF.
WordPress
Joomla
CSS
CSS forteller hvordan noe ser ut på nettsiden din, og optimalisering av CSS er ganske likt optimalisering av Javascript. Har du mye grafikk på nettsiden, så har du også mye CSS som kan optimaliseres.
Det som skjer i prosessen, er at man fjerner unødvendige mellomrom i koden. Når vi skriver koden, kan det være hensiktsmessig å bruke mellomrom, og fordele koden på flere linjer, slik at det blir oversiktlig å se på. Når koden er ferdigskrevet, og vi ønsker å forbedre lastetiden på en nettside, har vi ikke lenger bruk for mellomrommene. Dette kalles “to minify”.
En annen ting vi også gjør, er å fjerne deler av koden som vi ikke trenger. Ofte kan vi slå sammen flere funksjoner for å spare plass.
Du kan bruke online løsninger som CSS Compressor eller CSS Minifier.
WordPress (samme som under JavaScript)
Joomla (samme som under JavaScript)
Reduser svartiden fra serveren
Avhengig av hva slags webhotell du har, kan responstiden variere. Det er ikke så mye du kan gjøre på nettsiden din for å optimalisere dette. Det avhenger av hva slags server du eller tilbyderen din har.
Det finnes mange alternative webservere. Dersom du bruker en webhotell-tjenester fra Pro Isp, Domeneshop eller Webhuset, så bruker du trolig en Apache- eller en lightspeed-server. Dersom du bruker Apache, og har mulighet til å oppgradere til Lightspeed, så anbefaler vi det. Sistnevnte er betydelig raskere og kan reduserer lastetiden betydelig, spesielt hvis du bruker WordPress.
Lightspeed leverer statisk innhold opptil 5 ganger raskere enn Apache, og dynamisk innhold leveres opp til 40 ganger raskere. I tillegg bruker Lightspeed mindre av serverens ressurser, og har støtte for HTTP/2 og SPDY.
Dersom du har webhotell gjennom CMS eller Marketing Automations-systemet ditt, må du se hva leverandøren din benytter.
Bruk caching
Caching betyr å lagre filer tilknyttet nettsiden din første gang nettsiden lastes, slik at neste person som besøker nettsiden får se en lagret kopi. Ikke av hele nettsiden, men av enkelte filer. På denne måten kan nettsiden lastes raskere for flere besøkende. Alle typer cache har en satt tidsperiode for når de skal fornyes, slik at besøkende får med seg eventuelle oppdateringer. Det finnes flere typer cache.
Browser cache
Med browser cache gis det beskjed til nettlesere om å laste ned og lagre filer fra nettsiden. Typiske filer browsere kan lagre, er html-filer, CSS-style sheets, JavaScript og bilder/video.
Object Cache
Med object cache blir gjentatte forespørsler lagret en viss tidsperiode. Gevinsten ved dette, er at JavaScript og CSS kan lastes raskere, optimalisert eller ikke.
Ta i bruk CDN
CDN står for Content Delivery Network, og er en tjeneste hvor du kjøper lagerplass for kopier av nettsiden din ulike steder i verden. Du har mest å hente på å ta i bruk CDN hvis du har besøkende fra ulike geografiske områder. Det som skjer i praksis, er at når en person fra for eksempel India besøker nettsiden din, så lastes ikke hele nettsiden fra serveren i Norge. Kun filer som ikke kan lagres utenfor serveren. Dette gjør at nettsiden lastes langt raskere enn om hele siden skulle ha blitt lastet fra Norge.
Populære CDN løsninger:
Slik gjør du det i praksis
Som nevnt innledningsvis, finnes det gode verktøy du kan bruke for å optimalisere lastetiden på nettsiden din. Nå skal vi se på de ulike verktøyene, og hvordan du bruker dem. Du trenger ikke benytte alle verktøyene, de gjør stort sett den sammen jobben, men på en litt ulik måte.
Pingdom tools
Pingdom tools analyserer hastigheten på nettsiden din, og gir deg tilbakemelding på hva som senker hastigheten. Du får også vite lastetid og antall elementer som lastes. Gjennom å analysere nettsiden din i Pingdom tools, får du tilbakemelding på hva innholdet ditt består av, og hvor lang tid det tar å laste de ulike innholdselementene.
Når du får testresultatene (det tar bare noen sekunder), så scroll nedover siden til du kommer til “file request”. Der ser du det som kalles et “waterfall”, og som viser hvordan siden lastes. Ved å legge musepekeren over et element, ser du hva som binder opp tid ved lastingen av et element.
GTmetrix
Gtmetrix gjør i prinsippet akkurat det samme som Pingdom tools, men bruker litt andre begreper. Her får du også se en video av hvordan nettsiden lastes. Hvis du registrerer en konto hos GTmetrix, får du til tilgang til utvidet funksjonalitet, som overvåking av nettsider, historikk m.m.
Webpagetest
Webpagetest er muligens vår favoritt. Her får du detaljert informasjon, og nettsider blir lastet flere ganger, slik at du får vite hvordan lastetiden er for både nye og eksisterende brukere. Dersom du ønsker å gå detaljert til verks med hastighets optimalisering, så er det her du får mest data å jobbe med.
Google Speed insights
Google Speed Insights er Googles eget testverktøy. Her får du ikke vite den faktiske lastetiden, men du får en score på hvor godt nettsiden din er optimalisert, basert på Googles kriterier. Google Speed Insights gir deg tilbakemelding på både mobil- og desktop-versjonen av nettsiden din.
Viktig å huske
Uavhengig av hvilke av disse verktøyene du bruker, så ikke heng deg for mye opp i scoren. Det er langt viktigere å se på hva verktøyet sier om den faktiske lastetiden. I noen tilfeller vil du oppleve at du kan få dårlig score, men rask lastetid. Det kan for eksempel være at selv om ikke alle komponentene på siden din er helt optimalisert, så er serveren du bruker så rask at det ikke har særlig betydning for lastetiden. Da er egentlig jobben gjort.
Dersom du prøver ut ulike analyseverktøy, så kan lastetiden variere fordi analysen blir gjort fra ulike steder i verden. Jo lengre bort fra det fysiske stedet der serveren din ligger, jo høyere lastetid vil du oppleve. Som du vil se på de ulike testverktøyene, så kan du legge inn ulike test lokasjoner.
Vår anbefaling er at du tester ut en av de tre første verktøyene og Google Speed Insights. På den måten kan du få tilbakemeldinger fra Google på hvordan nettsiden din fungerer, i tillegg til at du kan få annen innsikt som hjelper deg å optimalisere lastetiden på nettsiden din.
Trenger du hjelp til å optimalisere hastigheten på nettsiden din? Ta gjerne kontakt med oss, så kan vi gi deg noen råd og anbefalinger. Hastighetsoptimalisering er et teknisk arbeid, og det kan være lett for nybegynnere å gå seg bort.