Hastighetsoptimalisering

Skap mer trafikk med raskere nettløsninger

Optimalisering av hastigheten på webløsninger handler i utgangspunktet om å skape de beste forholdene for at et nettsted kan presenteres for mottakeren effektivt og raskt. Hastighet og ytelse er viktige KPI-er i konkurransen om å vinne og beholde kunder digitalt.

  • Klassens beste hastighetsoptimalisering av nettsteds- og nettbutikkløsninger
  • Optimal brukeropplevelse basert på personalisering og data
  • Ingen siloer, full gjennomsiktighet, høyere relevans, mindre støy og større avkastning
Skap mer trafikk med raskere nettløsninger

Hastighets- og ytelsesløsninger

Lang innlastning er et konverteringsdrap, men er sannheten virkelig mer nyansert? Brukere forventer i økende grad at bedrifter og merkevarer skaper gode kundeopplevelser. Det er viktig at nettstedets hastighet er på topp, slik at kundene får best mulig brukeropplevelse på nettstedet.

Løsninger som fungerer dårlig, har lang respons og lastetid kan være en irritasjon, noe som får store konsekvenser for brukeropplevelsen. Ettersom den digitale shopping-atferden i både forsknings- og kjøpsfasen flyttes til mobilen, er brukerscenariet annerledes enn før, der det fant sted på et skrivebord. I dag foregår flere av fasene på kundereisen på mobilen der skjermen er fysisk mindre, navigasjonen foregår bare med fingrene og forbindelsen til nettverket kan utfordres av dårlig wifi eller mangel på signal. Denne utviklingen krever derfor at selskaper ikke bare tenker mobil først i UX-design, men også i ytelse og hastighetsoptimalisering.

Nettsidehastighet er kundens første inntrykk av virksomheten din, og derfor er nettstedets ytelse unektelig avgjørende for din virksomhet. Lang innlastning er konverteringsdrap, men er sannheten virkelig mer nyansert?

Hastighets- og ytelsesløsninger
Faktisk hastighet på nettsteder

Faktisk hastighet på nettsteder

Google har trent nevrale nettverk gjennom maskinlæring med større datasett om konverterings- og fluktfrekvensmønstre på tvers av Google Analytics-kontoer. Studien viser at det er opptil 91% forskjell i bouncerate fra 1-3 sekunders innlastning til 1-10 sekunders innlastning.

Hastighetsoptimalisering er delt inn i to: faktisk hastighet og opplevd hastighet. Faktisk hastighet er den tiden nettstedet tar fra det tidspunktet den klientens nettleser sender et spørsmål til webserveren til webserverens svar er mottatt og gjengitt av klientens nettleser. Alle websider inkl. bilder, scripts, tekster, video osv. sendt fra webserveren tilbake til klienten og lastet ned av mottakeren.

Ved å sende så få HTTP-forespørsler som mulig, og komprimere og redusere filene, i tillegg til å velge å hente innhold fra webservere som er fysisk nærmere klienten, kan vi optimalisere den faktiske hastigheten, dvs. tiden det faktisk / teknisk tar fra klientsøket på en URL for alt innhold som skal lastes ned og vises. Ved å kontrollere rekkefølgen på hvilke filer du skal laste ned først og hvilke som skal utsettes, kan hastigheten økes kontekstielt.

Faktisk hastighet måles i TTFB og indikerer tiden det tar for brukeren å motta den første byten med data. TTFB optimaliseres ikke bare ved å minimere antallet eller størrelsen på ressursene som skal lastes ned, men også i stor grad ved en optimal konfigurasjon av webserveren.

Opplevd hastighet på nettsteder

Opplevd hastighet handler om å skape de optimale forholdene for at brukerne skal få en opplevelse som nettstedet lastes raskt inn. Selv om den faktiske hastigheten ikke nødvendigvis er lav, kan den oppfattede hastigheten godt være det. Således kan oppfattet hastighet, i motsetning til faktisk, ikke kvantifiseres på få sekunder, men handler mer om subjektiv oppfatning.

Større plattformer som Amazon og Facebook, som brukes globalt av milliarder brukere hver dag og leverer ufattelige mengder data, er å optimalisere brukernes opplevde hastighet like viktig som faktisk hastighet. Selv om optimalisering av den faktiske hastigheten og reduserte ressurser reduserer ventetiden, skaleres den dårlig. Flere brukere og kunder betyr flere samtaler til serveren, som belastes i større grad.

Facebooks Feed er et tydelig eksempel på at UX-optimalisering av brukernes opplevde hastighet kan bygge bro over gapet til bedre ytelse og skape en bedre opplevelse, og dermed opprettholde og sikre bruk av plattformen. Facebooks Feed er dannet i sanntid med maskinlæring, for deres ca. 2,5 milliarder kroner månedlige brukere. Det krever serverkapasitet og ved toppbelastning er det press på ressursene som skaper ekstra lange lastetider for brukerne. Men ved å implementere UX-tiltak kan den oppfattede hastigheten optimaliseres.

