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 billedegalleri på desktop og f.eks. 400x px i bredden fint for mobil
  2. Reducering af filstø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.

2. 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 genererer 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 i forhold til en cached version, som tager 50ms. Altså en faktor 10x besparelse. Derudover sparer man serveren for en hel masse ressourcer, hvilket får det hele til at kører lidt hurtigere. 

3. CDN til ressourcefiler

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 ressourcer på andre ting i stedet. Derudover kan et CDN netværk være med til at levere 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.

4. 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 levere 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 omkodning er ret omkostningstungt, risikofyldt, og som regel slet ikke nødvendigt, så kigger vi på databasen i stedet. 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å en 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 starter med at tjekke, når vi hastighedsoptimerer hjemmesider, uanset om det er wordpress, prestashop, drupal og andre. Principper fungerer nemlig på alle typer af hjemmesider.