Het verduurzamen van een website komt voornamelijk neer op het verminderen van het aantal kilobytes dat tussen de server en de bezoeker op en neer gestuurd wordt. Deze checklist is daarom gefocust op het voorkomen van onnodige data verspilling.
- Vervang video met Scalable Vector Graphics (SVG) of (WebP) afbeeldingen
Video's kunnen snel een paar MB groot zijn. Maar ze zijn niet altijd nodig want er zijn duurzamere alternatieven om informatie over te brengen. Bijvoorbeeld een interactieve SVG's die een honderdste zijn van de bestandsgrootte van een gemiddelde video. Of vervang de video's met afbeeldingen en tekst want volgens een onderzoek van het Baymard Institute is tekst nog steeds de belangrijkste factor op basis waarvan gebruikers een keuze maken.
- Vervang afbeeldingen met SVG bestanden
SVG bestanden zijn over het algemeen veel kleiner dan bijvoorbeeld JPEG of PNG bestanden. Als je bijvoorbeeld een infographic hebt met daarin tekst of getallen is het altijd verstandig een SVG te gebruiken omdat deze te vergroten zijn zonder dat de kwaliteit verloren gaat. Ook kun je kijken of foto's vervangen kunnen worden met illustraties of iconen die zich beter lenen voor het SVG bestandsformaat omdat er gebruik gemaakt wordt van vectoren.
- Gebruik WebP als bestandsformaat van je afbeeldingen in plaats van JPEG of PNG
Het WebP bestandsformaat wordt door alle grote browsers ondersteund en kan afbeeldingen 20 tot 30% kleiner maken. Meestal is het gebruik maken van WebP op een website het aanpassen van een instelling binnen een Content Management Systeem.
- Controleer of de conversie van de afbeeldingen optimaal staat ingesteld
Op veel website worden afbeeldingen op 100% kwaliteit getoond. Dit is in de meeste gevallen niet nodig en kan terug geschaald worden naar 85%. Voor het menselijk oog maakt dit geen verschil, maar het zorgt er wel voor dat de afbeeldingsbestanden kleiner worden.
- Is het onderdeel dat je ontwerpt of bouwt echt nodig?
Soms is het helemaal niet duidelijk of de eindgebruiker wel zit te wachten op hetgeen jij ontwerpt of bouwt. Neem bijvoorbeeld een nieuwsoverzicht op een homepage. Is dit een behoefte van de gebruiker? Een nieuwsoverzicht gaat meestal gepaard met een aantal afbeeldingen. Elke bezoeker die de homepage bezoekt moet deze afbeeldingen downloaden terwijl ze het nieuws helemaal niet (willen) lezen. Vraag je dus bij alles af of het echt noodzakelijk is: 'When in doubt, leave it out!'
- Controleer of de gebruikte hostingpartij groene stroom gebruikt
Zorg ervoor dat deze aangesloten is bij de Green Web Foundation zodat je zeker weet dat de hostingpartij groene stroom gebruikt.
- Is de klantreis geoptimaliseerd?
Controleer of de bezoeker snel haar/zijn doel kan bereiken. Worden er bijvoorbeeld geen onnodige tussenpagina's getoond? Of zijn bepaalde pagina's beter samen te voegen? Elke pagina die onnodig aan de bezoeker getoond wordt, moet gedownload worden, wat weer verspilde kilobytes oplevert.
- Controleer of er geen oude content meer benaderbaar is
Bekijk de statistieken van de website en zoom dan in op pagina's die niet vaak bezocht worden. Wat zijn dit voor een pagina's en voegen ze nog waarde toe? Een nieuwsbericht uit 2014, waar nog steeds bezoekers op komen, hoeft misschien niet meer online te staan. Wees kritisch op alle content die je aanbiedt en verwijder wat geen waarde meer heeft.
- Check of de cache van de website goed staat ingesteld
Met caching kun je ervoor zorgen dat bezoekers slechts gedeeltes van de website hoeven te downloaden als ze tussen pagina's navigeren. Het aanzetten van de cache is bij de meeste Content Management Systemen vrij simpel, je moet het alleen niet vergeten :)
- Is het mogelijk gebruik te maken van een Content Delivery Network (CDN)?
Met een CDN wordt de website op verschillende locaties over de hele wereld gehost. Dat betekent dat als iemand uit de Verenigde Staten jouw website bezoekt, de bezoeker de website vanuit de server in Amerika toegestuurd krijgt. Dit betekent dat de kilobytes een kortere afstand hoeven af te leggen wat weer energie (en dus uitstoot) bespaart. Daarnaast doen de meeste CDN diensten een extra optimalisatieslag op de afbeeldingen dus dat is mooi meegenomen.
- Controleer of de website goed te bekijken is op mobiele apparaten
In principe moet elke website die je ontwerpt en maakt uitgaan van het 'mobile first' principe. Waarbij je eerst de website ontwerpt voor de kleinere schermen van smartphones en dan pas ontwerpt en bouwt voor grotere schermen.
Deze manier van ontwerpen en bouwen zorgt ervoor dat je kritisch bent met wat je op het scherm laat zien (zoals onderdeel 5). Als jouw website geen fijne ervaring is op een kleiner scherm, en je de bezoekers forceert een groter scherm te gebruiken, dan kost dat extra stroom. Een groter scherm (en apparaat) verbruikt nu eenmaal meer stroom dan een smartphone.
Heb jij nog toevoegingen aan deze checklist?
Ben ik iets vergeten of heb je een vraag of opmerking over deze checklist? Laat het mij weten door hieronder een reactie achter te laten.
Ook een duurzame website?
Wil je jouw website of app duurzaam(er) maken? Stuur een mail naar [email protected] om te kijken of ik je kan helpen.