Raskere nettside – Guide for webutviklere

Nettsider skal lastes ned raskt, det er bra for brukerne og verdsettes positivt av søkemotorene. Her får du avanserte tips og triks du kan teste på egne nettsider. Begreper vil bli forklart slik at du henger med.

Hva er lastetid?

Enkelt forklart tiden det tar å laste ned alle elementene som er nødvendig for å vise en nettside i nettleseren ( browser). Når du er koblet til internett og skriver en nettadresse eller klikker på en link på Google begynner moroa! Lastetiden varierer mye avhengig av hvilken hastighet du surfer under. Et hjemmenettverk med fiber går såklart raskere enn 3G på mobilen. Testing med forskjellige hastigheter og enheter bør utføres for å få et komplett bilde. Sjekk nettsiden din med PageSpeed Insights.

Nedskalerte bilder er basic?

Nei, dessverre. Den største bommerten designere og nettredaktører gjør daglig er å laste inn for store bilder. Et eksempel er at man har et flott stort bilde tatt med 10 Megapixels kamera. Fotografiet er igjen klargjort til trykk med CMYK farger og 300 DPI, mens dataskjermen viser RGB farger og  72 DPI ( noen skjermer viser mer, men har ingen synlig effekt på nettsiden).  Med en oppløsning på 3000 x 2000 piksler lastes det opp i et CMS hvor avsatt plass er 800 x 600. Størrelsen på bildefilen er ofte 5 Megabyte, og kunne vært så lite som 75 Kilobyte. Raskt og fikse men vanskelig og opprettholde i de fleste organisasjoner.

Http 1 vs Http2

Kommunikasjonen mellom nettleser og nettsider foregår primært på protokollen HTTP (Hyper Text Transfer Protocol) og for å laste ned .HTML dokumenter ( HyperText Markup Language). Protokollen har regler for overføringene som gjøres, og med dagens Http versjon blir innhold lastet ned i bulker på maks 6 filer. Når dagens Apache og ISS servere blir oppdatert til HTTP versjon 2 vil man kunne få betydelig raskere overføringer, da teknologien ligner på «streaming».  HTTP 2 kan sende alt samtidig og resultatet er overbevisende: https://www.tunetheweb.com/performance-test/

Antall spørringer ( requests) er noe som kan gjøre en forskjell på en rask og treg side. Et godt verktøy å bruke er GTmetrix.com.  Setter du inn en Facebook Page Plugin og en Google Adsense banner ville antallet doblet seg! Har du CSS eller Javascript som kan legges rett inn HTML koden er dette noe som bør vurderes.

Eksterne ressurser

Det er fristende å «hotlinke bilder», laste inne eksterne fonter og scripts på andre domener. Ikke nok med at nettleseren må snakke med en webserver! HTTP spørringer og rundreiser til andre Proxyer og DNS lookups tar unødvendige millisekunder og sekunder fra din lastetid.

Rendering – visning av nettsiden

Uavhengig av filstørrelser og spørringer er det tiltak du kan utføre. Gå til nettsiden din i Chrome, høyreklikk og velg «Vis Sidekilde» – Da ser du hvordan din HTML kode ble lastet ned av nettleseren. Høyreklikk på nytt på nettsiden og velg «Inspiser» – da ser du nettsiden slik den tolkes og vises etter at scripts og andre elementer har tredd i kraft. Se etter .js og andre javascript insertions. Disse filene kan ofte flyttes til Footer i koden.

Har du en fancy slider/bildegalleri kan du ha innstillinger for flytting av script + Lazy load.

For mer avansert lastetid kan du sjekke konseptet «Time to First Byte» – Dette er hvor raskt nettleseren kobler seg mot din webserver/webhotell.