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
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.
Mere viden om SEO
Se flere former af SEO vi arbejder med
Teknisk SEO
Det rette tekniske SEO setup er et afgørende parameter i jagten på øget organisk synlighed. Vi har mere end 15 års erfaring med teknisk SEO
Content Marketing
Med udgangspunkt i kunderejsen og ved hjælp af data og kunstig intelligens, skaber vi content marketing strategier der skaber målbare resultater
Linkanalyse
Få konkret viden om hvordan du analyserer jeres linkprofil. Vi tilbyder professionel rådgivning i optimering af jeres linkprofil
Lokal SEO
Lokal SEO er optimering mod søgninger med lokal søge intention. Lokal synlighed er afgørende i organisk vækst. Vi er førende specialister i lokal SEO
