Sådan bliver din hjemmeside hurtig

Findes der noget mere frustrerende, end når man som bruger kommer ind på en dræbende langsom hjemmeside? Nej, vel?

Vores tålmodighed er til at overse, når vi er på jagt efter informationer eller produkter på nettet. Lander vi på et website, der loader langsomt, hopper vi bare videre til det næste i rækken.

Sløj hastighed bringer ikke noget godt med sig. Det er en dårlig oplevelse for brugeren og dermed også for dig, der ejer det pågældende website. Du mister nemlig potentielle ordrer, og Google registrerer, at brugerne hurtigt forlader din side igen.

Hvordan forhindrer du så, at det sker? Svaret er øget fokus på hastighedsoptimering.

Hastighedsoptimering er en tung disciplin, som både indbefatter en masse teoretisk viden og teknisk snilde. Men hvad er egentlig årsagen til, at der bliver fokuseret så meget på det lige nu?

I takt med at Google justerer deres algoritme for at skabe bedre resultater for deres brugere, er hastighedsoptimering gradvist begyndt at få en mere prominent rolle. Senest har Google proklameret, at hastigheden på din hjemmeside bliver en direkte rangeringsfaktor. Vil du så blive straffet for at have forsømt din hjemmesides hastighed? – Ja, det tyder alt på.

Udover blot at kæle for Googles algoritme har hastigheden også en langt mere umiddelbar funktion. Nemlig at please dine brugere. Undersøgelser viser, at du enten taber eller vinder dine brugere på det første sekund. Konsekvensen af en hjemmeside med over 1 sekunds “ventetid” er som minimum følgende:

• 11% færre sidevisninger
• 16% dårligere kundeoplevelse
• 7% tabte konverteringer

Det er faktisk ret simpelt. Loadhastigheden påvirker den totale brugeroplevelse, din konverteringsrate og derigennem din bundlinje.

Der er med andre ord ingen undskyldninger. Få hænderne op af lommerne og gør noget ved hastigheden! Det er et must, hvis du har nogen form for ambitioner med din digitale tilstedeværelse.

I indlægget her vil jeg forsøge at anskueliggøre de lavest hængende frugter, som danner fundamentet for et hurtigt site.

Ta’ temperaturen

Indledningsvis er det en god idé at finde ud af, hvordan din hjemmeside præsterer. Der findes et hav af værktøjer, som kan analysere din hjemmeside og påpeger præcis, hvor du bør sætte ind. Selv foretrækker jeg GTmetrix. Værktøjet er både gratis, dybdegående og i øvrigt meget pædagogisk. Brugerfladen er intuitiv og bedømmer dit site på en skala fra 1-100. Foruden en overordnet score bedømmes der også på de enkelte parametre, så du ved præcis, hvor lokummet brænder.

Fremgangsmåden for din hastighedsoptimering afhænger meget af, hvordan din hjemmeside er skruet sammen – og selvfølgelig også af din tekniske kunnen. De fleste Open Source CMS’er giver dig rig mulighed for at optimere gennem diverse plugins og sparer dig for at bruge penge på en udvikler.

Er din hjemmeside som de fleste andre, vil der være de sædvanlige optimeringsmuligheder, som du med fordel kan begynde med. Dem får du lige her.

Overflødige plugins

Plugins er et suveræn supplement, som virkelig kan bidrage til en flot og funktionsdygtig hjemmeside. Men! Jeg må desværre konstatere, at mange plugins er de største syndere, når det kommer til hastighedsoptimering. Den korte forklaring er, at jo flere plugins du har, jo flere filer vil blive kaldt på din side. Og hvis der er noget, din browser bliver langsom af, er det at suse ind og ud af filer. Udover mængden af plugins er kvaliteten absolut også et parameter, man ikke må tage for givet, idet der er stor forskel på, hvor optimeret og komprimeret koden er. Dårlige plugins er tilmed en af de største sikkerhedsbrister, som hurtigt kan koste dig dit website.

Jeg anbefaler derfor, at du vælger med omhu. Installér de plugins, der gavner din forretning og lad “smarte” gadgets udeblive.

Komprimér dine billeder

En helt fundamental manøvre er konsekvent at komprimere dine billeder. I denne sammenhæng er der to fundamentale aspekter; beskæring (længde & bredde) og komprimering (KB/MB). Man skal derfor tage højde for begge og eksekvere af samme omgang.

Beskæring
Det indledende spørgsmål her er, hvor du bruger billedet? Bruges billedet eksempelvis i en stor slider, bør størrelsen også være derefter. Har du problemer med at finde størrelsen på et specifikt billede, kan du gøre som følger:

