Best practice hastighedsoptimering der tager website performance til næste niveau

Vi arbejder med best-in-class teknisk hastighedoptimering af website- og eCommerce løsninger, som sikrer optimale brugeropleveler og markante løft i performance.

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 i 2020 en helt afgørende forretings-KPI i konkurrencen om at vinde og fastholde kunder digitalt.

Hvorfor er det afgørende? Brugere forventer i stigende grad, at virksomheder og brands skaber gode kundeoplevelser – herunder at genkende kundernes behøv, ønsker og situation gennem personalisering og data, og ikke mindst leverer en god shoppingoplevelse.

Med andre ord, vil løsninger der performer ringe og har lange svar/loadtider være et irritationsmoment som kunder ikke ser igennem fingre med længere. I takt med at digital shoppingadfærd (både research og køb) flyttes til mobile, er situationen anderledes end tidligere; fysisk mindre skærm, navigation med fingre i stedet for en mus, forbindelser med udfald og/eller højere latency. Den udvikling stiller derfor krav til at virksomheder ikke alene tænker mobilefirst i UX design, men også i performance- og hastighedsoptimering.

Vidste du at:

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. Af undersøgelsen fremgår følgende adfærdsmønstre.

Loadtidens indflydelse på bounce rates:

  • 1-3 sekunders load: Kan øge BR med 32%
  • 1-5 sekunders load: Kan øge BR med 90%
  • 1-6 sekunders load: Kan øge BR med 106%
  • 1-10 sekunders load: Kan øge BR med 123%

Kilde: Think With Google

Faktisk hastighed vs. Oplevet hastighed

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

Hastighedsoptimering opdeles i to begreber: “faktisk hastighed” og “oplevet hastighed”.

Faktisk 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 renderes af klientens web browser. Alle websider (inkl. billeder, scripts, tekster, video, mv.) sendes fra webserveren tilbage til klienten, og kal downloades af modtageren. 

Ved at sende så få HTTP requests (forespørgsel på filer) som muligt, samt komprimerer filer mest muligt så filstørrelsen reduceres, 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 (ikke alle ressourcer er lige kritiske at hente for, at kunne vise den side som brugeren efterspørger).

Faktisk hastighed måles i TTFB (Time to First Byte) 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 i 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:

  • 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 (der kan klikkes på elemeter). 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å toprankings.

Oplevet hastighed

Oplevet hastighed handler derimod om, at skabe de optimale betingelser for at bruger har en oplevelse af at websitet loader hurtigt. Selvom den faktiske hastighed ikke nøndigvis er lav, kan den oplevede hastighed godt være det. Dermed kan oplevet hastighed, modsat den faktiske, ikke kvantificeres i sekunder, men handler i højere grad om subjetiv opfattelse. Ikke desto mindre bør brugerens oplevede hastighed ikke negligeres eller nedprioriteres ift. optimering af den faktiske hastighed. 

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

