Het manifest voor websites met lage impact: 10 richtlijnen van Organic Basics voor het bouwen van groenere websites

Eenvoudige regels met eindeloze mogelijkheden

Eerst lazen we ons in over hoe je daadwerkelijk een duurzame website bouwt, waarna we werden overspoeld met tips en trucs. We realiseerden ons al snel dat we niet alles konden doen en de mogelijkheden moesten beperken. 

Geïnspireerd door het Dogme 95-manifest en de Kuisheidsgeloften daarvan, schreven we een manifest met 10 regels voor het bouwen van een website met een lage impact. Net als de Kuisheidsgeloften balanceren ze op de grens tussen hyper specifiek en open voor interpretatie. 

Dit geeft ontwerpers en ontwikkelaars de ruimte om oplossingen te vinden die het beste werken voor hun technische omgeving, zonder concessies te doen aan duurzaamheid. De regels schrijven het gebruik van specifieke technologieën niet voor, waardoor deze kunnen meegroeien met technologische ontwikkelingen.

Hieronder bespreek ik de 10 regels en geef ik enkele ideeën over hoe je ze op je eigen website kunt toepassen. 

1. Laad geen afbeeldingen voordat de gebruiker er actief om vraagt

Afbeeldingen dragen in grote mate bij aan het dataverbruik van elke website, en dit geldt in het bijzonder voor webwinkels. We moeten onze producten visueel tonen, vaak vanuit meerdere hoeken of op verschillende modellen. 

Belangrijk hierbij is dat we alleen de afbeeldingen laden die gebruikers daadwerkelijk moeten zien. Dat kan betekenen dat je afbeeldingen alleen laadt wanneer een gebruiker omlaag scrolt op een pagina, wanneer die door een diavoorstelling klikt, of ze zelfs verbergt totdat een gebruiker op ‘afbeelding tonen’ klikt. 

