INDEXED Webbureau

4 nemme hastigheds tip til hjemmesider

4 nemme hastigheds tip til hjemmesider
Sværhedsgrad: 3/5
Målgruppe: Projektejer
Af

De her emner er dem som vi typisk berører når vi skal ind og vedligeholde en eksisterende hjemmeside. Problemet er som regel at siden ikke kører super hurtigt og vi skal gøre noget ved dette uden at investere en større mængde af timer.

Optimering af billedestørrelse og opløsning

Nok den største og mest oversete faktor når det kommer til hastighedsoptimering. En klassisk fejl er at tage et billede på sin smartphone og lægge det direkte op på hjemmesiden. Sådan et billede fylder måske et par megabyte og har en opløsning der er langt højere end selv de største skærme på markedet.

En hjemmeside kan typiske have følgende fordeling af data:

  1. HTML dokument: 50kb
  2. CSS: 100kb
  3. JS: 200kb
  4. Billeder: 500kb-10MB

Ligger der 10MB billeder på siden er html+css+js delen på 350kb derfor uvæsentlig og kan vi få halveret datastørrelsen på billeder er vi nede på 5MB hvilket stadig er en del men dog en forbedring.

Manglende cache er den næststørste faktor når det kommer til hastighed

Det vi gør er derfor følgende:

  1. Reducering af opløsning - typisk er max 1200px i bredden fint for billede galleri på desktop og f.eks. 400x px i bredden fint for mobil
  2. Reducering af fil størrelsen. Benyt jpg da dette format fylder mindst og er mest udbredt og her kan vi komme ned på 100-400kb per billede og langt mindre for thumbnails.
Hvordan dette gøres bedst afhænger af dit system og opsætning. På wordpress f.eks. kan man installere smush pro og ønsker du at gøre det manuelt kan du prøve kraken hvor du nemt kan uploade dine billeder og får en zip fil tilbage med de komprimerede.

Yderligere læsning

Aktivering af cache på statiske filer

Manglende cache er den næststørste faktor når det kommer til hastighed. Cache af html betyder at den ikke skal genereres ved hvert request men istedet kan der serveres en cached version. Når serveren generere en ny version skal koden eksekveres, databasen kaldes for data og html bygges. Dette går som sådan hurtigt nok men tager det alligevel 500ms så er det lang tid iforhold til en cached version som tager 50ms. Altså en faktor 10x besparelse. Derudover sparer man serveren for en hel masse resourser hviklet får det hele til at kører lidt hurtigere.

Yderligere læsning

CDN til resourse filer

Dette trick er mest velegnet til sider med meget trafik eller til sider som er meget tunge i forhold til statiske filer. CDN står for Content Delivery Network som er eksterne servere placeret over hele verden som hjælper med at levere dine billede filer frem til slutbrugeren. Disse filer kopieres over på deres netværk så de vil reelt kun blive hentet fra din server een gang og herefter kun fra CDN netværket.

Dette sparer rigtig meget båndbredde på serveren og den kan bruge sine resource på andre ting istedet. Derudover kan et CDN netværk være med til at leverere filer fra servere der er tættere på brugeren. Dvs. at en bruger fra Tyskland vil få billedet fra en tysk server og ikke fra f.eks. en amerikansk server.

Optimering af databasen

Frontend på hjemmesiden er optimeret men uanset hvor heftig cache der er på og hvor lidt det hele fylder så duer det ikke hvis serveren skal bruge adskillige sekunder på at leverer et HTML dokument til slutbrugeren. Nulstilles cachen så vil serveren blive bragt i knæ fordi den skal genopbygge det hele, det vil gøre setup skrøbeligt. Koden og databasen skal derfor fungere optimalt sammen.

Da omkodening er ret omkostningstung, risikofyldt og som regel slet ikke nødvendigt, så kigger vi på databasen istedet. I relationsdatabaser som MySQL har vi noget der hedder index. Det svarer kort fortalt, til et index i en telefonbog med angivelse af A, B, C osv. Ofte så mangler disse i en database da det er et område mange udviklere slet ikke har fokus på. Et tjek af databasen og angivelser af disse index kan få et meget langsom side til at køre hurtigt igen.

Afslutning

Listen er ikke udtømmende, langt fra, men det er de punkter vi altid selv starte med at tjekke når vi hastighedsoptimere hjemmesider uanset om det er wordpress, prestashop, drupal og andre. Principper fungere nemlig på alle typer af hjemmesider.

Yderligere læsning

100+
Projekter gennemført
til tiden
50+
Kunder har vi haft
glæde af at hjælpe
450
udviklingstimer til
rådighed hver måned
55
WordPress
løsninger udført