Zelf een duurzaamheidsanalyse van je website doen is helemaal niet moeilijk. Je moet alleen even weten wat de handige tools zijn, en hoe je de data kunt interpreteren. Vervolgens kun je met die resultaten aan de slag om je website daadwerkelijk te verduurzamen! Ook kun je deze manier van analyse heel goed inzetten tijden het bouwen van een nieuwe website, of het toevoegen van nieuwe pagina’s.
Stap 1: Pagina-analyse
Mijn favoriete tool om webpagina’s door te meten is Digital Beacon. (For now, binnenkort heb ik mijn eigen toolie precies naar mijn eigen wensen, yay!) Je gooit hier een URL in, en hij spuugt het gewicht + de CO2-uitstoot van je pagina uit, netjes gesorteerd per asset type.
Let op: Welke publieke gratis tool je ook gebruikt, je meet altijd alleen die ene pagina die je erin gooit, voor één paginabezoek. Die resultaten zeggen niks over de rest van de website. Gooi je er een andere pagina in, dan krijg je andere resultaten. Wil je dus je hele website analyseren en overkoepelende patronen spotten, dan moet je dus in principe iedere pagina door die tool trekken.
Ja, dat is veel werk. Klopt. Vooral als je een grote website hebt. En bij websites met tienduizenden content entries is dat basically niet te doen. Maar voor kleine ondernemers met een basic website van een paar pagina’s kun je die data prima met de hand even in een excelletje gooien en daar gemiddeldes, maxima en minima uit trekken.
Stap 2: Getallen interpreteren
Digital Beacon en Website Carbon Calculator meten allebei op dezelfde manier tegenwoordig, en gebruiken hetzelfde “energielabel” systeem om jouw resultaten weer te geven. Het verschil is vooral dat Digital Beacon je meer details geeft.
Het energielabel dat jouw pagina heeft, geeft weer hoe duurzaam die pagina wel of niet is. De volledige tabel vind je hier (die ga ik niet herkauwen). Heel kort: Scoort jouw pagina F, dan is dat slechter dan het wereldwijde gemiddelde. A+ t/m E is beter dan het wereldwijde gemiddelde. Maar “E” betekent niet per se duurzaam! In duurzaam-webdesign-land is min of meer de consensus dat een pagina onder de 1 MB als duurzaam beschouwd kan worden. Dus label A+, A of B.
Stap 3: Verbeterpunten opsporen
Anyway, met Digital Beacon krijg je dus heel mooi een overzichtje per asset type. Daarin kun je zien in welk gebied jouw verbeterpunten zitten. Vaak zijn dat images, scripts of fonts. Hoe hoger het getal, hoe groter het verbeterpunt! Houd er wel rekening mee dat sommige getallen in megabytes worden weergegeven, omdat dat makkelijker leest dan kilobytes bij hogere getallen. Zie je ergens MB staan in het overzichtje, dan is dat sowieso een red flag. Ook een hoog aantal requests per type kan een aanleiding zijn om er wat meer in te duiken.
Voor meer details over welke specifieke assets dan voor verduurzaming vatbaar zijn, kun je het beste de Chrome developer tools gebruiken (View >> Developer >> Developer tools). De functie “network” laat je precies zien hoe zwaar iedere asset is, en je kunt makkelijk sorteren op type. Zie je bijvoorbeeld in Digital Beacon dat jouw images op een bepaalde pagina erg zwaar zijn, dan kun je in de developer tools zien welke images er allemaal op jouw pagina staan en welke er dan zo zwaar zijn.
Stap 4: Website verduurzamen
Wanneer je de pijnpunten gelokaliseerd hebt, kun je aan de slag om te verduurzamen. Sommige dingen moet je echt per pagina aanpakken, bijvoorbeeld het optimaliseren van afbeeldingen. Andere dingen pak je sitewide aan, bijvoorbeeld fonts en de meeste scripts.
Vragen die je jezelf kunt stellen:
Stap 5: Tweede meting
Klaar met verduurzamen? Doe dan een tweede meting om te zien hoeveel het scheelt, en om te kijken of je nog dingen over het hoofd hebt gezien.
Wil jij inzicht in de CO2-uitstoot van jouw website? Kun jij wel praktische, persoonlijke handvatten gebruiken om jouw website te verduurzamen? Vraag dan een Website Sustainability Analyse aan!
Gepubliceerd: 29 jan 2024, laatst geüpdatet: 31 jan 2025