Deze regel is een beetje lastig, omdat illustraties in de vorm van schaalbare vectorafbeeldingen (SVG's) nog steeds zijn toegestaan, maar de omvang van een SVG ongelooflijk klein is vergeleken met de meeste afbeeldingen. We hebben dit op onze website toegepast door illustraties te tonen in ons collectieoverzicht (zie hieronder) en alleen afbeeldingen op de productpagina te tonen wanneer een gebruiker er actief voor kiest een diavoorstelling te laden.

2. Beperk het energieverbruik op het apparaat van de gebruiker

Dit kan moeilijk te meten zijn, maar is niettemin belangrijk. De belangrijkste reden om dit op te nemen is ervoor te zorgen dat de aandacht niet uitsluitend uitgaat naar wat er gebeurt tijdens de overdracht van bestanden, maar ook naar wat die bestanden doen zodra ze het apparaat van de gebruiker bereiken.

Momenteel richten we ons hierbij vooral op het gebruik van animaties en het aantal scripts dat actief op je website wordt uitgevoerd. Elk gebruik van 3D kan ook grote gevolgen hebben voor de batterij van een apparaat. 

Enkele vragen die je jezelf kunt stellen om met deze regel aan de slag te gaan, zijn:

• Voegt deze animatie / 3D / dit script iets toe aan de gebruikerservaring, of is het alleen opvulling?
• Kunnen we het gebruik van deze animatie / 3D / dit script op de website beperken?
• Kunnen we deze animatie / 3D / dit script vereenvoudigen, zodat het alleen precies doet wat nodig is?

Gerelateerd artikel: Meer verantwoorde beslissingen nemen bij het ontwerpen van gebruikerservaringen

3. Pas je aan de hoeveelheid hernieuwbare energie aan waarop je website draait

Gezien de manier waarop elektriciteitsnetten en het internet momenteel werken, kan geen enkele website voor 100% op hernieuwbare energie draaien. Zelfs Google, dat zich steeds meer richt op hernieuwbare energie om zijn datacenters te laten werken, bereikt dat niet. 
Wat we in plaats daarvan kunnen doen, is onze websites laten reageren op de hoeveelheid hernieuwbare energie in het elektriciteitsnet. Veel energiebedrijven, zoals Barry, doen al iets vergelijkbaars door hun klanten een app te bieden die laat zien wanneer elektriciteit minder koolstofintensief is (zie hieronder).

Op de website van Organic Basics met een lage impact gebruiken we de carbonintensity.org.uk-API om ons van gegevens te voorzien. De API biedt gratis en eenvoudige toegang tot gegevens over de koolstofintensiteit van verschillende regio's in het VK. Een alternatief zou de Electricity Map API zijn, die vrij duur is maar gegevens bevat uit veel meer regio's over de hele wereld. Het nadeel van hun API is de toegangsprijs. 

We moesten het datacenter in Londen kiezen, omdat onze site wordt gehost op Google Cloud en dit de enige optie in het VK is. Ironisch genoeg bevindt dit datacenter zich in een van de meer koolstofintensieve regio's binnen het cloudhostingaanbod van Google. 

Afhankelijk van de koolstofintensiteit veranderen we de kwaliteit van de afbeeldingen die worden weergegeven en beperken we ook het aantal animaties. Als de elektriciteit echt koolstofintensief is, schakelen we de website zelfs volledig uit.

In plaats daarvan tonen we een sobere pagina waarop onze klanten kunnen zien dat de site niet toegankelijk is. De pagina geeft ook een schatting van wanneer ze de site weer kunnen bezoeken, gebaseerd op voorspellingsgegevens van de carbonintensity.org.uk-API. Sinds we de site hebben gelanceerd, is deze ongeveer 12,5 uur niet beschikbaar geweest.

4. Informeer de gebruiker over de impact van diens surfgedrag

Wanneer ik online winkel, verwacht ik te kunnen zien hoeveel de inhoud van mijn winkelmandje kost. Zo kan ik bepalen of ik nog geld te besteden heb of op zoek moet gaan naar kortingen. Op dezelfde manier zouden we onze klanten moeten informeren over de impact van hun surfgedrag op het klimaat.

Op onze website berekenen we voortdurend de uitstoot die een gebruiker tijdens het rondkijken opbouwt. Zo krijgen ze inzicht in wat koolstofuitstoot is en hoe die samenhangt met het gebruik van websites. Indien mogelijk moet je deze uitstoot ook zelf bijhouden, want uiteindelijk is het de verantwoordelijkheid van de website-eigenaar om deze te verminderen. 

5. Gebruik geen video's

Bij Organic Basics zijn we dol op video's, maar ze kunnen het koolstofbudget van een website echt flink belasten. Deze regel is met afstand de strengste van de 10, maar daar is een heel goede reden voor. 

Het internet wordt steeds meer gedomineerd door video en in plaats van die trend te volgen, besloten we ertegenin te gaan. Om de klimaatcrisis echt aan te pakken, moeten we niet alleen optimaliseren en minimaliseren; we hebben degroei nodig. 

Met deze regel dwingen we je om verder te kijken dan de videospeler en na te denken over manieren om beweging en dynamiek toe te voegen zonder megabytes na megabytes aan videocontent te laden. Overweeg als alternatief CSS- of SVG-animaties te gebruiken. O ja, dit geldt dubbel voor GIF's. Gebruik. Geen. GIF's.

6. Sla gegevens lokaal op het apparaat van de gebruiker op om gegevensoverdracht te beperken

Alle inhoud die je op je website toont, kan mogelijk lokaal op het apparaat van de gebruiker worden opgeslagen. Het heeft geen zin om iets twee keer te downloaden als het waarschijnlijk niet verandert. 

De meeste ontwikkelaars zullen deze regel al als belangrijk herkennen. De regel optimaliseert de prestaties van je website en vermindert tegelijkertijd de impact ervan op het milieu.

Om dit te bereiken, kun je overwegen je website op te bouwen als een progressieve webapplicatie en offline toegang mogelijk te maken. 

7. Comprimeer alle gegevens zo veel mogelijk

Zodra je bestanden het apparaat van de gebruiker bereiken, moet je ervoor zorgen dat ze daar blijven totdat ze worden bijgewerkt. Dat heet caching. Maar voordat ze daar zelfs maar aankomen, moet je ervoor zorgen dat die bestanden zo klein mogelijk zijn. 

Verklein je CSS en JavaScript en comprimeer je afbeeldingen. Veel moderne frameworks, zoals Nuxt.js of Next.js, nemen dit werk voor veel bestandstypen voor je uit handen. 

Dit spreekt eigenlijk voor zich en is, net als caching, ook vanuit prestatieperspectief zinvol.

8. Laad alleen de belangrijkste programmascripts, frameworks en cookies

Elke keer dat je een bibliotheek of een extern script aan je code toevoegt, vergroot je de omvang van de pagina. Zelfs als de bibliotheek slechts 1kb groot is, loopt dit snel op tot 1MB als 1000 gebruikers de pagina laden.

Deze regel is bedoeld om je eraan te herinneren elk afzonderlijk script, framework en cookie dat je toevoegt in overweging te nemen. Het woord “cruciaal” is hierbij het belangrijkst. Conversietracking en analytics zijn cruciaal voor alle ecommercewinkels, maar is het echt nodig op elke pagina?

Deze overwegingen passen goed bij een beetje aandacht voor privacy, aangezien GDPR en vergelijkbare regelgeving toestemming vereisen voordat scripts worden geladen. 

9. Beperk de hoeveelheid licht die door het scherm wordt uitgestraald

Sinds we het manifest aankondigden, hebben we opmerkingen ontvangen waarin wordt gesuggereerd dat deze regel eigenlijk geen verschil maakt, omdat het gebruik van de donkere modus het energieverbruik alleen op OLED-schermen vermindert. 

Wij zeggen: dat is goed nieuws voor gebruikers met OLED-schermen! Op de website van Organic Basics met een lage impact gebruiken we hier en daar nog steeds enkele witte kleuren, omdat dit een belangrijk onderdeel van onze merkbeleving is. Zoals het onderstaande voorbeeld laat zien, voegen we echter ook een gele tint en een grijze nuance toe om de hoeveelheid licht die door het scherm wordt uitgestraald te beperken.

10. Optimaliseer en beperk het gebruik van aangepaste lettertypen

Tot slot komen we bij het gebruik van aangepaste lettertypen. Lettertypen zijn binnen het grotere geheel van websitegerelateerde uitstoot niet echt verantwoordelijk voor een groot deel, maar het kan gemakkelijk uit de hand lopen. 

Daarom hielden we het op de website met een lage impact bij slechts één aangepast lettertype. We gingen zelfs zo ver dat we bepaalde tekens uit de tekenset verwijderden. Cyrillische tekens zijn echt niet nodig op een pagina in het Engels.

De volgende stap

Als je deze 10 regels volgt, ben je zeker goed op weg om je ecommercewebsite om te vormen tot een versie met een lage impact. Belangrijker nog: je hebt de reis gemaakt waarbij je je website vanuit een duurzaamheidsperspectief hebt bekeken en als een belangrijk onderdeel van de duurzaamheidsopgave. 

Bij het overwegen van deze regels is het belangrijk dat je ontdekt wat het beste werkt voor jouw merk. Niet alle regels zijn even strikt en je zou dit in je voordeel moeten gebruiken. Jouw website met een lage impact is niet hetzelfde als die van mij, en dat zou ook niet zo moeten zijn. 

Een duurzaam internet houdt echter niet op bij elektriciteit en energie-efficiëntie, waarop deze 10 regels zich richten. Als we het perspectief verbreden, moeten we ook rekening gaan houden met de materialen waaruit onze apparaten, datacenters en netwerken zijn opgebouwd.

Het internet is gebouwd op (hilarische) kattenmemes en blogs, maar het is ook opgebouwd uit zeer reële zeldzame aardmetalen die vaak worden gewonnen door mensen die onder slechte arbeidsomstandigheden werken, tegen hoge milieukosten. 

In de afgelopen paar jaar heeft Fairphone ons een duurzamere smartphone gegeven, maar het gesprek over het internet als geheel is nog helemaal niet begonnen. Met andere woorden: we hebben een Fairphone nodig voor serverinfrastructuur.

Gerelateerd artikel: Je team uitdagen en motiveren om de planeet tot belanghebbende van je site te maken

Meer over alles wat duurzaam is: Het handboek voor duurzame ecommerce