Duurzaam Webdesign: Zo maak je energiezuinige en groene websites

Duurzaamheid wordt steeds belangrijker, ook online. Van datacenters tot netwerken en alle verbonden apparaten die we in onze handen houden. Alles verbruikt elektriciteit en veroorzaakt daardoor CO₂-uitstoot. Ook jouw website stoot CO₂ uit. Ontdek hoe je met slimme keuzes een groene én duurzame website maakt!

En naarmate we steeds meer online data gebruiken in ons dagelijks leven, groeit het stroomverbruik van het internet razendsnel. Het blijft vaak buiten beeld, maar dit enorme energieverbruik heeft een flinke ecologische voetafdruk. De CO₂-uitstoot van het internet is zelfs groter dan die van de wereldwijde luchtvaartindustrie! Dat moeten we dus serieus nemen.

In dit artikel geef ik je een handige lijst met tips die je (zelf) kunt doen om energieverspilling te verminderen en om ervoor te zorgen dat je website zo duurzaam mogelijk is. 

#Wat is duurzaam webdesign?

Duurzaam webdesign betekent dat je bij het ontwerpen en bouwen van websites rekening houdt met het milieu. Je zorgt ervoor dat je website zo min mogelijk energie verbruikt, weinig CO₂-uitstoot veroorzaakt en niet vol zit met onnodige elementen die snelheid en gebruiksgemak belemmeren. 

Sterker nog: Een groene website is efficiënter, sneller, gebruiksvriendelijker voor bezoekers én vriendelijker voor onze planeet. Typisch gevalletje van win-win imho.

#Waarom is duurzaam webdesign belangrijk?

Internet lijkt haast vanzelfsprekend. Je tikt een URL in of je klikt op een link, et voilà, je komt op de gewenste webpagina. Maar achter die ogenschijnlijk simpele klik schuilen servers, kabels, datacenters, energieverbruik en CO₂-uitstoot. 

De verdeling tussen het maken en gebruiken van IT-gerelateerde diensten
Fig.1: De verdeling tussen het maken en gebruiken van IT-gerelateerde diensten

Wereldwijd verbruikt het internet meer energie dan je denkt. En dat blijft maar groeien, zeker met de opkomst van energieslurpende AI chatbots en automatiseringen. Daarom is duurzaam webdesign geen luxe meer, maar pure noodzaak. 

Groene websites gaan zuiniger om met bronnen, zijn dus niet alleen goed voor het milieu, maar ook gebruiksvriendelijker, sneller en goedkoper in onderhoud. Duurzaam webdesign helpt om digitale vervuiling tegen te gaan en zorgt voor een bewuste online aanwezigheid.

#Hoe bouw je een duurzame/groene website?

Wanneer we het hebben over de energie-efficiëntie van websites, denken veel mensen dat het alleen om techniek gaat. Maar je kunt al winst behalen vóórdat je begint met bouwen. Ontwerp en inhoud hebben namelijk een grote invloed op hoe energiezuinig een website is.

Hieronder vind je praktische manieren om jouw website milieuvriendelijker en duurzamer te maken:

#1. Kies voor groene hosting

Hosting is een van de grootste energievreters in de keten van websitebeheer. Gelukkig zijn er steeds meer webhosts die hun datacenters verduurzamen, overstappen op groene stroom of hun uitstoot compenseren. Hier zijn een paar betrouwbare groene webhosts:

  • Halvar
    200% groene hosting voor je open-source PHP projecten. Ze werken samen met andere groene partners en de warmte die hun servers opwekken, verwarmt een heel blok met kantoorgebouwen. 
  • Greenhost
    Groene en duurzame webhosting, van kleine en simpele websites tot en met grote complexe projecten met meerdere VPS’en. Dat is de kern van Greenhost.
  • Cloud86
    Als klant van Cloud86 mag je dan ook naar je klanten communiceren dat je website volledig draait op groene energie en dus klimaatneutraal is.
  • Vimexx
    CO₂-neutrale hosting uit Nederland met toegankelijke pakketten voor elk type website.

