Maak je website meer klimaatvriendelijk met deze 3 tips

Een duurzame keuze is zo gemaakt. Je pakt de trein in plaats van het vliegtuig voor je vakantie. Je eet eens wat vaker vleesvervangers. Of je zet je thermostaat een stukje lager. Maar wist je dat je ook bij digitale ontwikkeling de juiste keuzes kunt maken om slimmer om te gaan met CO2-uitstoot?

Je laptop kost stroom. Daar denk je over na. Maar ook je hosting verbruikt energie. En het uitserveren van afbeeldingen, video’s en de code om je website weer te geven, kost óók energie. Met gemiddeld 6 MB aan bestanden op een Frankwatching-artikelpagina, kost het lezen van dit artikel bijvoorbeeld ongeveer 1,75 gram CO2. Met groene hosting is dat al minder: 1,3 gram. Als je het ergens mee wil vergelijken: de CO2-uitstoot van een vliegreis Amsterdam – Barcelona is 430 kilo (berekend via de tool van Trees for All).

Die grammen stoot je overigens alleen uit wanneer je de artikel pagina voor het eerst bezoekt, mits je caching in je browser aan hebt staan. Elk volgend artikel is – afhankelijk van van alles – eerder een paar 100kB tot een paar MB. Al deze berekeningen zijn gebaseerd op dit artikel over Calculating Digital Emission.

Het versturen van data van die server naar jouw scherm is op individuele basis natuurlijk niet enorm impactvol, maar als je een website met duizenden bezoekers per dag hebt, hakt dat er wel degelijk in.

Steeds meer bewustwording rondom CO2-uitstoot door digitale producten

Het besef rondom CO2-uitstoot van digitale producten wordt ook steeds groter. Veel van ons zijn inmiddels wel gewend dat we voor vliegreizen, autorijden of het dagelijks leven CO2 kunnen compenseren. Ook geeft Google tegenwoordig inzicht in CO2-uitstoot voor zakelijke klanten en ontwikkelde digital artist Thijs Biersteker onderstaande installatie om te laten zien welke impact digitale meetings hebben op CO2-uitstoot.

Ik neem je vandaag mee in de hoog-over-lessen die we bij September geleerd hebben bij de ontwikkeling van digitale producten en diensten voor onze klanten. Ik schrijf het zo op dat je er als ontwerper of developer mee aan de slag kunt óf hoe je als opdrachtgever je bureau erin kunt meenemen.

#1 Zorg voor groene hosting van je website

De meeste producten die we als bureau maken zijn altijd bereikbaar, 24/7, waar allerlei servers voor online moeten zijn. Dan gaat het snel met energie! Een van de grootste en makkelijkste dingen die we veranderd hebben is dat we al onze nieuwe lanceringen op groene hosting zetten. Daarnaast zijn we langzaam onze oudere websites aan het migreren naar deze duurzame hosting.

Je kan op Thegreenwebfoundation.org kijken of jouw website bij een van de bekende groene hosters (in Nederland) zit. Let er trouwens op dat de ene groene hoster de ander niet is: ook hier kun je te maken hebben met grijze of gecompenseerde energie. Liefst heb je er één die in de basis al groen inkoopt en gebruikt.

Verder kun je erover nadenken hoe je de tech stack van je webhosting zo min mogelijk complex maakt (bijvoorbeeld door veel te cachen of goed ‘te programmeren’), zodat je weer minder eisen hebt aan de servers van je hosting.

Of kun je niet-voor-eeuwig alle foto’s, comments and backups bewaren die je maakt. Dit is trouwens voor je persoonlijke footprint, zoals e-mail, ook een goede overweging.

#2 Houd in development rekening met energie-implicaties voor de gebruiker

Even naar de basis: het ontwikkelen van de website zelf. Ook daar kun je impact maken!

Gebruik bijvoorbeeld lazy-loading om niet altijd alle foto’s of video’s te laden. En denk na over het splitsen van je CSS en JavaScript naar de pagina’s die er zijn. Een framework gebruiken zodat je alleen delen van een pagina vervangt tijdens navigatie kan dat nog gemakkelijk maken ook!

Maar, aan die frameworks zit dan ook weer een beperking: vaak zijn ze groot en bevatten ze veel ongebruikte functionaliteit. Dat is dan weer zonde. Ook kunnen ze minder efficiënt zijn – voor het werk dat jij wil doen – en zodoende veel onnodige berekeningen veroorzaken. Dat zorgt er dan weer voor dat de browser van je eindgebruikers meer energie gaat gebruiken.

Al met al is er veel te doen rondom de opbouw van de website, maar als ik 3 tips zou mogen geven:

1. Stuur zo min mogelijk bytes over de lijn – en kijk daar eens kritisch naar. Video’s, foto’s, CSS en JavaScript, HTML. Kijk ook naar wanneer en hoe vaak. Het is een prima graadmeter.
2. Denk goed na over welke content niet vaak verandert en daardoor lang en goed gecached kan worden. Dan wordt je site sneller én het is beter!
3. Probeer vooraf budgetten per pageview op te stellen, in de vorm van bytes, CO2-uitstoot of CPU-gebruik. Dan start je met de juiste mindset.

#3 Maak bewuste keuzes over designprincipes

Het proces van duurzaam digital begint al bij design, en strategie. Zo kun je samen met je opdrachtgever vanaf het begin al praten over keuzes die jullie hierin samen kunnen maken.

Moet je bijvoorbeeld wel overal autoplay video’s gebruiken als je een informatieve website ontwikkelt? Zijn alle animaties wel zo noodzakelijk om je verhaal op een goede manier te vertellen? Is een versie van een afbeelding met compressie voldoende, of heb je écht een hoge resolutie nodig voor je header?

Het gebruik van veel verschillende lettertypes is, los van meestal niet zo mooi, vooral ook niet nodig. Daar kun je over nadenken, omdat deze vaak relatief veel bytes gebruiken. Kleuren maken ook uit. Felle en lichte kleuren gebruiken meer energie op OLED-schermen dan bijvoorbeeld zwart. Je ziet ook steeds vaker een ‘eco-friendly’ mode voor websites.

Animaties en transities in sommige vormen zijn ook erg zwaar voor browsers om uit te rekenen. Ook hier weer kun je nadenken over de mate waarin je dit gebruikt: moet echt alles er in animeren met een fade en een beweging? Of mag het soms ook gewoon op het scherm staan?

De algemene ontwerp tip is, ook voor duurzaamheid: durf vooral soms een goede én simpele, cleane website te ontwerpen.

De bijkomende voordelen van duurzaam design

Houd rekening met bovenstaande punten en je krijgt er een bonus bij. Je SEO-positie gaat er namelijk goede stappen op vooruit op het moment dat je een snelle functionele website lanceert zonder poespas. Google is dol op snelle pagina’s.

Het mooie van alle bovenstaande punten is dat ze allemaal, als je er vanaf het begin over nadenkt, gemakkelijk toe te passen zijn zonder dat het heel lastig is. En dat ze goed te verweven zijn met zoekmachine optimalisatie, of – ook niet onbelangrijk – toegankelijkheid en inclusie.

Dit betekent overigens niet dat al je digitale producten plotse kale en saaie producten worden. Een juiste afweging is vaak al voldoende om de eerste meters te maken – en je moet ergens een begin maken!