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 osBest-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.
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
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øgeintention. Lokal synlighed er afgørende i organisk vækst. Vi er førende specialister i lokal SEO.
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.