Lazy loading er en metode for å optimalisere den oppfattede hastigheten ved hjelp av asynkron lasting av ressurser. Det fungerer ved å laste ned bilderessurser på nettstedet utsatt fra sidelast til det faktum at de faktisk skal brukes oftest når brukeren ruller og bildet er synlig i nettleservisningen. Dette gjør det mulig å laste inn serveren mindre når brukere besøker nettstedet, og det oppstår derfor færre HTTP-forespørsler.

I tillegg til lat belastning, kan progressive JPEG-bilder også bidra til en bedre brukeropplevelse og raskere opplevd hastighet. Det skilles mellom baseline JPEG og progressiv JPEG, hvor den avgjørende forskjellen er i måten bildet komprimeres på. Baseline JPEG lastes inn for brukeren i nettleseren en linje om gangen fra topp til bunn, mens progressiv JPEG viser bildet utydelig i sin helhet umiddelbart. Bildet lastes inn ved å laste ned flere og flere piksler, noe som gjør bildet skarpere.

Opplevd hastighet på nettsteder
Optimalisering av content

Optimalisering av content

Ofte kan optimalisering av innholdet på et nettsted begrense antall megabyte som brukeren må laste ned for å gjengi og bruke nettstedet. Optimaliseringstiltakene som ofte skjules er basert på riktig bruk av bilder, skrifttyper og filer.

Webfonter bør lagres lokalt og hentes fra samme server som nettstedet, i stedet for eksternt ved å koble til en tredjepartsserver. I tillegg skal skript som bruker nettfonter alltid konfigureres for å laste inn stilene som brukes av nettstedet. Ofte er alle stiler eller vekter lastet inn, noe som krever flere filer og større pakker, noe som unødvendig legger ekstra til mengden ressurser som skal lastes ned. Ofte dekker maksimalt to forskjellige skrifter med maksimalt tre stiler for hvert de aller fleste behov for imøtekommende webdesign. Likevel ser vi ganske ofte at nettsteder vi jobber med i utgangspunktet inneholder for mange nettfonter, som er lastet inn men ikke vises, og at disse bruker 5+ stiler, noe som reduserer hastigheten på nettstedet.

Å bruke riktige filformater og bildestørrelser på nettstedet er avgjørende for optimal ytelse. Riktig bruk av filformater betyr at riktig filtype brukes til formålet med bildene. Det er betydelige forskjeller mellom de mest brukte formatene JPG, PNG og SVG, som hver har unike fordeler.

JPG / JPEG

Er et lossy-format, som betyr at bilder i JPG er komprimert. JPG som filformat for bilder er effektivt for å kunne inneholde store mengder forskjellige farger der det ikke er skarpt avgrensede linjer, noe som gjør formatet mindre brukbart for å inneholde tekst. JPG brukes ofte til fotografier eller grafikk med en stor mengde relaterte og forskjellige farger, der data kan lagres ved å miste data og informasjon når bildet komprimeres. Det vil ofte være miljøbilder, produktbilder, bakgrunnsbilder osv. JPG kan ikke inneholde gjennomsiktige områder.

PNG

Omvendt er et tapsfritt format, noe som betyr at komprimering ikke finner sted. Derfor er to identiske bilder / grafikk i JPG og PNG veldig forskjellige i filstørrelser. I motsetning til JPG, er PNG ideell for grafikk og bilder med færre farger som også kan inneholde gjennomsiktige områder og gjengi skarpe linjer som tekst, feilfritt. Brukes ofte til infografikk, ikoner osv.

SVG

Er vektorbasert grafikk der filformatet er spesielt egnet for grafiske elementer som måles. For eksempel, ikoner på nettsteder som må skaleres og vises i forskjellige størrelser på stasjonær, nettbrett og mobil, men som fremdeles virker knivskarpe. Siden SVG er vektorbasert, fyller SVG vanligvis “bilder” mye mindre i filstørrelse, ettersom grafikken består av koordinater / punkter og fargeinformasjon.

I tillegg er det viktig å ta en aktiv posisjon til hvilken oppløsning bildene lagres i. Vi ser ofte at bilder blir lastet opp i for høye oppløsninger i forhold til hvordan de vises på nettstedet – som sprenger ressursene i forhold til ytelse. Som utgangspunkt bør oppløsningen alltid matche den høyeste oppløsningen der bildene vises på nettstedet. Å redusere et stort bilde med CSS, for å vise bare en mindre versjon, er bortkastet ressurser. Oftest vil den største varianten vises i desktopversjonen av nettstedet.

Analyser din

nettside gratis

    VÅR

    PROSESS

    Slik er prosessen vår på oppdrag
    av SEO-optimalisering.

    01
    Research/Analyse
    02
    Idéer/Oversikt
    03
    Optimalisering
    04
    Mål truffet
    NYESTE

    INNLEGG

    SEO Partner sin blogg er full av gode
    tips og nyheter rundt SEO og mer.