NYT: Tech i Marketing – Fremtidens teknologi præsenteret af branchens mest innovative personer – se alle interviews her

Hastighedsoptimering

Skab større omsætning med hurtigere webløsninger

Optimering af webløsningers hastighed handler grundlæggende om, at skabe de bedste forudsætninger for, at et website effektivt og hurtigt kan præsenteres for modtageren. Hastighed og performance er en helt afgørende forretnings-KPI i konkurrencen om at vinde og fastholde kunder digitalt

Best-in-class teknisk hastighedsoptimering af website- og ecommerce løsninger
Optimal brugeroplevelse med afsæt i personalisering og data
Ingen siloer, fuld transparens, højere relevans, mindre støj og større afkast
Hvad arbejder vi med

Hastighed og performance løsninger

Lange loadtider er en conversion killer, men er sandheden i virkeligheden mere nuanceret?Brugere forventer i stigende grad at virksomheder og brands skaber gode kundeoplevelser. Det er essentielt at website hastigheden er i top, så kunderne får den bedst mulige brugeroplevelse på sitet.

Løsninger der performer dårligt, har lange svar- og loadtider kan være et irritationsmoment, hvilket har store konsekvenser for brugeroplevelsen. I takt med at den digital shopping adfærd i både research og købsfasen flyttes til mobilen, er brugerscenariet anderledes end tidligere, hvor den foregik ved en desktop. I dag foregår flere af kunderejsens faser på mobilen hvor skærmen er fysisk mindre, navigationen kun foregår med fingrene og forbindelsen til nettet kan være udfordret af dårligt wifi eller manglende signal. Denne udvikling stiller derfor krav til at virksomheder ikke alene tænker mobilefirst i UX design, men også i performance- og hastighedsoptimering.

 

Websitets hastighed er kundens førstehåndsindtryk af din virksomhed, og derfor er website performance unægteligt afgørende for din forretning. Lange loadtider er en conversion killer, men er sandheden i virkeligheden mere nuanceret?

Hvordan arbejder vi med

Faktisk hastighed på websites

Google har trænet neurale netværks via machine learning med større datasæt om konverterings- og bounce rate mønstre på tværs af Google Analytics konti. Undersøgelsen viser at der er op mod 91% forskel på bounceraten fra 1-3 sekunders load til 1-10 sekunders load.

Hastighedsoptimering opdeles i to begreber: faktisk hastighed og oplevet hastighed. Faktisk hastighed er den tid websitet tager fra, at klientens web browser har sendt en forespørgsel til webserveren, til at webserverens svar modtages og renders af klientens web browser. Alle websider inkl. billeder, scripts, tekster, video, mv. sendes fra webserveren tilbage til klienten og downloades af modtageren. 

 

Ved at sende så få HTTP requests som muligt, og komprimere og reducere filerne samt vælge at hente indhold fra webservere som er fysisk tættere på klienten, kan vi optimere den faktiske hastighed, altså den tid det rent faktisk/teknisk tager fra, at klienten forespørger på en URL til, at alt indhold er downloadet og vist. Ved at kontrollere rækkefølgen af hvilke filer der skal hentes først, og hvilke der kan udskydes, kan hastigheden øges kontekstuelt.

 

Faktisk hastighed måles i TTFB og indikerer den tid det tager for brugeren at modtage den første byte data. TTFB optimeres ikke alene ved at minimere antallet eller størrelsen af ressourcer der skal downloades, men også i høj grad ved en optimal konfiguration af webserveren.

Derudover skelnes der mellem flere faktorer i leveringen og præsentationen af data til brugeren, efter forespørgsel til serveren. Google har defineret seks sub-metrics, som opdeler webperformance mere granuleret. I blandt de vigtigste er:

Vigtigste sub-metrics:
FCP (First Contentful Paint)

Indikerer tiden det tager for klients browser at rendere det første indhold i DOM’en, efter forespørgsel på en URL

FMP (First Meaningful Paint)

Indikerer tiden det tager for at websidens primære indhold er synligt for brugeren above the fold