Door bewust voor een groene host te kiezen, neem je al een eerste stap naar een duurzame website. Controleer of jouw hostingpartij draait op groene stroom. Een simpele tool die meteen aangeeft of je op de juiste plek zit, is Green Web Check.

#2. Optimaliseer je afbeeldingen

Gebruik moderne bestandsformaten zoals WebP of AVIF. Die zijn vaak 30-50% kleiner dan traditionele formaten zoals JPG of PNG, zonder verlies van kwaliteit. Door afbeeldingen te comprimeren, hoeft je website minder data te laden. Dit verlaagt de belasting op servers én op de apparaten van je bezoekers.

Grote afbeeldingen verbruiken heel veel data. Dit verhoogt niet alleen de CO₂-uitstoot, maar ook de hoeveelheid data die je gebruikers verbruiken, vooral als ze een langzame internetverbinding hebben. Dus als je afbeelding op de website niet groter is dan bijvoorbeeld 600x400px, laad dan geen afbeelding in van 2400x1600px, en sowieso geen afbeeldingen > 600kB.

Check ook mijn artikel met aanbevelingen en tips voor afbeelding optimalisatie met betrekking tot snelheid, toegankelijkheid, bestandsformaat, afmeting, etc.

#3. Gebruik efficiënte code

Des te minder code, des te sneller en energiezuiniger je website draait. Houd je code dus netjes en semantisch, voorkom herhaling (DRY – Don’t Repeat Yourself) en schrijf efficiënte queries.

Let ook op het aantal HTTP-requests, verklein/minify en combineer CSS en JavaScript bestanden waar mogelijk. Schrap onnodige (third party) Javascripts, plugins en zware frameworks. 

Kijk of je frontend interacties, functionaliteit en animaties kunt realiseren met efficiëntere technologieën zoals CSS. En als je dan toch JavaScript gebruikt, gebruik het ‘defer’ attribuut. Deze vertelt de browser om te wachten met het uitvoeren van het JS bestand tot de volledige HTML-pagina is geladen.

Als je een CMS zoals WordPress gebruikt, vermijd dan onnodige plugins die je website trager maken. Kies voor plugins die de server zo min mogelijk belasten en geen overbodige code of scripts toevoegen aan je website.

Veel tracking scripts vertragen je website en verzamelen onnodige data. Gebruik alleen wat je echt nodig hebt, of schakel over naar privacy vriendelijke alternatieven zoals Matomo die alles lokaal opslaan.

#4. Kies je lettertypes zorgvuldig

Webfonts kunnen een website er mooier uit laten zien, maar ze voegen vaak flink wat bytes toe aan je pagina. Eén enkel lettertypebestand kan al snel 250 kB groot zijn, en dan heb je alleen nog maar de standaarddikte. Wil je ook vetgedrukt gebruiken? Dan komt er nóg eens 250 kB bij!

Soms ontkom je niet aan een custom font, maar probeer het aantal verschillende lettertypes en gewichten (zoals bold of italic) te beperken. Minder fontvariatie betekent minder bestanden, dus een snellere en energiezuinige website. 

Maar je kunt ook deze technieken proberen om de bestandsgrootte van lettertypes te verkleinen:

  • Gebruik moderne bestandsformaten zoals WOFF en WOFF2. Deze zijn beter gecomprimeerd dan oudere formaten zoals TTF, OTF en SVG.
  • Maak subsets van lettertypes zodat alleen de tekens worden geladen die je ook echt op de website gebruikt. Je hoeft de Cyrillische subset dus niet te laden op een website die alleen bedoeld is voor Nederlandse bezoekers.
Third party web fonts (zoals Google/Adobe fonts) die van externe servers worden geladen zorgen voor extra http-requests. Door je lettertypes lokaal te hosten, verbeter je de laadtijd van je pagina.

