Een CO2-analyse van je website: zo doe je dat

5
minuten

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:

  • Heb ik dit daadwerkelijk nodig?
    Vaak heb je dingen aan je website toegevoegd die je eigenlijk niet nodig hebt. Bijvoorbeeld statistieken. Kijk je er écht naar? Maak je er gebruik van? Zo nee, lekker verwijderen. Of fonts: Is het daadwerkelijk nodig om tig verschillende custom fonts in te laden, of kan dat wel een tandje minder?
  • Kan ik dit minimaliseren of optimaliseren?
    Denk bijvoorbeeld aan het verkleinen van afbeelding voordat je ze uploadt, of het converteren van al je fonts naar woff formaat.
  • Is hier een duurzamer alternatief voor?
    Wil je audio of video embedden, kijk dan eens wat de meest lichtgewichte manier is om dat te doen. Of als je statistieken wilt bijhouden op je website, kijk dan eens naar alternatieven voor Google Analytics.
  • Is dit de beste plek?
    Som kun je je website ook verduurzamen door een betere plek voor iets te kiezen. Wil je echt op iedere pagina alle data voor Google Maps inladen omdat je het kaartje in je footer hebt geplaatst, of is het net zo prima om dat kaartje alleen op de contactpagina te tonen?

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.

Op de hoogte blijven van mijn duurzame webtips en filosofische hersenspinsels?
Schrijf je in voor mijn nieuwsbrief 👇🏻

Scroll naar boven