Få styr på dine billedestørrelser eller få baghjul

Læsetid: 7 minutter

Vi har et samfund der forventer 1-dags pakkeleveringer og hvor YouTube klip på mere end 2 minutter, er for lange. Vores teknologi gør os utålmodige.

Vi lever i en tid hvor de fleste forventer at få næsten øjeblikkelig respons. Vi bliver mere og mere utålmodige på Internettet og i takt med hurtigere Internetforbindelser og hurtigere smartphones.

Jeg husker fra mine tidlige ungdoms år, at have adgang til et 56k modem – Det var helt vanvittig hurtigt dengang! Så fik jeg adgang til ISDN og pludselig var et 56k modem noget der fik mig til, at føle at livet næsten visnede bort mens jeg ventede.

I dag sidder jeg til daglig på en fiberforbindelse og hvis den webside jeg vil ind på ikke er loadet færdig inden for 5 sekunder, så er jeg så småt på vej væk igen. Og med 5 sekunder er jeg tilmed ret tålmodig – De fleste smutter inden 3 sekunder.

Det er den samlede vægt der tæller

Når en hjemmeside indlæses så kan det måske virke helt vanvittigt for den almene bruger, at tale om en besparelse på f.eks. 10kB på et billede på 100kB – altså en procentvis besparelse på godt 10%

Særligt hvis hele hjemmesiden fylder f.eks. 2MB totalt (hvilket er det samme som 2.000 kB)

Øhh.. Yan, hvad er de kB?

kB står for kilobyte og er en måleenhed for hvor meget en hjemmeside f.eks. fylder, nogle gange angives det i MB (Megabyte). Jo mere en hjemmeside fylder, jo langsommere er den typisk at indlæse.

Gør vægten af hver del mindre

For at gøre det lidt mere enkelt, så overvej følgende analogi. Lad os sige du skal på tur og din rygsæks samlede vægt er 18kg. Hvis vi fjerner et par sokker, mærker du formentlig ikke den fjerneste forskel, det er hvad det svarer til hvis vi sparer 10% på ét billede på din hjemmeside.

rygsaek

Hvad nu hvis vi fjernede 10% af vægten, på alle de forskellige ting i rygsækken, altså 10% af vægten fra sokker, 10% af vandflasken, osv. Nu vejer rygsækken pludselig 10% mindre – altså 1.8kg mindre. Det er en forskel enhver kan mærke.

På samme måde er det med din hjemmeside. Hvis vi kan fjerne bare en smule af alle delene der skal indlæses – vel og mærke uden at der går noget tabt, så bliver den lettere og dermed hurtigere at indlæse. Det øger sandsynligheden for, at dine brugere bliver hængende.

Google kigger på hastigheden på din side

traffic-google-analytics

Dine brugere er ikke de eneste som kigger på hvor hurtigt din side indlæses. Google anvender også hjemmesiders indlæsningstider som en indikation ifht. hvordan din side rangerer i Googles Søgeresultater.

Så ved at spare på “vægten” af din hjemmeside bliver Google også gladere. Det betyder at din side få en smule højere sandsynlighed for, at rangere godt.

Størrelsen på siden gør det naturligvis ikke alene – Det er der få ting i denne verden der gør. Der er ikke mirakel kure, men at optimere alle delene, gør helheden bedre.

Start med dine billeder

Der er mange steder du kan optimere din hjemmeside, men har du ikke en vis mængde teknisk indsigt så giver råd som:

  • Du skal komprimere javascript
  • Du skal installere og opsætte caching
  • Du skal reducere antallet af requests din side laver

Ikke særlig meget mening! Uanset at de er gode, korrekte råd, så hjælper det bare ikke særligt meget når den almene hjemmeside ejer ikke ved hvordan dælan det lige er det gøres.

Der er dog et område som du har fuld kontrol over og du behøver ikke tekniske egenskab for, at gøre det. Du starter med, at reducere størrelsen på dine billeder på hjemmesiden.

Ja tak, og hvordan gør jeg så lige det?

Du starter med at anvende en service som TinyPNG – https://tinypng.com/ der kan gøre det helt automatisk og uden at dine billeder mister kvalitet!

I dette eksempel kørte jeg samme billede 3 gange igennem og sparede totalt 33.6%
I dette eksempel kørte jeg samme billede 3 gange igennem og sparede totalt 33.6%

Et eksempel på dette er billedet nedenfor som jeg kørte 3 gange igennem TinyPNG og gik fra en billedstørrelse på 131.9kB til 87.5 kB – altså en reduktion på godt 33,6%.

Du kan klikke på billedet nedenfor og se om du kan se nogen forskel – Det kræver formentlig en rigtig god lup hvis du skal se forskel.

TinyPNG før efter

Start med dine vigtigste sider

Hvis du træffer et valg om, at fremover før du lægger et billede op, så åbner du TinyPNG – https://tinypng.com/ og kører dine billeder igennem, så er du allerede godt på vej.

Det mest optimale vil naturligvis være, at du gjorde det med alle dine billeder. Jeg ved dog godt, at det kræver tid og næppe er det første du gør. Så start i stedet for med de vigtigste og mest besøgte sider og blogindlæg.

Der findes også plugins

Du kan også vælge at anvende plugins til den slags, det er dog ikke dem jeg anbefaler som den første løsning med mindre du har styr på teknikken, da de oftest kræver en konto eller at den server som din hjemmeside ligger på, har adgang til nogle specielle moduler.

Det kan hurtigt blive langhåret hvis ikke du ved 100% hvad du laver – Gør du det, så kan du kaste dig ud i et af de nedenstående plugins – VIGTIGT vælg kun ét af dem, da mere ikke er bedre i dette tilfælde.

Tiny PNG for WordPress

ShortPixel

WP SmushIt

EWWW Image Optimizer

Imsanity

Til sidst: Overvej Lazy Loading

Det sidste skridt i lavthængende frugter, som kan gøre din hjemmeside indlæses hurtigere er Lazy Loading af billeder.

Lazy Loading betyder på Dansk, at dine billeder først indlæses når de vises i den besøgendes skærm, altså indlæses de i takt med at brugeren scroller ned over skærmen.

Et rigtig godt plugin til dette er BJ Lazy Load – https://wordpress.org/plugins/bj-lazy-load/ som klarer dette automatisk for dig.

Dog skal du tjekke at brugeroplevelsen er den samme efter du har installeret pluginnet og aktiveret det, da det for nogle kan give lidt spøjse brugeroplevelser.

Og som altid, har du spørgsmål eller kommentarer så giv lyd fra dig nedenfor – Hav en skøn dag!

Skriv en kommentar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

Klar på mere inspiration?

Lyt til vores WordPress podcast!