Duurzaam webdesign: handige tips voor vakmanschap met impact

Duurzamer online zijn, je kan er nog maar moeilijk omheen. Datacenters, netwerken en verbonden toestellen kosten allemaal veel energie. Dat verbruik heeft een flinke ecologische impact: het internet is naar schatting goed voor 2 tot 7 procent van de wereldwijde CO2-uitstoot.

Voor webdesigners en agency's betekent dat een verantwoordelijkheid, maar ook opportuniteiten. Want een duurzamere website - zowel die van jezelf als die van je klanten - is meer dan gewoon groener. Duurzaam design zorgt ook voor een snellere, toegankelijkere én onderhoudsvriendelijkere website.

Hoe zit dat precies met die impact?

Hoe heeft het internet nu precies een impact? Die zit 'm op een paar niveaus.

Er is de impact van je toestellen die je gebruikt op het net, en die daar energie voor nodig hebben. Maar er is ook de impact van dataverkeer en datacenters. Bij elk websitebezoek, elk chatbericht en elke e-mail wordt er data uitgewisseld. Die data worden verwerkt door servers die 24 op 7 aanstaan en gekoeld worden.

Minder data heen en weer sturen betekent minder energie verbruiken. Door het internet lichter te maken, wordt het dus duurzamer. We helpen je op weg met een duurzamere dienstverlening.

Duurzamer webdesign

1. Het begint bij groene hosting

Hosting is een energievreter. Daar is Cloudstar zich van bewust. We werken samen met datacentra die draaien op hernieuwbare stroom én die voldoen aan de ISO 14001-norm. De websites die je bij ons host, host je duurzaam.

Van de honderden servers die we online hebben, is maar een klein aantal fysiek. Met slimme virtualisatietechnieken zetten we de resources van die fysieke servers optimaal in. Efficiënt energieverbruik gegarandeerd.

2. Efficiënter rekenen dankzij caching 

Een webpagina bestaat uit tientallen elementen. In theorie moeten al die elementen telkens worden opgezocht en samengevoegd tot de uiteindelijke pagina, en dat voor elke bezoeker. Tenzij je caching inschakelt.

Caching bewaart die elementen of zelfs de volledige webpagina in een tijdelijke opslagplaats. Voor elke volgende bezoeker worden die elementen of de pagina opgevraagd uit dat tijdelijke geheugen, in plaats van ze opnieuw te laden.

Dankzij caching is er een pak minder rekenkracht nodig, waardoor het energieverbruik daalt. Caching zorgt in één klap ook voor snellere laadtijden, omdat de webpagina al kant-en-klaar ligt voor bezoekers. 

Bij Cloudstar zijn 2 cachingtechnologieën inbegrepen bij je hosting: 

• Varnish: bewaart volledige webpagina's in het tijdelijke geheugen, zodat die klaar zitten om te tonen aan bezoekers.

• Redis: bewaart informatie die op verschillende plaatsen op een website gebruikt wordt in het RAM-geheugen, zodat die veel sneller laadt. Voorbeelden van zo'n informatie zijn terugkerende contentblokken of voorraadinformatie.

3. Afbeeldingen en video's optimaliseren

Illustraties, afbeeldingen en video's zijn meestal de zwaarste elementen op een webpagina. Die kan je makkelijk optimaliseren voor minder dataverbruik:

• Gebruik WebP: dat is een bestandsformaat dat betere compressie biedt dan het klassieke JPEG, zonder kwaliteitsverlies.

• Lazy loading: een techniek waarmee foto's pas geladen worden als een bezoeker ernaartoe scrolt. Komt een bezoeker niet op het laatste deel van een pagina, dan worden de afbeeldingen ook niet geladen.

• Load on click: dankzij deze instelling worden video's pas geladen wanneer iemand op de speelknop drukt, in plaats van die standaard te laden (of automatisch af te spelen).

• Video loops: wil je klant heel graag een filmpje op de website? Stel eens een video loop voor. Een kleiner bestand, even grote wow-factor. 

4. Schone, slimme code onder de motorkap 

Op de schermen verschijnt een mooie website, erachter zorgt de code ervoor dat alles goed functioneert. Die code is onzichtbaar, maar heeft wel effect op de belasting van servers. 

Efficiënter betekent hier ook duurzamer. Houd de code achter de website schoon en vermijd dat je die herhaalt. Een paar eenvoudige acties: 

• Schrap alle overbodige karakters: spaties, commentaar en line breaks verzwaren je code, terwijl ze weinig of geen functie hebben.

• Verklein bestanden: handige minify-tools helpen je HTML-, CSS- en JavaScript-bestanden te verkleinen, zodat ze minder ruimte innemen. 

• Beperkt scripts: bekijk of alle huidige (third party) scripts wel nodig zijn. Functionaliteit die eigenlijk niets bijdraagt aan de website, of niet gebruikt wordt, kan weg.

5. WordPress? Beperk de plugins en thema's 

Plugins in WordPress zijn handig: zonder (veel) codewerk voeg je functionaliteiten toe aan jouw website of die van een klant. Een contactformulier of cookie banner staat online in een paar klikken.

Maar die plugins zijn onder de motorkap extra scripts die telkens moeten worden geladen. Merk je dat die weinig of niet gebruikt worden? Of verouderd zijn? Dan verwijder je ze beter van de website. Dat geldt trouwens ook voor oude thema's die nog geïnstalleerd zijn op een website.

