God performance på dit website er alfa og omega for, om dine kunder bliver på dit website, finder det, de har brug for – og i sidste ende konverterer sig til et potentielt lead. Så hvis sitets performance halter, kan det være fatalt for både din forretning og dit brand. Men hastighedsoptimering på et website er en stor opgave, og kan for mange virke uoverskuelig, hvis du ikke ved, hvad du skal fokusere på. I denne artikel har vi derfor samlet de vigtigste fokuspunkter til at optimere din web performance.
.jpg?width=755&height=403&name=webperf1%20(1).jpg)
Gode kundeoplevelser er blevet et ufravigeligt vilkår for brands og virksomheder i dag. Brugerne forventer mere og bedre af de brands, de interagerer med – og skal den interaktion være så gnidningsfri og succesfuld som muligt, så skal dit websites hastighed være i top.
Performer dit website langsomt, kan det have store konsekvenser for brugeroplevelsen på sitet. Vores tålmodighed ligger oftest på et meget lille sted, når det handler om web-hastighed – og lever den ikke op til vores forventninger, så er vi også hurtigt videre. Samtidig foregår mere og mere af vores digitale tilstedeværelse på mobilen, hvor skærmen er mindre og navigation foregår med fingrene – og den udvikling stiller store krav til både performance og hastighed på dit website.
Hastighedsoptimering og generel optimering af web performance er dog ikke en dans på roser. Der er rigtig mange elementer på dit website, som kan påvirke hastigheden og performance i den forkerte retning. Det kan være alt fra kodning og UX til billeder og scripts. Og god hastighed er ikke bare vigtigt for brugeroplevelsen – det påvirker også sitets Google-ranking. Google rangerer nemlig websites højere, når de har god hastighed og lav bounce rate.
Vil du have optimal hastighed og performance på dit website, skal du som minimum dykke (og nogle gange ret dybt) ned i følgende punkter:
- Billeder
- Core Web Vitals
- JavaScript
- Performance monitoring
Billeder
Vi finder billeder på nærmest alle websites, fordi de er en meget essentiel del af bruger- og brandoplevelsen. Billeder former brandet og den visuelle identitet, de fortæller historier og gør læseoplevelsen markant bedre.
Men billeder er også tunge at danse med – bogstaveligt talt. Billeder fylder ofte mere, end hvad godt er, og det går ud over dit websites load-tid og performance generelt.
Af de grunde er du også nødt til at være opmærksom på, hvor og hvordan du bruger billeder på websitet – og ikke mindst, hvordan du behandler billederne, så de fylder mindre, men stadig opfylder det ønskede behov. Alt det kan du læse mere om her.
.jpg?width=755&height=400&name=webperf4%20(1).jpg)
Core Web Vitals
Et andet meget væsentligt punkt på listen er Core Web Vitals. Det er et Google-begreb, der dækker over tre specifikke målinger af hastighed og brugerinteraktion, som er med til at skabe en god brugeroplevelse på dit website.
De tre specifikke målinger drejer sig om:
- Loading
- Interactivity
- Visual stability
Sammen vurderer de tre målinger den samlede websides UX. Det er dog vigtigt at understrege, at en god brugeroplevelse ikke kun står og falder med Core Web Vitals – men de er et væsentlig værktøj til bedre UX og højere ranking i Googles søgeresultater.
Men hvad dækker loading, interactivity og visual stability over?
Loading
Loading, bliver målt vha. metrikken Largest Contentful Paint (LCP), som er et begreb for indlæsningstiden af en webside set fra brugerens synspunkt. Hastigheden bliver målt fra første klik på et link til størstedelen af indholdet på siden er synlig. Loading-begrebet dækker derfor over, hvor hurtigt brugeren kan begynde at interagere med indholdet på siden. LCP bør ske indenfor 2,5 sekund for at sikre en god brugeroplevelse.
Interactivity
Når vi taler om interactivity, eller First Input Delay (FID), så har vi fokus på hastigheden fra det tidspunkt, hvor brugeren første gang interagerer med din webside, til det tidspunkt hvor din browser reagerer på den interaktion. En interaktion kan være alt fra et klik på en knap til at skrive sig op til et nyhedsbrev. Google ser måling af interactivity på din webside som vigtig, fordi den giver et virkeligt billede af, hvordan brugere interagerer med dine websider.
Visual stability
Visual stability, også kaldet Cumulative Layout Shift (CLS), er, som det lyder, en måling på, hvor visuelt stabil din webside er, når den loades. Så visual stability har øjne på, om din webside har elementer, der dynamisk bevæger sig rundt på siden i stedet for at være statiske. Er dine elementer statiske, har websiden ikke elementer, der hopper rundt efterhånden som siden loader (et klassisk eksempel er reklamebannere i toppen af siden), hvilket forbedrer brugeroplevelsen på siden.
Har du dermed fokus på de tre målinger, som du kan læse mere om her, og arbejder med at forbedre dem, så vil du ikke alene forbedre brugeroplevelsen på dit website, men også rangere bedre i Googles søgeresultater.
.jpg?width=755&height=400&name=webperf5%20(1).jpg)
JavaScript
JavaScript kan også være en sten i skoen, når du analyserer din webhastighed. Det sker, hvis du ikke har taget stilling til, hvilket JavaScript der eksekveres hvornår.
Som default vil browseren udføre render blocking af scripts og CSS der ligger i <head>, som gør at den først kan begynde at rendere hjemmesiden når disse ressourcer er helt downloadet. Dette er fint for de ressourcer, som rent faktisk er nødvendige for at websitet kan rendere, men der er ingen grund til at renderingen udsættes pga. scripts til f.eks. chatbots, nyhedsbrev-popup's eller andre marketing scripts, som ikke er med til at skabe indhold på websitet.
Dette kan du afhjælpe ved enten at tilføre async eller defer til dine script-tags. De vil sørge for at renderingen ikke venter på at disse filer bliver hentet. Hvis du ikke lige er en hardcore udvikler-type, følger her en forklaring af de to metoder:
Async er en metode, der som sagt løser udfordringen med render blocking ved at fortælle browseren at dette script godt kan vente lidt med at loade, og at browseren bare kan tegne videre og så eksekvere scriptet, når det på et tidspunkt er downloadet.
Defer er en anden metode, der også forhindrer render blocking. Forskellen på async og defer er at defer respekterer rækkefølgen på dine scripts, så de bliver eksekveret i samme rækkefølge som script-tags ligger i HTML’en.
3rd party scripts er også en væsentlig årsag til, at dit website loader mere, end hvad godt er, fordi de kræver mange ressourcer. 3rd party scripts kan f.eks. være share-knapper til Facebook og Instagram, video-afspiller embeds som Youtube eller Vimeo og diverse analytics scripts.
3rd party scripts påvirkning af hastigheden på sitet, kan skyldes flere ting, men de typiske grunde er:
- at der bliver sendt for mange network requests til flere servere, som påvirker load-time
- at CPU-intensive scripts kan påvirke bruger-interaktion
- at der for ofte bliver hentet ressourcer fra netværket grundet utilstrækkelig HTTP caching.
Uanset hvad udfordringen med dit script er, så er det vigtigt at forstå, hvad scriptets funktion er – og om du kan undvære den. Så den korte af den lange er: Gå dine scripts efter i sømmene, også dem i Google Tag Manager, og fjern dem der ikke er nødvendige.
.jpg?width=755&height=400&name=webperf6%20(1).jpg)
Performance monitoring
Idéen med performance monitoring er at indsamle data til at forbedre hastigheden på dit website – og disse data hjælper i sidste ende med at optimere brugerens oplevelse på sitet. Fordelene ligger samtidig i, at du kan følge dine performance metrics over tid, du kan få alerts hvis disse metrics pludselig begynder at blive langsommere og så kan du integrere udviklingsprocesser, der giver første spadestik til at opbygge en performance-fokuseret kultur i virksomheden.
Der er flere forskellige retninger til performance monitoring, der giver dig mulighed for mere eller mindre granulering som f.eks. synthetic monitoring og real user monitoring.
Synthetic monitoring foregår på servere i datacentre, og efterligner de forhold som en gennemsnitlig bruger muligvis vil opleve på websites. På den måde kan du opsætte baselines til dine metrics, og samtidig se hvordan evt. ændringer i koden påvirker dine metrics.
Eksempler på fordele ved synthetic monitoring:
- Du kan måle på og sammenligne de websites, du vil.
- Konsistent og stabil baseline, da tests foregår i et kontrolleret miljø.
- Kræver ingen installation.
- Detaljerede anbefalinger til performance optimeringer.
Real user monitoring koncentrerer sig om at opsamle metrics for performance, når rigtige brugere interagerer med websites. Så selvom real user monitoring ikke kan måle lige så mange detaljer som synthetic monitoring, så samler real user monitoring store mængder af performance data fra rigtige brugere fra hele verden.
Eksempler på fordele ved real user monitoring:
- Stor tilgængelig datamængde.
- God geografisk spredning.
- Korrelation mellem konverteringer og KPI’er og performance metrics.
- Always on.
Der er mange performance metrics, du kan monitorere – men de nemmeste at komme i gang med er de føromtalte Core Web Vitals. En anden metric der er vigtig at holde øje med er TTFB (Time to First Byte) som fokuserer på reaktionsevnen fra serveren, og måler tiden fra brugeren laver et HTTP request til sidens første byte, og indtil det er modtaget af brugerens browser.
Uanset hvordan du vælger at gå til performance monitoring på dit website, så kan det være en større opgave og kræver en del ressourcer – men vil du bevæge dig foran konkurrenterne (og blive der), så kræver det, at du går struktureret og analytisk til værks, når det handler om performance monitoring.
Det ville jo være synd og skam at bruge en masse tid og penge på at optimere websitets performance, hvorefter det stille og roligt bliver langsommere igen, uden at det bliver fanget. Du kan blandt andet hjælpe dig selv godt i gang ved at kigge nærmere på et eller flere af disse tools til performance monitoring:
Som du måske kan fornemme, er der mange parametre der spiller ind på dit websites performance-niveau. Så hvis du føler, at dit website kører lidt for langsomt, kan du forhåbentlig bruge nogle af rådene i denne artikel til at få gjort noget ved sagen.
Der er masser af (mere eller mindre) lavthængende frugter at hente ved billedoptimering, Core Web Vitals og JavaScript, men hvis du kontinuerligt vil sikre dig, at dit website kører så smurt som overhovedet muligt, er det essentielt med et godt setup for performance monitoring.
Vil du vide mere om, hvordan du optimerer dit website til bedre og hurtigere performance, er du altid velkommen til at hive fat i mig. Og hvis du gerne vil vide mere om, hvordan vi kan hjælpe dig og din virksomhed med at optimere jeres website, kan du række ud til min kollega Jon.