TTI (Time to Interactive)

 Indikerer den tid det tager for at websidens indhold er interaktivt. At elementer blot er synlige er ikke altid ensbetydende med, at browseren er klar til at brugeren kan interagere med indholdet

Vi optimerer webløsninger mod alle seks begreber, som også anvedes i Googles Pagespeed algoritme, der bl.a. har direkte indflydelse på SEO og hvor stort potentiale et website har for at opnå top rankings.

Hvordan arbejder vi med

Oplevet website hastighed

Oplevet hastighed handler om, at skabe de optimale betingelser for at brugerne har en oplevelse af at websitet loader hurtigt. Selvom den faktiske hastighed ikke nødvendigvis er lav, kan den oplevet hastighed godt være det. Dermed kan oplevet hastighed, modsat den faktiske, ikke kvantificeres i sekunder, men handler i højere grad om subjektiv opfattelse.

Større platforme som eksempelvis Amazon og Facebook, der globalt anvendes af milliarder af brugere dagligt og leverer uanede mængder af data, er optimering af brugernes oplevet hastighed, lige så vigtigt som den faktiske hastighed. Selvom optimering af den faktiske hastighed og mindskning af ressourcer reducerer ventetiden, så skalerer det dårligt. Flere brugere og kunder betyder nemlig flere kald til serveren, som belastes i højere grad. 

 

Facebooks Feed er et klart eksempel på at UX optimering af brugernes oplevede hastighed kan danne bro til bedre performance og skabe en bedre oplevelse, og dermed fastholde samt sikre brug af platformen. Facebooks Feed dannes i realtid med machine learning, for deres ca. 2,5 mia. månedlige brugere. Det kræver serverkapacitet og i spidsbelastninger er der pres på ressourcer, som skaber ekstra lange loadtider for brugerne. Men ved at implementere UX tiltag kan den oplevede hastighed optimeres.

 

Lazy loading er en metode til at optimere den oplevede hastighed ved brug af asynkron loading af ressourcer. Det fungerer ved at download af billeder ressourcer på websitet udskydes fra pageload til, at de rent faktisk skal bruges oftest når brugeren scroller, og billedet er synligt i browserens viewport. Det gør det muligt at belaste serveren mindre når brugere besøger websitet og der opstår derfor færre HTTP requests.


Udover lazy loading kan progressive JPEG-billeder også bidrage til en bedre brugeroplevelse og hurtigere oplevet hastighed. Der skelnes mellem baseline JPEG og progressive JPEG, hvor den afgørende forskel er i måden billedet komprimeres på. Baseline JPEG loades for brugeren i browseren én linje af gangen fra toppen og ned, hvorimod progressive JPEG viser billedet utydeligt i sin helhed med det samme. Billedet loades ved at flere og flere pixels downloades, og gør billedet skarpere

Eksempel på hvordan Baseline JPG loades
Eksempel på hvordan Progressive JPG loades
Indsigt I

Optimering af content elementer

Ofte kan der med optimering af indholdet på et website, blive begrænse antallet af megabytes, brugeren skal downloade for at rendere og anvende websitet. De optimeringstiltag der oftest gemmer sig er baseret på korrekt anvendelse af billeder, fonte og filer.

Web-fonts bør lagres lokalt og hentes fra samme server som websitet, frem for eksternt ved at linke til en tredjeparts server. Derudover bør scripts der anvender web-fonts, altid konfigureres til at loade de styles som websitet anvender. Ofte loades alle styles eller weights, hvilket kræver flere filer og større pakker, som unødigt lægger ekstra til mængden af ressourcer der skal downloades. Ofte dækker maksimalt to forskellige fonts med maksimalt tre styles til hver, langt de flestes behov for at imødekommende webdesign. Alligevel ser vi ret ofte at websites vi arbejder med, indledningsvis indeholder for mange webfonts, som loades men ikke bliver vist, samt at disse gør brug af 6+ styles, som sænker websitets hastighed.


