Jo hurtigere dit websted indlæses, jo bedre en brugeroplevelse giver du til dine kunder. Det er så simpelt som det!
Bedre brugeroplevelse fører til højere konverteringsfrekvenser, lavere afvisningsfrekvenser og mere. Hvis du vil arbejde med vellykkede hjemmesider til dig selv eller dine kunder, er det vigtigt at lære at hastighed altså betyder en del.
Indlæsningstider vil påvirke dit websteds brugeroplevelse, SEO-placeringer, konverteringsfrekvenser, afvisningsfrekvenser og mere. Det kommer vi tilbage til. Mens mange mennesker med rette fokuserer på design og indhold på et websted, er det lige så vigtigt, hvis ikke mere, hvor hurtigt webstedet indlæses. I mine 20 års som webdesigner har kampen aldrig været vigtigere. Dialogen med kunderne dukker ofte op i forhold til hvor fokus skal være. Kunden ønsker måske flere og flere funktioner som trækker ned i hastighed. Samtidig har de ofte fokus på at du f.eks. i WordPress CMS “bare kan trække et plugin ned”. Og den sidste del der ofte debatteres er kvaliteten af server.
I dette indlæg dækker vi alt omkring vigtigheden af en hurtig hjemmeside. Vi starter med at forklare, hvad der nedsætter hastigheden, hvorfor hastighed er vigtig, og hvordan man tester dit websteds aktuelle præstation.
Udgangspunktet i dette indlæg går på WordPress CMS. Hvor værktøjerne her er anderledes er det derimod ikke anderledes for selve problematikken – alle hjemmesider bør levere hurtige resultater.
Hvorfor er dit WordPress CMS langsomt?
Der er to brede kategorier af problemer, der kan bremse dit WordPress-websted:
Backend-ydeevne – i store træk er dette, hvor lang tid det tager din server at levere filer.
Frontend-ydeevne – hvor optimeret er din WordPress i sig selv
Problemer med backend-ydeevne kommer generelt fra din hosting. For eksempel er brugen af langsom hosting en af de største syndere i dårlig backend-ydeevne. Du kan altså fremskynde backend-ydeevne ved at gøre din server mere effektiv med taktik som sidecaching, ved hjælp af den nyeste version af PHP, optimering af din database og mere.
Problemer med frontend-ydeevne afhænger meget mere af de valg, du træffer, når du bygger dit WordPress-websted. Nogle af de almindelige problemer her inkluderer:
- Brug af for mange dårligt optimerede WordPress-plugins
- Brugen af et tungt (dårligt udviklet) WordPress-tema
- Indlæsning af store, ikke-optimerede billeder
- At have uoptimeret JavaScript eller CSS
- Indlæser for mange tredjeparts-scripts
Hvis du vil maksimere dit websteds ydeevne, skal du optimere begge typer ydeevne. For eksempel kan et fuldt optimeret frontend websted stadig indlæses langsomt, hvis det er på virkelig langsom hosting server (og omvendt).
Hvorfor er WordPress-webstedshastighed vigtig?
Hvis du nogensinde har besøgt en langsom hjemmeside, ved du hvor frustrerende det kan være. Vi er i 2021 vant til instant gratification og derfor virker en langsom hjemmeside som irriterende, og dine besøgende bliver irriterede.
Så helt grundlæggende skaber en langsom hjemmeside virkelig dårlige brugeroplevelser for dine besøgende, hvilket er noget, du altid bør sigte mod at undgå.
Der er dog også mange specifikke ulemper ved at have en langsom webside:
SEO-ranglister – Google bruger sidehastighed som en placeringsfaktor i både dens desktop- og mobilresultater. Meget snart træder Core Web Vitals-metrics i kraft, som inkluderer en hastighedsmåling. Webstedshastighed kan altså have særlige konkurrencedygtige elementer når det skelner mellem to lige stærke hjemmesider.
Konverteringsfrekvenser – langsommere hjemmesider fører til lavere konverteringsfrekvenser. Og vi er blevet dygtige til at måle på det. Selv bare en forsinkelse på 100 millisekunder kan skade konverteringsfrekvensen med 7%, ifølge Akamai. Deloitte fandt også ud af, at kun en forbedring af webstedets hastighed på 100 millisekunder førte til, at shoppere brugte 10% flere penge.
Afvisningsprocent – langsommere hjemmesider fører til højere afvisningsprocenter. For eksempel fandt Pingdom det interessant, at den tidsrelaterede afvisningsprocent for en side, der indlæses på to sekunder, er 6%, men der springer til 38% for en side, der indlæses på fem sekunder. På mobilsiden fandt Google, at sandsynligheden for, at nogen springer fra 32% på 1-3 sekunder til 90% på 1-5 sekunder.
Webstedshastighed er også særlig vigtig på mobil, hvor 53% af de mobile besøgende forlader en side, der tager mere end tre sekunder at indlæse. Og hastighed er tit misforstået på mobiltelefon, for nu tildags indlæses en hjemmeside næsten lige så hurtigt med 5G som en kablet desktop computer. Problemet er at vi ofte er på farten når vi surfer på telefonen og derfor er tålmodigheden mindre. Interessant ikke sandt?
Sådan måler du hastigheden af din hjemmeside
Den nemmeste måde at teste ydeevnen på din hjemmeside, er at bruge et hastighedstestværktøj. Med et sådant værktøj (software) er alt, hvad du skal gøre, at indtaste webadressen på den side, du vil teste, og værktøjet giver dig en masse data til at vurdere dets præstationer.
Nogle af de bedste gratis hastighedstestværktøjer er:
WebPageTest – tilbyder mange testvariabler til at indsamle mere nyttige data.
GTmetrix – ret fleksibel, hvis du tilmelder dig en gratis konto.
Google PageSpeed Insights – leverer hurtige data fra den virkelige verden fra Google sammen med test fra Lighthouse.
Husk også egen test fra desktop – wifi eller kablet samt fra din telefon. Det giver en god indikation om du syntes hjemmesiden fungerer eller ikke. På den måde kigger du ikke kun på tal fra software.
Hvad er en god hastighed egentlig?
Generelt er en god indlæsningstid på websitet under to til tre sekunder. For mobilbrugere anbefaler Google under tre sekunder. Og for e-handelsbutikker skal du sigte på under to sekunder.
Husk dog, at den fuldt indlæste tid ikke er den eneste vigtige “måkleenhed”. Du vil også gerne fokusere på din hjemmesides “opfattede” indlæsningstid, hvilket er, hvor hurtigt dine besøgende “føler” sig velkommen på hjemmesiden. Med Googles egne ord:
“Largest Contentful Paint (LCP) er en vigtig, brugercentreret måling af opfattet belastningshastighed, fordi den markerer punktet i sidens tidslinje, når sidens hovedindhold sandsynligvis er indlæst – en hurtig LCP hjælper med at forsikre brugeren om, at siden er nyttig.”
Google anbefaler, at din LCP-tid er under 2,5 sekunder og begynder at bruge dette kriterium som en SEO-placeringsfaktor i 2021.
Sådan optimeres WordPress-webstedshastighed
Lad os nu komme ind på noget handling i forhold til optimering.
Brug hurtig hosting
At vælge server efter ydeevne er en af de største ting, du kan gøre for at forbedre dit websteds backend-ydeevne. Har din hjemmeside mange besøgende og mange sider skal hosting optimeres efter det. Det svarer til blive i den lille butik mens kundemængden vokser og du får flere varer på hylderne. Folk bliver trætte af at være klemt inde og ventetiden.
Kort sagt, hvis din hosting er langsom, er der en stor chance for, at dit websted bliver langsomt, selvom du gør et rigtig godt stykke arbejde med frontend-optimering.
For at opnå den absolutte bedste præstation skal du overveje servere som er dedikeret til WordPress – hvis dette er dit foretrukne CMS. Og ja bedre hosting koster bare mere. Kvalitet hænger sammen med prisen. Der bør være forskel på serverhosting til 19 kr. månedligt og 200 kr. månedligt.
Når du vælger en hjemmesideserver, skal du også være opmærksom på de tilgængelige serverplaceringer. Den fysiske placering af din server vil have en indvirkning på dine sidens indlæsningstider, fordi fysisk afstand påvirker downloadhastigheder. Nogle benytter servere i udlandet fordi prisen er bedre, men afstanden kan sagtens betyde noget for hastigheden. Ideelt set vil du vælge en løsning, hvor serveren er placeret samme sted som din primære målgruppe.
En anden vigtig overvejelse er at kigge efter moderne teknologier, såsom HTTP / 2, som kan forbedre HTTPS-ydeevne og også er bedre til at håndtere mange små HTTP-anmodninger.
Brug caching til din hjemmeside
Implementering af sidecaching er en af de største ting, du kan gøre for dit WordPress CMS, især hvis du starter med billig delt hosting. Hvis du har billig delt hosting, kan du endda se, at dine belastningstider bliver halveret ved at aktivere caching.
Normalt skal din hjemmeside server samle hver side fra bunden, når nogen besøger dit websted. Dette involverer læsning af PHP for at “bygge” siden og forespørgsel ind på din database for at få indholdet til siden. Når det er gjort, leverer din server den færdige HTML til den besøgendes browser.
Denne proces tager tid og bruger ressourcer, som giver to negative virkninger:
- Det får individuelle besøg til at tage længere tid.
- Det bruger flere ressourcer til hvert besøg, hvilket betyder, at dit websted vil bremse endnu mere i perioder med høj trafik.
Caching eliminerer dette problem ved at gemme den færdigindlæste hjemmeside i en cache. Således kan næste besøg blot indlæse HTML fra din server uden alt arbejdet i kulissen.
Der findes forskellige muligheder for at implementere dette på din hjemmeside. Når vi taler WordPress er der følgende udemærket løsninger:
WP Rocket
WP Super Cache
WP Fastest Cache
Brug et Content Delivery Network (CDN)
CDN fremskynder dit websteds globale indlæsningstider ved at cache dit statiske indhold på et stort netværk af “edge-servere” over hele verden. Derefter, når nogen besøger dit websted, er denne person i stand til at downloade indhold fra den nærmeste edge placering snarere end fra din hovedserver. Da den fysiske afstand er kortere, downloades filerne hurtigere, og dit websted indlæses hurtigere.
Nogle gode CDN løsninger er:
KeyCDN
Stackpath
BunnyCDN
Cloudflare
Optimer dine billeder
I gennemsnit udgør billederne omkring halvdelen af filstørrelsen på det gennemsnitlige websted. Derfor er det en oplagt mulighed at kigge på billederne som noget af det første.
Med hensyn til selve billederne er der to dele til optimering:
- Dimensioner på størrelse – du skal ændre størrelsen på billedets dimensioner baseret på, hvor du bruger det. Hvis du inkluderer billedet i et blogindlæg med et indholdsområde, der er 800 px bredt, skal billedets absolutte maksimum være 1600 px (en fordobling af dimensionerne for at tage højde for Retina-skærme).
- Komprimering – når du har ændret størrelsen på et billede, skal du komprimere det for yderligere at reducere dets filstørrelse. Det gøres typisk ved gøre nedsætte kvaliteten af et billede. Der er to typer komprimering – “lossy” (noget tab i billedkvalitet, men enorme filstørrelsesbesparelser) og “lossless” (nul tab i kvalitet, men mindre filstørrelsesbesparelser).
For de fleste sider er en god strategi at:
- Tilpas billeder til deres skærmbredde (eller 2 gange bredden for Retina-skærme).
- Komprimer billeder i kvaliteten – du skal ramme der hvor billedet stadig ser pænt ud men at kvaliteten nedsænkes til hvad det menneskelige øje egentlig ser.
Jeg vil altid anbefale at du optimerer billederne før de uploades. Værktøjer som BIRME (resizing) og Kraken (kompression) tilbyder optimering, ligesom Adobe Photoshop gør.
Eller du kan bruge et plugin i WordPress til automatisk at optimere billeder, når du uploader dem til WordPress. Her er nogle gode muligheder:
Optimer CSS
CSS-koden giver endnu en mulighed for front-end-optimering. Der er to strategier til optimering:
- Komprimer CSS-kode for at reducere filstørrelsen ved at fjerne mellemrum og overflødige tegn.
- Kombiner separate CSS-filer for at reducere HTTP-anmodninger. Generelt er en stor HTTP-anmodning mere effektiv end flere små HTTP-anmodninger (selvom forskellen ikke er så stor, hvis din vært bruger HTTP / 2).
For at forbedre brugeroplevelsen med Largest Contentful Paint findes der en taktik i at integrere kritisk CSS i sektionen <head> og udsætte indlæsningen af resten af din CSS til senere.
Optimer JavaScript
Ligesom med CSS, skal du minimere og kombinere din JavaScript så meget som muligt. Du skal dog være opmærksom på at for meget optimering – læs minimere og kombinere muligvis kan ødelægge indlæsningen af din hjemmeside.
Du kan også her med fordel benytte de plugins der findes derude.
Ud over dette skal du udsætte indlæsning af JavaScript så meget som muligt for at undgå at blokere indlæsning over skillelinjen. Også kaldet “block loading above-the-fold”.
Temaer og plugins til WordPress
Brug et hurtigt tema da dette har stor indflydelse på hastighed. Brug gerne et tema som koster penge, også kaldet for Premium eller Pro themes. For når du betaler, får du også nogle udviklere som gider at arbejde på et ordentligt tema og ikke mindst videreudvikle på det. Internettets standarder udvides hele tiden og derfor bør udvikling af tema eller plugins gøre det samme.
Brug bedre, hurtigere plugins og begræns brugen af plugins.
Der findes mange gode plugins derude og som jeg nævnte i starten – det er nemt blot at installere hvis man mangler en funktion. Men vær opmærksom på hvad du installerer. Igen er der tale om nogle udviklere der gør arbejdet ordentligt? Er funktionen nødvendig i forhold til hvis det plugin arbejdet imod resten af hjemmesiden.
Hver gang du tilføjer et plugin har du endnu flere databaseforespørgsler, HTTP-anmodninger og ikke mindst en filstørrelse at tage hensyn til. Det øger chancen for kompatibilitetsproblemer, hvilket yderligere kan påvirke belastningstiderne.
Af den grund er en god generel tommelfingerregel, at jo flere plugins du installerer, jo langsommere bliver dit websted.
Balancér høj sidehastighed med fantastisk webstedsdesign
Ud over alt det, vi har nævnt findes endnu flere små detaljer i forhold til sideoptimering:
- Optimering af database
- Undgå kode fra 3. parts integrationer
- Optimering af ændringer på sinde (post revisions)
- Optimering af kommentarer – primært på blogs
Men vi kan blive ved og det er vigtigt at huske, at der ikke er nogen perfekt løsning til hastighed. For alle hjemmesider er bygget forskelligt i forhold til levering af lige præcis deres data. Så vi kan koge det ned til at du skal teste og teste igen, for at finde balancen mellem, hvad der er brug for, hvad vores hjemmesiden kan levere, og hvor hurtigt vi leverer det.
Nogle gange vil du opleve at du må gå på kompromis for at levere hjemmesiden der giver dine kunder den “wow effekt” de fortjener. Hvis det grundlæggende bare er i orden kan du komme langt.