#5. Zorg voor een goede gebruikerservaring (UX)

Een van de belangrijkste onderdelen van een goede gebruikerservaring is het verminderen van obstakels voor de gebruiker. We willen dat bezoekers snel vinden wat ze zoeken en moeiteloos de acties kunnen uitvoeren die ze nodig hebben. 

Een intuïtieve gebruikerservaring maakt websites efficiënter en de customer journey prettiger voor iedereen. Bovendien zorgt het ervoor dat er minder energie wordt verspild aan het doelloos klikken door pagina’s die niet relevant zijn of aan het staren naar een scherm zonder te weten wat de volgende stap is.

#6. Beperk het gebruik van video

Video’s op je website zijn echte datavreters. Gebruik ze alleen als ze een toelichting zijn op je content, en zet autoplay standaard uit. Overweeg om video’s op lagere resolutie of extern gehost (zoals op YouTube) aan te bieden als alternatief.

De bestandsgrootte van een webpagina met een videobestand is vaak 10 tot 100 keer zwaarder dan een webpagina zonder video. Dit zorgt voor een veel hogere belasting van de CPU van de gebruiker, wat leidt tot aanzienlijk meer energieverbruik.

#7. Cache alles, maar cache slim!

Voor websites die een CMS zoals WordPress of Drupal gebruiken, worden pagina’s dynamisch gegenereerd telkens wanneer iemand een webpagina bezoekt. Dit is erg inefficiënt, omdat het voor elke paginaweergave verwerking door de server vereist, wat het energieverbruik van de webserver verhoogt.

Met caching kunnen onderdelen van je website lokaal worden opgeslagen, zodat deze niet steeds opnieuw geladen hoeven te worden. Browser caching, server-side caching en zelfs Content Delivery Networks (CDN) kunnen hier een rol in spelen.

het gebruik van caching technieken om de laadtijd te verbeteren en daardoor ook de CO2-uitstoot om duurzaam webdesign te bevorderen.
Fig.2: het gebruik van caching technieken om de laadtijd te verbeteren

Caching technologieën zoals Varnish maken vooraf statische versies van elke pagina aan. Dit verlaagt het energieverbruik van de server aanzienlijk en zorgt bovendien voor veel snellere laadtijden van pagina’s.

#8. Zet in op minimalistisch design

Een simpel en strak ontwerp is niet alleen visueel rustiger, het verbruikt ook minder bronnen. Hoe minder elementen een gebruiker moet laden, hoe minder energie er nodig is. Bovendien scoort een minimalistische site vaak beter op toegankelijkheid en gebruiksvriendelijkheid.

#9. Maak je website toekomstbestendig

Bouw een schaalbare, modulaire maatwerk website die makkelijk aan te passen en uit te breiden is. Zo voorkom je dat je om de paar jaar alles moet herontwerpen, wat weer extra ontwikkeltijd én energie kost. Laat je website zo bouwen dat deze met je bedrijf mee kan groeien.

#10. Gebruik maatwerk in plaats van premium WordPress thema’s

Premium WordPress thema’s zitten vaak vol met overbodige spaghetti code, externe scripts en zware frameworks. Dit maakt je website traag en energie-intensief. Een WordPress website op maat is veel efficiënter, lichter en 100% afgestemd op jouw eisen en wensen. 

Een maatwerk WordPress website is een solide fundering waar je in de toekomst makkelijk extra functionaliteiten op kunt bouwen. 

#11. Gebruik de nieuwste PHP-versie

Het gebruik van de nieuwste PHP-versie is noodzakelijk als je je WordPress website zo snel en efficiënt mogelijk wilt laten draaien. Nieuwere versies van PHP zijn namelijk sneller dan oudere. Zo kan een website op PHP 8.x tot wel twee tot drie keer sneller laden dan dezelfde site op een oudere versie.

