In augustus heb ik een paar homepages van milieu-organisaties getest op duurzaamheid, puur uit nieuwsgierigheid. Met wat tips erbij als ze niet zo duurzaam waren. Dat was behoorlijk populair op LinkedIn, dus ik peilde even waar jullie nog meer case studies van wilden zien: andere webdesigners, ecoblogs, of grote vervuilers. Met 77% van de stemmen kwamen de grote vervuilers als grootste uit de bus. Door drukte heeft bloggen even op een laag pitje gestaan, maar inmiddels heb ik er weer tijd voor. Dus: u vraagt, wij draaien!
Kleine disclaimer: Deze blgpost is niet bedoeld om te bashen of the shamen, maar komt voort uit nieuwsgierigheid. Daarom houd ik het graag constructief met praktische tips, mocht een website niet zo goed uit de bus komen. Aan de andere kant betekent het natuurlijk niet dat als een homepage beoordeeld wordt als “duurzaam”, dat dan de hele website duurzaam is, of het hele bedrijf opeens goed bezig is. Of een website nou mooi lichtgewicht gebouwd is, of juist nog veel verbeterpunten heeft, verlies niet uit het oog dat de website maar één onderdeel is van de complete bedrijfsvoering.
Hoe heb ik getest?
Nog even ter herinnering: Hoe voer ik deze case study uit? Ik test voor deze blog geen volledige websites, dat kost teveel moeite. Ik voer 2 snelle tests uit:
Ten eerste heb ik de hosting gecheckt met de tool van thegreenwebfoundation.org. Deze resultaten gelden in principe voor de hele website.
Daarnaast heb ik de homepage door de tool van Digital Beacon gehaald om te kijken hoeveel CO2 één paginabezoekje uitspuugt. Voor details heb ik sommige ook nog even in de inspector van With Cabin gestopt, of door aremythirdpartiesgreen.com gehaald, om gerichter tips te kunnen geven.
Inmiddels is er een nieuwe standaard voor het doormeten van websites die gehanteerd wordt door Website Carbon Calculator en Digital Beacon, waar je naast het gewicht en de CO2-uitstoot van de pagina ook een “energielabel” krijgt. Hier lees je daar meer over. Naar mijn mening is een webpagina duurzaam wanneer die minder dan 1 MB weegt. Dat komt ongeveer overeen met een label B of hoger.
Let op: Deze resultaten zijn alleen voor de homepage en zeggen niks over de rest van de website.
Al deze websites zijn getest op 4 december 2023.
Shell
Dit vind ik dus het leuke aan dit soort geintjes: onverwachte resultaten! De website van Shell is groen gehost. Daarnaast krijgt hun homepage energielabel B, en zijn alle third party requests van de homepage ook groen gehost. Er worden 11 afbeeldingen aangeroepen die bij elkaar ongeveer 348 kB wegen. Prima optimalisatie van individuele afbeeldingen dus.
Wat misschien wel lager kan, zijn de resultaten voor scripts. Er worden er 18 scripts aangeroepen die samen 344 kB wegen. Dat is best wel veel voor wat de homepage feitelijk is: wat tekst en plaatjes. Dat zou structureel lichtgewichter gebouwd kunnen worden.
KLM
De website van KLM is een stuk zwaarder dan Shell. En gezien klm.nl vermoedelijk een drukbezochte website is, is dit wel een flink ouch-moment. Dit ligt vooral aan de scripts: 43 requests, goed voor wel 1,44 MB. Dit komt voor een deel doordat de homepage van KLM niet alleen statische content bevat, maar ook realtime suggesties voor vluchten, een boekingstooltje en een sticky melding over vertraging door sneeuwval. Maar 1,44 MB? Dat vind ik wel heel veel. Dat zou efficiënter moeten kunnen.
Qua optimalisatie van de individuele afbeeldingen doet KLM het prima, net als Shell. Wel zijn het er heel veel: 27 (goed voor zo’n 363 kB), en een groot deel van de 34 XHR requests zijn óók afbeeldingen: dus daar wordt nog een goed deel van 201 kB bij opgeteld. Sowieso tel ik flink meer afbeeldingsrequests dan daadwerkelijk afbeeldingen, dus dat is ook iets om naar te kijken.
Boskalis
Wat mij meteen opviel, was dat Boskalis een video als header header heeft op de homepage. “Oei, dat zal waarschijnlijk flink aantikken,” was mijn eerste gedachte. Ik zag het zo gauw niet in de resultaten van Digital Beacon, maar volgens mij kan die ook niet voorbij de cookie wall meten in dit geval. Klik je de cookie wall echter weg, dan laadt de video in, en als ik even stiekem in Chrome Developer Tools kijk, weegt de hele pagina bijna 30(!!!) MB. Yikes.
Dus Boskalis: Er valt al een wereld te winnen als jullie de automatisch afspelende video uit de header verwijderen en vervangen door jullie mooiste foto.
Verder is het vast niet nodig om 6 fonts van samen 393 kB in te laden, en 821 kB aan scripts is ook erg zwaar voor een pagina die vooral uit tekst, afbeeldingen, en een paar video’s bestaat, en geen complexe interactieve content bevat. Maar het is moeilijk te beoordelen door die cookiewall die de meting door de war stuurt.
Daarnaast leerde ik dat als je Matomo niet op je eigen server installeert, maar gebruik maakt van hun cloud, dat hun CDN niet in alle gevallen als groen beoordeeld wordt. Dat kan beter, Matomo!
ING
ING heeft in totaal een nette, lichtgewicht homepage, zonder overmatig veel of grote afbeeldingen, of andere media. Complimenten! Alleen scripts vind ik wat aan de hoge kant, dik 400 kB, voor een beetje tekst en wat afbeeldingen. Maar als je bedenkt dat deze site in zijn geheel gebouwd is voor complexe interactie (namelijk online bankieren), en dat daar toch wel over nagedacht is bij het ontwerp en dat je dat toch op een of andere manier wel gaat merken in de basis, dan vind ik dit niet supergek ofzo. Heb hier eigenlijk niet echt iets over te klagen 😉
Rabobank
Dat er grote verschillen zitten in websites tussen bedrijven die in essentie hetzelfde doen, zie je bij Rabobank. 1.14 MB aan scripts (ongeveer 3x zoveel als ING). Voor de rest zijn de resultaten best netjes en zie ik geen gekke grote waardes. Alleen deze uitschieter dus. Ok hier vermoed ik dat de enorme bak aan javascript die gedownload wordt, te maken heeft met het doel van de website in zijn geheel: de complexe interactie van internetbankieren. Maar dan dus minder strak en efficiënt dan de ING. Daar zit dus waarschijnlijk nog wel mogelijkheid voor verbetering!
Agrifirm
Dit is een typische website waar naar mijn idee eigenlijk helemaal niet nagedacht is over het paginagewicht. Er valt dus een hoop te verbeteren! Grootste pijnpunt: afbeeldingen. 37 stuks, samen goed voor 2,66 MB. Begin daar maar eens met optimaliseren. Ook wordt er meer dan een halve MB aan scripts gedownload, wat ontzettend veel is voor een pagina die bestaat uit tekst en plaatjes, en een website die op het eerste gezicht ook vooral bestaat uit eenvoudige statische pagina’s. Daar valt dus ook nog wat te winnen.
Benieuwd naar de case study met milieu-organisaties? Die vind je hier.
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!