Ik ben van mening dat er niet altijd een performance tester nodig is om mogelijke performance verbeteringen te vinden en toe te passen. Met een aantal tools en wat kennis zijn er zelf al grote stappen te behalen. Google Pagespeed Insights is een goed startpunt om inzicht te krijgen in de snelheid van je website en de winst die te behalen valt. Google zet snelle websites ook hoger in de zoekresultaten dan langzame websites, dus performance verbeteren is altijd de moeite waard!
In dit artikel zal ik een eerste performance verbetering bespreken: het optimaliseren van afbeeldingen.
Websites worden steeds groter, waar volgens het HTTP archive een site in mei 2011 nog 722 KB groot was, is dat tegenwoordig al 2131 KB! Het merendeel van wat er over de lijn moet zijn afbeeldingen, namelijk 1332 KB. Hier valt heel wat winst te behalen door een aantal zaken in acht te nemen.
Moet je echt zoveel afbeeldingen gebruiken?
Een beetje flauw, maar een afbeelding die niet geladen hoeft te worden is natuurlijk het snelst. Vraag je dus af of de afbeelding die je wilt plaatsen ook daadwerkelijk iets toevoegt aan je website. Natuurlijk zijn afbeeldingen een krachtig instrument om een bepaalde sfeer en uitstraling te creëren maar de content is altijd het belangrijkst. Als je eenmaal besloten hebt welke afbeeldingen je op je site wilt gebruiken kun je door naar de volgende stap.
Afmetingen van je afbeeldingen
Nu kunnen we kijken naar de afmetingen van je afbeelding. Een afbeelding van 4272 x 2848 pixels gebruiken heeft weinig nut als je hem vervolgens op je site naar 500 x 333 schaalt. De eerste variant neemt bijna 4 MB in beslag, terwijl de tweede variant 132 KB in beslag neemt (zonder verdere compressie). In de praktijk heb ik hier een pijnlijk voorbeeld van gezien; een afbeelding die 25 MB groot was werd gebruikt voor een thumbnail van 220 x 105. Haal die maar eens binnen op je smartphone met beperkte databundel!
Kies het juiste type bestand
Heb je afbeeldingen met weinig kleuren en/of kleurvlakken met maar een enkele kleur? Gebruik dan PNG of GIF; deze bestandstypen gebruiken een compressie algoritme welke heel efficiënt om kan gaan met kleurvlakken en een beperkt aantal kleuren. Denk hierbij bijvoorbeeld aan logo’s. PNG is de opvolger van GIF en eigenlijk de beste keuze nu alle browsers deze standaard ondersteunen. GIF kan wel gebruikt worden voor animaties, wat PNG niet kan.
Wil je foto’s, screenshots of soortgelijk materiaal plaatsen? Gebruik dan JPEG, dit type is zeer geschikt voor foto’s. JPEG gebruikt een slim compressie algoritme wat de illustratie een klein beetje aanpast voor betere compressie zonder dat de gebruiker dit opvalt. Een afweging tussen kwaliteit en grootte moet wel worden gemaakt (zie hieronder).
Optimalisatie: lossless en lossy
Nu we het juiste type bestand en afmetingen hebben gekozen kunnen we naar de volgende stap: lossless en lossy optimalisatie. Bij het lossless optimaliseren maak je een afbeelding kleiner qua bestandsgrootte zonder de kwaliteit van de afbeelding negatief te beïnvloeden. Hierbij probeert het compressie algoritme patronen te vinden in de illustratie en zo deze slimmer op te slaan. In het geval van een PNG zou je je voor kunnen stellen dat aangesloten vlakken met dezelfde kleur opgeslagen worden als breedte maal hoogte en kleur. De werkelijkheid is iets ingewikkelder natuurlijk maar dit geeft je hopelijk een goed idee hoe je een illustratie “kleiner” kunt bewaren zonder dat je gegevens hoeft weg te gooien; losless compressie (comprimeren zonder verlies).
Bij lossy optimalisatie wordt de illustratie een klein beetje aangepast zodat het compressie algoritme het efficiënter op kan slaan. Het idee achter deze methode is dat de aanpassing zo klein en subtiel is dat het, tenzij je heel goed kijkt, niet opvalt dat de illustratie is gewijzigd. Dit terwijl deze nu wel kleiner opgeslagen kan worden! Heel belangrijk bij lossy compressie is dat je zelf aan kunt geven hoe veel compressie je wilt toepassen. Wat is nu een juist compressie niveau? Dat is heel simpel; je wilt zo veel mogelijk comprimeren zonder dat de illustratie er lelijk uit komt te zien. De meeste grafische software toont tegenwoordig een preview voor het opslaan zodat je heel gemakkelijk kunt beoordelen wat het gewenste compressie niveau is.
Hieronder een voorbeeld, origineel is deze afbeelding 4 MB voor het verkleinen qua afmetingen. Met Paint.NET heb ik de afmetingen aangepast en verschillende quality settings gebruikt. In de afbeelding hieronder zie je het effect van de quality setting op de grootte en de kwaliteit van de afbeelding. Zie jij verschil tussen quality setting 100 en 90? Dit terwijl de bestandsgrootte nog maar één derde van de grootte is! Aan de rechterzijde kun je zien wat er gebeurt als je de compressie (te) hoog instelt. De wijzigingen die de compressie aanbrengt vallen nu op; de illustratie wordt blokkerig en vies.
Er valt dus veel te bereiken op het gebied van performance alleen al door je afbeeldingen te optimaliseren. Door het volgen van een paar simpele stappen maak je de gebruikservaring van de bezoekers op je website een stuk prettiger en kom je zelfs hoger in de ranking van Google!
Samengevat
- Bepaal welke afbeeldingen echt nodig zijn
- Sla ze altijd op in de uiteindelijke grootte waarop je ze ook afbeeld
- Kies het juiste bestandstype (dit bepaalt de vorm van compressie)
- Kies als laatste de juiste compressie instellingen (experimenteer!)
- Ga naar Google Pagespeed Insights en geniet van de bereikte resultaten