Hogere PHP-versies zorgen ervoor dat je website veel sneller draait, terwijl de meeste WordPress-gebruikers nog steeds verouderde PHP-versies gebruiken.
Fig.3: Nieuwere PHP-versies zorgen ervoor dat je website veel sneller draait, omdat ze meer aanvragen per seconde kunnen verwerken.

De nieuwste PHP-versie is dus veel efficiënter in het gebruik van serverbronnen. Hierdoor heb je minder servercapaciteit nodig, wat kosten bespaart én de ecologische voetafdruk van je hosting vermindert. 

#12. Optimaliseer voor zoekmachines (SEO)

SEO lijkt misschien niets te maken te hebben met de energie-efficiëntie van een website, maar in de praktijk liggen de doelen verrassend dicht bij elkaar. Door een website te optimaliseren voor zoekmachines, help je mensen sneller en makkelijker de juiste informatie te vinden. 

Als je SEO goed werkt, hoeven bezoekers minder lang te zoeken en klikken ze minder vaak op pagina’s die niet relevant voor hen zijn. Dit zorgt voor minder dataverkeer en dus een lager energieverbruik. De energie die wél verbruikt wordt, levert dan echte waarde op voor de gebruiker.

#13. Schrijf pakkende webteksten

Net als bij zoekmachine optimalisatie heeft tekstschrijven invloed op de efficiëntie van een website, omdat het bepaalt hoeveel tijd mensen op een website doorbrengen. Soms willen we dat bezoekers langer blijven om echt in de inhoud te duiken, of -nog beter- terugkomen voor nog meer content (retentie). 

Maar wat we juist niet willen, is dat mensen hun tijd verspillen aan teksten die weinig tot geen waarde bieden. Duidelijke en efficiënte webteksten zorgen ervoor dat bezoekers snel vinden wat ze zoeken. Zo besparen we niet alleen tijd, maar ook energie.

#Test zelf hoe groen jouw website is

Website carbon results for: gonzodesign.nl - "Hurrah! This web page achieves a carbon rating of A+. This is cleaner than 95% of all web pages globally"
Fig.4: Testresultaat van gonzodesign.nl op Website Carbon Calculator

Benieuwd hoe duurzaam jouw huidige website is? Met onderstaande gratis online tools kun je dat eenvoudig testen. Zo krijg je direct inzicht in je CO₂-uitstoot en verbeterpunten:

Website Carbon Calculator
Voer je URL in en zie hoeveel CO₂ je website uitstoot per bezoek. De tool laat ook zien hoe jouw site scoort ten opzichte van andere sites.

Website Carbon

Website Emissions
Meet hoeveel uitstoot je website genereert op basis van bestandsgrootte, herkomst van verkeer en energiebronnen van je hosting.

Website Emissions

Zifera Carbon Test
Een gebruiksvriendelijke test die naast uitstoot ook tips geeft om je website groener te maken.

Zifera Carbon Test

Gebruik deze tools als eerste stap naar verduurzaming, of om te meten of jouw aanpassingen effect hebben gehad.

Bottomline

Duurzaam webdesign is geen rocket science. Het vraagt wat bewuste keuzes, een paar slimme tools en een beetje liefde voor onze mooie planeet. Ontdek hoe je met groene hosting, efficiënte code en slimme keuzes een duurzame en groene website maakt. Iedere klik telt, echt waar.

Neem contact met mij op en dan maken we samen jouw website ook duurzaam.

Deel dit Bericht:

Avatar for Jan Rajtoral

Auteur: Jan Rajtoral

Jan Rajtoral is een ervaren grafische vormgever en webdesigner. Hij heeft een ruime ervaring met Front-end web design (HTML, CSS en JS/jQuery), User Experience (UX), Toegankelijkheid (WCAG), Performance en WordPress Ontwikkeling & Thema Ontwerp. Maar hij ontwerpt en ontwikkelt ook logo’s en huisstijlen, waarbij hij altijd streeft naar merkconsistentie in het hele ontwerp.