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 du kan pr√¶sentere et website effektivt og hurtigt for modtageren. Hastighed og performance er en helt afg√łrende forretnings-KPI i konkurrencen om at vinde og fastholde kunder digitalt.

Kontakt os

Best-in-class teknisk hastighedsoptimering af website- og e-commerce 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

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√¶rk 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 websites med en loadtid p√• mellem 1-3 sekunders imod websites med en loadtid p√• 3-10 sekunders load.

Hastighedsoptimering opdeles i to begreber: faktisk hastighed og oplevet hastighed. Faktisk hastighed er den tid websitet tager fra, at klientens webbrowser har sendt en foresp√łrgsel til webserveren, til at webserverens svar modtages og renders af klientens webbrowser. Al sidens indhold, det vil sige HTML, billeder, scripts, tekster, video med videre, 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. Med andre ord 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√• anvendes i Googles Page Experience metric, der 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.

For 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 oplevede 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 vil dette v√¶re 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 derfor opst√•r der f√¶rre HTTP requests til webserveren.


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ænset 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 et moderne 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 alle er med til at s√¶nke 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

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 grafikker med en stor m√¶ngde af besl√¶gtede og forskellige farver, hvor der kan spares p√• data ved at sk√¶re ned p√• m√¶ngden af data og information, hvilket sker n√•r billedet komprimeres. Det vil ofte v√¶re milj√łbilleder, produktfotos, baggrundsbilleder med videre. JPG kan ikke indeholde transparente omr√•der.

PNG 

PNG er omvendt et lossless format, som dermed betyder at komprimering ikke finder sted. Derfor vil to ens billeder/grafikker i henholdsvis JPG og PNG have vidt forskellige filst√łrrelser. 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 for eksempelvis tekst, fejlfrit. Anvendes ofte til infographics, ikoner med videre.

 

SVG

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 i forhold til, hvilke opl√łsninger de rent faktisk vises i p√• websitet ‚Äď hvilket bloater ressourcerne i forhold til 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.

Skal vi tage en uforpligtende snak?

Mads-Mikkel Tarding

Senior Partner & Managing Director

FREMTIDENS DIGITALE VINDERE VÆLGER KYNETIC

Vi er anerkendt af en lang række glade kunder, der har vækstet markant gennem et digitalt marketing samarbejde.

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