Det er afgørende for at opnå optimal performance at anvende de korrekte fil formater og billedstørrelser på websitet. Korrekt brug af filformater indebærer at den rette filtype anvendes til billedernes formål. Der er væsentlige forskelle mellem de mest anvendte formater JPG, PNG og SVG, som hver især har unikke fordele.

 

JPG/JPEG

Er et lossy format, hvilket betyder at billeder i JPG komprimeres. JPG som filformat til billeder er effektivt til at kunne indeholde store mængder af forskellige farver, hvor der ikke er skarpt afgrænsede linjer, hvilket gør formatet mindre anvendeligt til at indeholde tekst. JPG benyttes ofte til fotografier eller grafiker med en stor mængde af beslægtede og forskellige farver, hvor der kan spares på data ved at miste data og information, når billedet komprimeres. Det vil ofte være miljøbilleder, produktfotos, baggrundsbilleder, mv. JPG kan ikke indeholde transparente områder.

PNG 

Er omvendt et lossless format, som dermed betyder at komprimering ikke finder sted. Derfor vil to ens billeder/grafikker i hhv. JPG og PNG fylde vidt forskellige i filstørrelse. Modsat JPG, er PNG ideelt til grafikker og billeder med færre farver som også kan indeholde transparente områder og gengive skarpe linjer som fx tekst, fejlfrit. Anvendes ofte til infographics, ikoner, mv.

 

SVG

Er vektorbaseret grafik hvor filformatet især egner sig til grafiske elementer der skal skalere. Eksempelvis ikoner på websites, som på tværs af desktop, tablet og mobile skal skaleres og vises i forskellige størrelse, men stadig vises knivskarpt. Fordi SVG er vektorbaseret, fylder SVG “billeder” typisk meget mindre i filstørrelse, da grafikken består af koordinater/punkter og farve informationer.

 

Det er derudover vigtigt at tage aktivt stilling til, hvilken opløsning billederne gemmes i. Ofte ser vi at billeder uploades i alt for høje opløsninger ift. hvordan de vises på websitet – hvilket bloater ressourcerne ift. performance. Som udgangspunkt bør opløsningen altid matche den højeste opløsning som billederne vises i på websitet. Nedskalering af et stort billede med CSS, for at blot vise en mindre version, er spild af ressourcer. Oftest vil den største variant være vist i desktop-versionen af websitet.

Indsigt I

Optimering af stylesheets & Javascripts

Blandt de vigtigste elementer i optimering af koden, er optimering af især stylesheets og JavaScripts. I optimeringen i levering af JavaScript, er det muligt at kontrollere rækkefølgen af script, og dermed udskyde mindre vigtige scripts, som ikke er kritiske for brugerens oplevelse på websitet.

Asynkron JavaScript er en metode som kan anvendes til at kontrollere prioritering og rækkefølge af de script-ressourcer som loades i browseren. Med asynkron loading, hentes flere ressourcer samtidigt og uafhængigt af, hvorvidt hver især er downloadet, før næste download starter. Det giver ofte mening at aktivere async, da websitet hurtigere vil være interaktivt/brugbart for brugeren og dermed reducere TTI.

 

Derudover er det også muligt at udsætte download af JavaScripts med defer. Defer giver mulighed for at prioritere hvilke scripts som kan vente med eksekvering. Dette er typisk scripts som ikke er med til at skabe indhold eller UI på websitet, men kan være marketing scripts, som tracker brugere, hvor eksekvering af scriptet ikke har en synlig konsekvens for brugeren.

eksperter

Danmarks førende eksperter hjælper jeres virksomhed med at skabe resultater

+18
års erfaring med digital marketing
+200
vækstcases er grundlag for vores erfaring
data-drevet marketing

Vi får typisk 20-50% mere ud af jeres budgetter

Se alle fordelene
Søgemaskineoptimering

Typisk

25%

bedre rankings

SEM, PPC og social Ads

Typisk

30%

højere ROAS

RTB, display og medieindryk

Typisk

35%

øget awareness

Digital marketing strategi

Typisk

50%

højere ROI