• Hent et Chrome extension ved navn “Image Size Info“.
• Åben dit website og find det billede du gerne vil optimere. Højreklik på det og tryk derefter på “View Info”.

Her ser du, hvor stort billedet reelt set er, og hvor stort billedet bliver vist i det aktuelle miljø (indsæt billede).

Med denne info kender du nu de eksakte mål, som billedet skal nedjusteres til.

Komprimering
Mange mener, at de ikke vil gå på kompromis med kvaliteten, da deres produkter skal vises bedst muligt – hvilket i og for sig også er en sund holdning. Det er dog muligt at komprimere et billede uden at miste kvaliteten. Det vil sige færre bytes, men samme kvalitet. Dette gøres enten med Lossy- eller Lossless compression. I grove træk bliver filstørrelserne mindre ved at reducere antallet af farver på billedet, og færre bytes er derfor nødvendig for at gemme billedet. Visuelt er forskellen nærmest usynlig, men komprimeringen har en kæmpe effekt på filens størrelse.

Er din hjemmeside bygget i WordPress, kan du anvende pluginet: Smush Image Compression and Optimization. Dette plugin varetager selv komprimeringen af billederne i takt med, at du uploader dem. Bruger du ikke WordPress, kan du med fordel køre dine filer igennem TinyPNG.com, inden de uploades.

Begræns dine “forespørgsler”

Hver gang du henviser til en fil, laver din browser en forespørgsel til serveren. Når dette sker, opstår der ofte en mindre forsinkelse, som giver et negativt udslag på din sides hastighed.

Tænkt eksempel
Du har drevet webshop i godt 5 år, og i den tid er du blevet anbefalet en masse smarte værktøjer, der skal skabe indsigt og mersalg for din forretning. MailChimp, SleekNote, Pixels, Analytics, Hotjar, CrazyEgg, Facebook Messenger Plugin, LinkedIn Conversion Tracking? Udover dette har du selvfølgelig også en font til brødteksten i tre forskellige tykkelser, én til overskrifter og en sidste i kursiv til kundeudtalelser. Slutteligt henviser du til 17 forskellige JavaScript filer, som alle bidrager med hver deres fancy effekt – for hvad er vigtigere end en flot hjemmeside?

Der findes helt sikkert et hav af gode argumenter for ovenstående implementeringer. Men i sidste ende er det altså hastigheden på din hjemmeside, der kommer til at lide.

Sådan løser du det

Genovervej og prioritér dine forespørgsler
Er din forretning afhængig af de mange forskellige skrifttyper? Eller bruger du overhovedet LinkedIn Konverterings Tracker? Slet alt, der hyppigt bliver taget i brug og ikke giver den ønskede effekt.

Kombinér dine CSS og Javscript filer
Fremfor at henvise til 5 forskellige JavaScript filer kan du med god samvittighed kondensere alle ned i én fil. Du kan enten bede din udvikler om at gøre det eller finde et plugin, der gør jobbet for dig. Er din webshop bygget i WordPress, vil jeg anbefale Autoptimize.

Anvend cache

Du har måske hørt om den famøse cache, men aldrig rigtig forstået hvad dens funktion er? Helt lavpraktisk er cache et lager, der indeholder data fra hjemmesider, du tidligere har besøgt. Forestil dig at du besøger wemarket.dk for første gang. Her vil browseren loade al JavaScript, CSS og HTML direkte fra serveren. Anden gang du besøger wemarket.dk, har din browser “cachet” alt denne data og placeret det i dit lager. Ved andet besøg kan browseren så finde dataen fra dit lager væsentlig hurtigere, end hvis den skulle lede og downloade direkte fra serveren.

Er du ikke indehaver af en cache, er du heldigvis ikke på bar bund. Der er lavet plugins til de fleste CMS.

Tjek din PHP version (såfremt din side anvender PHP)

Ikke mange er klar over det, men PHP versionen har stor betydning for, hvor hurtig din side bliver læst. Dette er ikke en ændring, du kan foretage fra hjemmeside, men hos din host. (Eksempelvis Unoeuro, One.com, SurfTown)

De tilgængelige versioner strækker sig ofte fra PHP 5.0 frem til 7.4.

Anbefalingen herfra er, at du opdaterer til den nyeste, tilgængelige version. Du skal dog være opmærksom på, at det kan have indflydelse på, hvordan din side bliver vist.

Kontakt gerne din udvikler og få ham til at opdatere PHP versionen og få hjælp til alle de øvrige lavt hængende frugter fra mit blogindlæg. Det bliver både du og dine potentielle kunder glade for.

Andre relevante artikler:
Google lancerer bedre muligheder for splittest
Hvorfor vælger Google at skifte deres indeks til Mobile First?

WeMarket har en bred erfaring med design af nye hjemmesider, læs mere her.