Sådan øger du den oplevede performance og loadtid på dit site (og ikke kun den faktiske load speed)

Sådan øger du den oplevede performance og loadtid på dit site (og ikke kun den faktiske load speed)

Den OPLEVEDE hastighed er den, som rent psykologisk betyder noget for de besøgende på dit site, viser studier. Uanset om dit site loader lynhurtigt eller mindre hurtigt, kan du arbejde med den oplevede hastighed for brugeren. Få 5 konkrete råd til intelligente performanceforbedringer, der øger din konverteringsrate.

Lad os hurtigt slå fast: Loadspeed er et dødsens vigtigt parameter for enhver webshop og website med respekt for sig selv og sine konverteringer.

Se bare denne graf med sammenhæng mellem loadtid og konverteringsrate.

Men load-tiden er langt fra det eneste, der tæller…

Én ting er den faktiske hastighed og loadspeed. En anden ting er den oplevede hastighed og performance, som handler om, hvor hurtigt din bruger tror/opfatter, at dit website er.

Hvad gør det af forskel, tænker du?

Jo, uanset hvor hurtig en loadtid, dit site rent faktisk har, kan du øge brugerens oplevelse af, at dit site reagerer hurtigt.

Det lyder måske som snyd, men det er det lang fra. Det er helt konkrete hacks og designjusteringer, du kan lave på dit site.

Som bekendt forlader kunderne ofte websites/shops, fordi de er for "langsomme". Særligt på mobil er vi grov-utålmodige som brugere. 

Emnet kræver en smule baggrund og et par illustrative eksempler. Det får du her.

Hvordan opleves hastighed af mennesker?

Hollandsk forskning har vist følgende:

  • Handlinger, som er færdige inden for cirka 100 millisekunder, opleves som øjeblikkelige for brugeren
     
  • Handlinger, som tager mellem 0,5 og 1 sekund, opleves som umiddelbare for brugeren. Dette er den normale responstid i mellemmenneskelig interaktion og samtale.
     
  • Handlinger, som tager mellem 2 og 5 sekunder: I dette tidsinterval, som er den normale loadspeed for mange sites, er brugeren stadig koncentreret om opgaven, men har brug for feedback fra sitetfor at acceptere ventetiden og ikke springe fra. 
     
  • Handlinger, som tager mellem 5 og 10 sekunder: Her begynder det at blive svært at fastholde brugeren. Der skal ikke meget til, før de klikker sig tilbage i Googles overblik og finder et andet og hurtigere site at handle på. 

Tre performance-anbefalinger ud fra dette:

  1. Loading af en side skal være umiddelbar
  2. Enhver handling af brugeren, som f.eks. et klik, skal have øjeblikkelig feedback.
  3. Ved enhver handling af brugeren, som tager længere tid end 2 sekunder, skal brugeren have en form for feedback/indikation på, at handlingen er i gang og snart er færdig.

Hvor stor skal performance-forbedringen være, før det giver mening?

Det svarede Ernst Heinrich Weber på allerede i 1834.

Han viste med sin "Just Noticeable Difference"-lov, at der skal en bestemt tidsmæssig forskel til, før vi mennesker lægger mærke til forskellen/forbedringen.

Den lå på mellem 7 og 18 procent, hvilket senere er blevet til 20% reglen.

Så du skal altså skære minimum cirka 20 procent af loadtiden, før brugeren bemærker en positiv forskel.

Loader dit site på 5 sekunder i dag, skal du skære 1 sekund af.

En cykelrytter og et baggagebånd i Houston: Hvorfor er det så slemt at være passivt ventende?

De fleste mennesker foretrækker at være aktive i deres ventetid end passive. 

Faktisk viser forskning, at vi overestimerer vores faktiske ventetid med op til 36 procent, hvis vi er passive/laver ingenting, mens vi venter. 

