Hastighedsoptimering er og bliver en af de vigtigste elementer når man snakker om at øge brugeroplevelsen på sit website.
I den moderne verden har folk ikke tålmodig til at vente på et langsomt website. Et langsomt website vil uden tvivl have en højere frafaldsprocent og dårligere konverteringsevne end et hurtig website. Meget af hastighedsoptimeringen gøres i serverens indstillinger, det kunne være gzip-komprimering, cachelagring og minification. Andre gange er det onsite elementer som store billeder, som skal skaleres og komprimeres for at hastigheden på websitet er tilfredsstillende. Når disse elementer er på plads og man har en nogenlunde hastighed, kan man begynde at kigge på prefetching og prerendering.
Forudse dine besøgendes vaner
Prefetch og prerender handler om at forudse hvor ens besøgende klikker hen, når de har besøgt din side. Ved hjælp af disse tags, kan man fortælle browseren at den skal begynde at loade elementer fra den næste side, allerede inden brugeren har trykket på noget. Når brugeren så endelig klikker ind på forudsete underside, så vil siden være klargjort og loades derfor ekstrem hurtigt.
Kan man forudse sine brugers færden, er det derfor muligt at forberede hvert enkelt klik og levere øjeblikkelige resultater til dem. Det øger UX og gør får dine besøgende til at blive længere på din side, hvilket i teorien vil øge din konverteringsrate.
Der er tre anbefalesværdige metoder at forberede sine undersider på:
1. DNS-Prefetch
2. Prefetch
3. Prerender
Disse HTML-tags kan indsættes i sidernes <head> og kan bruges til klargøre enkelte elementer eller hele undersider.
DNS-prefetch
Når en side skal læses af en browsers, skal den først koble sig til undersidens lokation via et DNS-lookup, det er sådan browserne finder sider på internettet.
Med DNS-prefetch fortæller man browseren, at der er nogle elementer fra en bestemt URL, som vi skal bruge senere. Man laver altså DNS-lookup på den bestemte URL inden brugeren klikker ind på den. Dette er den mindste form for prefecting som man kan lave, men den tager næsten heller ikke på hverken CPU kræfter eller båndbredde.
<link rel=”dns-prefetch” href=”https://eksempel.dk/eksempel”>
Prefetch
Med prefetch fortæller vi browseren, at den skal anmode og downloade et element eller en underside og gemme den i cachen. Dette kan have store performance fordele, hvis man bruger det på fx fonts. Fonts skal nemlig stå og venter på at DOM er helt genereret før de overhovedet begynder at blive downloadet. Så hvis du har problemer med dine fonts sløver rendering af dine undersider, kan dette anbefales.
Benytter man prefetch på en hel underside, så har browseren downloadet og cached alle elementer på siden. Det betyder, at når brugeren endelig klikker ind på siden, er alle elementerne klar til at blive renderet og vist til brugeren. Dette kan tydelig mærkes på indlæsningshastigheden når der klikkes.
<link rel=”prefetch” href=”https://eksempel.dk/eksempel”>
Prerender
Den ultimative metode på at komme sine brugere i forkøbet er Prerender. Med prerender downloader man en hel underside med dens ressourcer, generer DOM, indsætter CSS og udfører JavaScript. Igen, alt dette, inden brugeren overhovedet har klikket ind på siden.
Forestil dig, at du når siden er loaded, åbner en usynlig fane i din browser, hvor den næste side du vil trykke på er loadet og renderet. Når du så klikker ind på siden, vil den blive vist i samme øjeblik, fordi du allerede har renderet siden.
Denne løsning tager dog meget på CPU-kræfter og båndbredde, så den skal ikke overudnyttes, eftersom det vil betyde at du indlæser flere underside når du tilgår en enkelt.
<link rel=”prerender” href=”https://eksempel.dk/eksempel”>
Hvordan kommer man foran sine brugere, tænker du så?
Det kan ske du har en underside, som ligger op til at folk tilgår en login-side eller en søgeside, hvor den næste logiske valg, ville være at tilgå den side. Hvis ikke du har et indlysende flow igennem dit site, kan du søge hjælp i Google Analytics.
Under adfærd → Brugerflow, kan man se hvordan ens besøgende klikker videre fra sine undersider. Her et eksempel på en forside, hvor man kan se de undersider folk klikker på efter at være landet på forsiden.
Med denne information i baghånden, kan man komme med kvalificerede gæt til, hvor ens besøgende vil klikke sig hen, prefetche eller prefendere dem for at severe en sublime hastighed.
Datadrevet UX på dit website
Kunne det ikke være vildt, hvis man kunne benytte en form for AI for at forudse, hvor ens brugere ville gå hen, når de tilgik en side? Det kan du med guess.js.
Guess.js benytter Google Analytics API’en til at hente data fra din Google Analytics. På baggrund af dit websites data indsættes dynamisk <link rel=”prefetch” href=”/eksempel.html”> til de underside som dine brugere har vist de klikker på efter at besøgende de enkelte undersider.
Du benytter altså dit websites eget data til at forudse, hvor dine brugere klikker hen. Ændrer tendens sig på dit site, måske på grund af nye undersider eller struktur, så udskifter guess.js selv dine prefetches til at matche den nye tendes. Størstedelen af dine besøgende vil derfor opleve en performance uden lige, hvilket er noget af et UX boost. Guess.js er dog stadig i alpha, men open source, så alle kan være med til at udvikle på det.
Google benytter prerender til top resultater
Google Search har i nogle år selv benytter prerender til de topresultater som modtager en betydelig mængde kliks for søgeresultaterne.
Goolge ønsker at have den ultimativ bedste platform, og det giver derfor god mening, at når en undersider opnår en høj CTR for et søgeord, så prerendere Google det resultat, så det kan leveres lynhurtig til brugerne.
Det skal siges det ikke er nok blot at have et top resultat i Google, det kræver også at resultatet har en noget højere CTR end det næste. Hvor meget CTR man som resultat skal have for at blive prerenderet af Google vides i skrivende stund ikke.
Opsummering
Ved at forudse dine besøgende færden på dit website, kan du med prefetch og prerender sikre dine besøgende en lynhurtig oplevelse og en enestående brugeroplevelse. Brug Google Analytics som værktøj til at forudse dine besøgende færden. Er du ude i en website opdatering, kan du overveje om guess.js kunne være noget du ville kaste dig over.