Een kritische blik op de plugins in WordPress zorgt voor een duurzamere website, maar maakt ook het onderhoud ervan makkelijker. Plugins hebben regelmatig updates nodig. En ze moeten bovendien vaak getest worden op compatibiliteit bij grotere WordPress-updates. Minder verschillende plugins, betekent dus ook minder onderhoudswerk.

6. Kies systeemfonts 

Typografie is een belangrijk onderdeel van je werk. Maar lettertypes en hun opmaak vergroten ook het gewicht van een website. 

Werk daarom met systeemfonts. Dat zijn veelvoorkomende lettertypes, zoals Arial, die vaak al geïnstalleerd zijn op de toestellen van bezoekers. Als je zo'n systeemfont gebruikt, moet een browser geen apart lettertype downloaden. Je bespaart er data mee en scherpt de toegankelijkheid van je website aan, want systeemfonts zijn ook het best leesbaar voor mensen met een visuele beperking. 

7. Navigatie: neem bezoekers bij de hand 

Hoe sneller een bezoeker vindt wat hij zoekt, hoe minder pagina's moeten worden geladen. Een duidelijke structuur en navigatie op een website is tegelijkertijd gebruiksvriendelijk én duurzaam. Deze kapstokken helpen je de (navigatie)structuur op punt te zetten: 

• Houd het eenvoudig: stroomlijn het navigatiemenu door het aantal items erin te beperken. Je wil vermijden dat bezoekers al in de war geraken door alleen het menu te openen. 

• Een zoekfunctie: die laat bezoekers zelf gericht zoeken en is, zeker voor erg uitgebreide websites, een aangewezen toevoeging aan het navigatiemenu.

• Gebruik breadcrumbs: die tonen de hiërarchie van de website. Bezoekers kunnen de links gebruiken om makkelijker terug te navigeren in een bovenliggende categorie, in plaats van weer te beginnen op de homepagina. 

8. Stel een contentbeleid op 

Een website is nooit helemaal klaar. Toch betekent dat niet dat je voortdurend meer moet toevoegen. Met een slim contentbeleid hergebruik je content en bundel je andere om echt complete pagina's te creëren.

Zit je met verouderde webpagina's en informatie die er eigenlijk niet meer toe doet? Die kan je verwijderen. Heel korte pagina's kan je dan weer samenvoegen tot één duidelijke bron. En in plaats van wekelijks op zoek te gaan naar nieuwe blogs, kan je bestaande content actualiseren of recycleren. Als infographic voor de socials van je klant, bijvoorbeeld. Of als onderdeel van een grote handleiding.

Door te bewaken hoeveel pagina's een website telt, houd je die niet alleen overzichtelijker om te onderhouden, maar je houdt 'm ook lichter en dus duurzamer. 

Meer dan gewoon duurzaam 

Je klanten vinden het wel goed dat hun website een positieve impact heeft op onze planeet, maar dat wil niet zeggen dat ze daar ook voor willen betalen. Gelukkig kan je hen erop wijzen dat een duurzame website ook betekent dat: 

• Hun website sneller is: een lichte website laadt nu eenmaal sneller. En dat levert hen op hun beurt meer klanten op. 

• Hun website toegankelijker is: want duidelijke lettertypes, een logische structuur en sterke content maken een website leesbaarder en inclusiever voor alle internetgebruikers.

   

• Hun website sterker scoort in Google: zoekmachines kijken naar de laadtijden, code en structuur van een website om te bepalen welke plaats die krijgt in de zoekresultaten. Duurzamer betekent ook betere SEO.

Wat betekent het voor jou als webprofessional? 

Duurzame websites bouwen, levert dat jou als designer of agency ook iets op? Dit is waarom een groene aanpak ook een goede aanpak is voor jouw business: 

• Goed voor je merk: ondernemers worden zich bewuster van hun ecologische impact. Laat je (potentiële) klanten weten dat je klaar bent om hen daarin te steunen en zelf voor een duurzame werking staat. 

• Minder onderhoud: een compactere website met schone code en minder plugins, betekent ook een stabielere website. Jij verliest minder tijd aan onderhoud. 

• Lagere kosten: want een kleinere website heeft minder servercapaciteit nodig. Minder verbruik betekent ook lagere maandelijkse kosten.

• Een beter product: duurzame websites lopen sneller, zijn gebruiksvriendelijker en scoren beter in zoekmachines. Het succes van jouw klanten straalt ongetwijfeld ook op jouw business af. 

Meet zelf de impact 

Te weten komen hoe jouw website (of die van je klanten) het vandaag doet? Website Carbon Calculator helpt je te berekenen hoe groot de voetafdruk van je website is. Handig om te weten hoe je het vandaag doet en welke impact je inspanningen hebben.

Duurzaam vakmanschap

Duurzaam webdesign is stilaan de nieuwe standaard. Efficiënte code en een slanke structuur maken je website(s) groener, sneller en gebruiksvriendelijker.

Sterk beginnen doe je door te bouwen op groene hosting. Wil jij de ecologische voetafdruk van je projecten verkleinen, zonder in te boeten op de kwaliteit van je hosting? Contacteer Cloudstar voor een plan op jouw maat. Samen zorgen we voor duurzaam vakmanschap.