Derfor begynder vi tit at lave alverdens ting, mens vi venter, for at undgå følelsen af passivitet. Fx at trække telefon op af lommen straks, når vi venter på en bus...

Her er to andre eksempler:

1. Da Chris Froome styrtede i Tour de France 2016:

Da Chris Froome styrtede og ødelagde sin cykel i Tour de France i 2016, rejste han sig straks op og begyndte han at løbe op ad bjerget i sin gule førertrøje, som han død og pine ville forsvare.

Det gjorde han i stedet for at blive og vente på bilen med reservecykler til trods for, at det

  1. er hårdt og skidt for ben og knæ at løbe i cykelsko
  2. koster ekstra kræfter i forhold til at cykle og
  3. er i strid med reglerne i Tour de France.

Men den passive venten og følelsen af tidspilde var værre. 

2. Da klagerne væltede ind over Houston Airport…

I 2009 oplevede Houston Airport et stort antal klager fra rejsende, som syntes, at de skulle vente længe på deres baggage.

Houston Airport var på det tidspunkt en af de hurtigste lufthavne (de brugte i snit 8 minutter) til at få tasker og kufferter frem til baggagebåndet, så de undrede sig.

Det viste sig lidt overraskende, at det handlede om den oplevede ventetid.

Det tog nemlig kun passagererne cirka ét minut at gå fra flyet og hen til baggagebåndene, hvor de så skulle stå stille i 7 minutter, før deres tasker kom.

Løsningen?

Man gjorde tingene værre...

Lufthavnen ændrede stisystemet fra flyet og hen til baggagebåndet, så det tog passagererne længere tid at gå derhen. Dermed blev den oplevede ventetid på baggagen reduceret markant og klagerne forsvandt.

Den reelle tidsbesparelse for passagererne? Ingen.

Den oplevede tidsbesparelse: Stor.

Hvad kan du lære af Froome og Houston?

  1. Hold så vidt muligt brugeren i en "aktiv tilstand" på dit site/shop
  2. Få den passive venten til at føles hurtigere

Herunder får du de konkrete performance-råd til at holde brugeren i en aktiv tilstand og på ventetiden til at føles hurtigere:

Hold brugeren i aktiv tilstand

Ved en umiddelbar ventetid på mere end 1 sekund kan det være en fin ide at vise brugeren, at handlingen er i gang. Det kan være spinners, progress bars osv. 

Eksempel på spinner til at vise ventetid:

MEN: Undgå at signalere ventetid, når det ikke er nødvendigt.

Vi ser meget ofte spinners brugt på alt, som loades asynkront. Hvis din loadtid er under ét sekund, så har det ofte den modsatte effekt: Du fortæller brugeren, at de venter og river dem ud af deres aktive og ”ufarlige” ventetilstand. Det er unødvendigt.

Performance-råd 1: Tilføj en “Active State”-effekt på knapper

Nedenstående er en af de nemmeste ting, der kan gøres, men som vi desværre ser alt for tit, ikke bliver gjort.

Ved at tilføje et ”:active state” til knapper, så giver knappen feedback og kommunikerer til brugeren, at den har forstået den ønskede handling og er ved at udføre den.

Vi er nede at pille ved millisekunder her, men det virker og har en stor effekt for brugerens oplevelse af ventetid.

For endnu større effekt af active state se også ”Performance-råd 3” længere nede på siden.

Performance-råd 2: Udfør ”optimistiske handlinger”

En optimistisk handling betyder, at dit site tillader en øjeblikkelig respons på en handling, fordi vi kan forvente, at det går godt, SELVOM handlingen egentlig behandles af systemet behind the scenes.

Dermed holdes brugeren i en aktiv tilstand, fordi feedbacken ikke lader vente på sig.

Herunder er et eksempel med et Instagram-post, som det ville fungere MED og UDEN optimistiske handlinger. Hjertet bliver rødt, hhv. før og efter, at handlingen er behandlet af det bagvedliggende system.