Facebooks Feed er et klart eksempel på at UX optimerning af brugernes oplevede hastighed kan danne bro til bedre performance (skabe en bedre oplevelse, og dermed fasftholde brugere/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.

Eksempel på UX ændringer (animation af indlæg der hentes) i Facebooks Feed.

Lazy Loading

Lazy loading er et metode til at optimere den oplevede hastighed ved brug af asynkron loading af ressourcer. Det fungerer ved at download af billedressourcer 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 sker færre HTTP requests.

Progressive JPG/JPEG

Udover lazy loading, kan progressive JPG-billeder også bidrage til en bedre brugeroplevelse og hurtigere oplevet hastighed. Der skelnes mellem “normal”/baseline JPEG og progressive JPG, 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 i sin helhed (dog utydeligt) med det samme, og 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:

Optimering af content kan øge hastigheden

Ofte kan vi medoptimering af websitets indhold spare en stor mængde resourcer og begrænse antallet af megabytes, brugeren skal downloade for at rendere og anvende websitet. De optimeringstitag, der ofte gemmer sig blandt i lavthængede frugter, er baseret på korrekt anvendelse af billeder, fonte og filer.

Optimering af web-fonts

Web-fonts (eksempelvis fra Google Fonts) bør lagres lokalt og hentes fra samme server som websitet, frem for eksternt ved at linke til en 3. parts server. Derudover bør scripts der anvender web-fonts, altid konfigureres til at loade de styles som websitet anvender. Ofte loades alle styles/weights, hvilket kræver flere filer/større pakker, som unødigt lægger ekstra til mængden af ressourcer der skal downloades. Ofte dækker maksimalt 2 forskellige fonts med maksimalt 3 styles til hver, langt de fleste 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.

Billeder i korrekte filformater og størrelser

Det er afgørende for at opnå optimal performance at anvende de korrekte filformater 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 anvende formater JPG, PNG og SVG, som hver især har unikke fordele.

JPG
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ænge af beslægtede og forskellige farver, hvor der kan spares på data ved at ”miste” data/information, når billedet komprimeres. Det vil ofte være fx miljøbilleder, produktfotos, baggrundsbilleder, mv. 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 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. Anvende ofte til infographics, ikoner, mv.

SVG
SVG er vektorbaseret grafik og filformatet egner sig især 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 farveinformationer.

Billedstørrelser/opløsning
Det er derudover vigtigt at tage aktivt stilling til, hvilken opløsning billederne gemmes i. Ofte ser vi at billeder uplodes 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.

Optimering af kode

Udover optimering af content elementer og at anvende de rette billedformater og fone, består hastighedsoptimering bl.a. også af optimering af kode. 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 scrpit, og dermed udskyde mindre vigtige scripts, som ikke er kritiske for brugerens oplevelse på websitet.

Async JavaScript

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æningt 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 (Time to Interactive).

Defer JavaScript

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/UI på websitet, men kan være marketing scripts, som tracker brugere, hvor eksekvering af scriptet ikke har en synlig konsekvens for brugeren.

Få en gratis website performance analyse

Har I et årligt digital marketing på budget på +350.000 kr, kan I få en 100% gratis og uforpligtende analyse af jeres websites hastighed og performance – udarbejdet af Nordens førende digital marketing specialister. Vi giver jer konkrete strategiske og taktiske forslag til optimering af jeres løsning og hvordan loadtiden reduceres og hastigheden forbedre  – og dermed konkret værdi, så I lærer os bedre at kende, og kan kvalificere os som jeres kommende samarbejdspartner.

Har I brug for hjælp til at øge performance og hastighed på jeres website?

Hos KYNETIC er vi specialister i webanalyse af potentiale og forbedringsmuligheder af performance i webløsninger, samt implementere forbedringer og sikre best-practice website performance.

Ønsker I at tage en snak om på mulighederne for jeres løsning, så tøv ikke med at kontakte os på eller 71 740 720 eller kontakt@kynetic.dk.

 

Nyeste virksomheder der har valgt KYNETIC

Brug for hjælp til jeres forretning?

Vi kan også hjælpe jer med

Digital Strategi

Vi laver både 360 graders digitale strategier og separate kanalstrategier med fokus på målbar vækst via indsigt i kunderejser, forbrugeradfærd og realistiske roadmaps.

Analyse og indsigt

Vores analytics-team kombiner webanalyse med business intelligence og predictive analytics for at give netop den indsigt, der sikrer, at der kan skabes de bedste resultater.

SEO

Vores omfattende SEO-framework sikrer dig øget synlighed og øget trafik fra Google og Bing. Frameworket består af 5 essentielle områder i en forretningskritisk SEO-indsats.

SEM

Med vores SEM-framework og best-in-class annonceringsværktøjer skaber vi klare målbare resultater på tværs af brancher med intelligent annoncering i Google Adwords, Google shopping, Bing Ads og retargeting.

Digitalt medieindryk & Display

Vi arbejder både top-funnel med at øge brand/produktkendskab og low-funnel med fokus på konverteringer. Vi arbejder med display-annoncering (RTB), dynamisk banner-udvikling, Youtube, native-ads, video-prerolls, in-app-ads og remarketing-setups.

Email & Automation

Med dyb specialisering i email-marketing og marketing-automation lige fra rekruttering og automatiske flows til data-management, inbound-marketing og multi-channel marketing automation setups, skaber vi relevans, leads og forretning på tværs af kunderejsen.

Sociale Medier

Vi skaber salg, leads, øget kendskabsgrad og forbrugerindsigt via de sociale medier. Vi er bl.a. specialiseret i avanceret annoncering på Facebook og retargeting, Instagram ads, Linkedin og Snapchat.

CRO

Med fokus på øget omsætning, engagement og optimale brugeroplevelser, arbejder vi med at forbedre forbrugerens digitale oplevelser igennem UX-optimeringer, splittest, personalisering og analyser, som leder til mere salg og øget loyalitet. 

Content Marketing

Content er typisk en essentiel del af en digital marketing strategi. Vi hjælper med, ved brug af data og indsigt, at skabe og distribuere content til de rette brugere/segmenter, på det rette sted, den rette tid og i den rette kontekst. 

Growth Hacking

Growth hacking handler om at tænke kreativt med data og skabe eksplosiv vækst. Vi kombinerer kreativitet med digital marketing virkemidler til at få dit produkt, app eller service ud til flere og ultimativt vækste jeres forretning hurtigere.

Amazon & Affiliate

Vi hjælper med at afsætte og markedsføre jeres varer i eksterne salgskanaler såsom Amazon, affiliate-websites og markedspladser. Typisk med fokus på højest mulig ROI.

Strategi & Sparring

Med udgangspunkt i vores viden, erfaringer og teknologier, yder vi løbende rådgivning til virksomheder, der ønsker sparring om deres digitale indsats, muligheder og udfordringer fra førende specialister.