Van een organisatie die zich groen en duurzaam profileert, mag je verwachten dat ze ook een lichtgewicht, duurzame, en groen gehoste website hebben, toch? Duurzame waarden, duurzame digitale voordeur enzo. Ik heb een aantal websites van grote duurzame organisaties onder de loep genomen, allemaal partijen die ik een warm hart toedraag. Ik deed een snelle check om te kijken in hoeverre hun website aansluit bij hun duurzame waarden, en geef tips waar ze het snelst kunnen verduurzamen.
Hoe heb ik getest?
Ik heb 2 snelle tests gedaan: 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.
Let op: Deze resultaten zijn alleen voor de homepage en zeggen niks over de rest van de website.
Alle pagina’s zijn gecheckt op 25 juli 2023. De grootste pijnpunten: Afbeeldingen en scripts. Voor het optimaliseren van afbeeldingen heb ik een aparte blogpost geschreven met heel veel tips, omdat je op dat gebied heel makkelijk kunt verduurzamen, zonder dat je je site structureel op de schop hoeft te nemen.
B Corp EU
Quick win
Deze pagina draait meer dan een hele megabyte (MB) aan scripts! Dat kan fors minder. Meestal ligt dit aan één of meer van de volgende issues: Er is een zware, niet-zo-efficiënte WordPress builder plugin gebruikt, of er worden zware, inefficiënte plugins gebruikt. Daarnaast wordt er ook bijna anderhalve MB aan third party scripts aangeroepen, dat kan ook minder en efficiënter!
Greenpeace
Quick win
De pijnpunten van deze pagina zijn vooral de enorme afbeeldingen (1,5 MB) en scripts (1+ MB). Greenpeace doet er goed aan om afbeeldingen eerst te verkleinen en te optimaliseren voor ze te uploaden. Daarnaast zijn het logo en de iconen in .png formaat. Dit kan veel lichtgewichter als ze .webp of .svg gebruiken. Verder ook hier heel veel zware third party scripts, wel meer dan 2 MB!
Milieudefensie
Quick win
Milieudefensie kan vooral nog op het gebied van afbeeldingen stappen zetten: door ze te verkleinen en van het .webp formaat gebruik te maken. (Vooral de header afbeelding!) Daarnaast zijn de logo’s onderaan de pagina allemaal .png bestanden. Dit kan efficiënter als .webp of .svg. Qua scripts en third party scripts doen ze het een stuk beter dan bovenstaande websites, maar nog steeds vrij hoge scores hier.
Trees for All
Quick win
Ook hier: Images en scripts. De duurzame pijnpunten van de meeste websites. Trees for All maakt al wel gebruik van het .webp formaat, maar de afbeeldingen zijn vaak nog erg groot. Zij kunnen vooral nog kilobytes winnen door hun afbeeldingen bijvoorbeeld te exporteren op 90, 85 of 80% kwaliteit. Of door de Instagram feed te verwijderen of de afbeeldingen daarvan te verkleinen – dit kan bij import van de feed op de website, maar ook bij het uploaden naar Instagram.
Extinction Rebellion
Quick win
De server waar de website van XR wordt gehost, staat niet in een datacenter dat bekend is bij The Green Web Foundation. Nou hoeft dat geen drama te zijn: dat een datacenter niet als groen is aangemeld bij TGWF, betekent nog niet dat hij niet groen gehost is. Wel is het slim voor XR om even dubbel te checken of hun webhosting op groene energie draait.
Verder zijn ook hier afbeeldingen veruit de grootste datavreters. De fotogalerij is één grote afbeelding die veel groter is dan nodig, de titelfoto en de andere paginabrede foto die als achtergrond worden gebruikt kunnen ook kleiner, en er wordt op desktop ook een foto voor de mobiele versie ingeladen, die echter niet gebruikt wordt. Zonde.
Fossielvrij NL
Quick win
Ik blijf in de herhaling vallen, ook hier zijn afbeeldingen de grootste pijnpunten met meer dan 1,5 MB. Zorg dat ze niet groter zijn dan nodig, kies voor .webp in plaats van .jpg, en kijk of 90, 85 of zelfs 80% kwaliteit ook voldoende is.
Natuurmonumenten
Quick win
De website van Natuurmonumenten is op een manier gebouwd die ik niet helemaal in 5 minuten kan doorgronden – veel en grote afbeeldingen, maar wel soort van richting de lichte kant en sneller dan ik zou verwachten. Goede caching, denk ik. Bij natuurmonumenten zorgen third party scripts en afbeeldingen voor een hoop uitstoot. With Cabin, wat dan weer op een net wat andere manier meet, laat dramatisch hoge getallen zien bij scripts en “other”. Veel third party / “other” komt van Cloudinary, een platform voor foto- en video optimalisatie. In mijn ogen heb je dat niet nodig als je je afbeeldingen offline optimaliseert voordat je ze uploadt naar je eigen server. De titelfoto van de Marker Wadden is bijvoorbeeld enorm. Daarnaast staat er een gezellig plaatje van een hert in de cookiemelding, maar die afbeeldingen is eigenlijk volledig overbodig. Ook hier: kies voor .webp en kijk of een iets lagere kwaliteit ook goed genoeg is voor bepaalde afbeeldingen.
Staatsbosbeheer
Quick win
De grote pijnpunten hier zijn stylesheets (1,65 MB), images (1,52 MB) en scripts (1,19 MB). Stylesheets is verrassend: 1,65 MB is echt bizar veel voor stylesheets! Normale cijfers zijn zo rond de 100-300 kb. Holy moly. Als ik deze top 3 van pijnpunten op deze webpagina zie, dan schreeuwt mijn gut feeling dat dit gewoon heel erg inefficiënt gebouwd is. Dat kan namelijk zo ontzettend veel zuiniger.
De quick win is om in ieder geval de afbeeldingen aan te pakken zoals ik al tig keer hierboven heb verteld, maar voor een structurele win zou ik Staatsbosbeheer eens aanraden om te kijken naar hoe die website gebouwd is, en of dat niet veel zuiniger en efficiënter kan. (Spoiler alert: Ja, dat kan.)
Proveg Nederland
Quick win
Hier weer hetzelfde verhaal: de grote pijnpunten images en scripts. 39 afbeeldingen worden er opgevraagd om deze pagina neer te zetten. Een header slider met 7 afbeeldingen en veel .png files vallen me meteen op. Proveg, vervang de header slider door een statische header met één heel belangrijk focuspunt. Niemand blijft lang genoeg bovenaan die pagina hangen om de hele slider te kijken. Verspilde data. Vooral omdat het voor een groot deel blogposts zijn die ook met een kleinere afbeelding in de blogfeed daaronder te vinden zijn. En verder: verklein je foto’s voor je ze uploadt, gebruik .svg waar mogelijk (logo’s, iconen) en voor de rest .webp.
Zo kan het ook: Ecohobbit.nl
Waarom mijn persoonlijke blog Ecohobbit? Omdat die qua hoeveelheid afbeeldingen (12 stuks) en dynamiekjes op de homepage het dichtst in de buurt komt van bovenstaande websites. Digihobbit is zó extreem minimalistisch gebouwd, dat dat geen leuke vergelijking is. En ik heb voor de gelegenheid ook nog even de lazy loading uitgezet, voor een (gevoelsmatig) iets eerlijkere vergelijking.
Hoe ik dit heb bereikt?
Ik start al met een lichtgewicht basis (Astra Pro thema) en kies mijn plugins heel bewust. Zo ben ik sinds kort erg fan van PostX Pro. Lichtgewicht en zeer flexibel. Hierdoor zijn mijn scripts en stylesheets erg licht. Ook heb ik 0 third party scripts draaien: Google fonts (1 stuks) en statistieken (Matomo) heb ik allemaal first party draaien.
Daarnaast ga ik heel bewust om met mijn afbeeldingen voordat ik ze upload. Ik schaal ze naar 1280 pixels breed, en exporteer ze als .webp bestand met 80% kwaliteit. In de blogfeeds heb ik ook een maximumgrootte voor de afbeeldingen aangegeven. Ja, afbeeldingen zijn nog steeds de grootste datavreter op deze pagina, maar ik heb het dus zoveel mogelijk gereduceerd. Tel uit de milieuwinst!
En zal ik je voor de gein nog even de resultaten met lazy loading laten zien? Dan kom je op 0.185g per pageview. Nog kleiner! Dit komt omdat dan alleen de de eerste paar afbeeldingen worden geladen (4 stuks). Afbeeldingen verder naar onderen worden pas geladen wanneer je ver genoeg scrollt om ze daadwerkelijk te zien. Lang niet iedereen scrollt helemaal zover naar onderen, dus zonde om dat allemaal alvast te laden, toch?
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!