Duurzaam webdesign: hoe duurzame websites te ontwerpen

Sonja Hoffmann Laatst bijgewerkt op 21.12.2020
7 Min.
Sustainable webdesign
Laatst bijgewerkt op 21.12.2020

Wat houdt "duurzaam webdesign" precies in? Hoe weet u hoe ecologisch uw site is? Hoe kunt u uw website(s) duurzamer maken en wat zijn de voordelen voor uw klanten? Ik heb de antwoorden op deze vragen en enkele belangrijke hulpmiddelen in deze post gebundeld.

Feiten over het stroomverbruikende internet

Wat ons digitale verbruik aan energie kost

Volgens Websitecarbon verbruikt het internet 416,2 terawattuur (TWh) per jaar. Dat is ongeveer evenveel als Duitsland alleen verbruikt. Als het internet een land zou zijn, zou het nu al het zesde grootste elektriciteitsverbruik ter wereld hebben.

Maar hoe kan dat eigenlijk? Zijn we niet extra digitaal gegaan om ons milieu te redden? De realiteit is hier enigszins anders: Helaas betekent digitaal niet automatisch "groen". Van serverparken tot datacenters tot het eigenlijke eindapparaat - alles verbruikt energie om te functioneren.

Een gemiddelde website produceert naar schatting 1,76 gram CO2. Met 10.000 bezoekers per maand komt dat neer op 211 kg CO2 per jaar - voor één enkele pagina! 

Heeft u er ooit over nagedacht hoeveel middelen er nodig zijn voor uw website? Meer dan je denkt, gegarandeerd! Elk verzoek dat uw website verstuurt, wordt ergens ontvangen, verwerkt, teruggestuurd en zo nodig opgeslagen. Dat is veel.

Onze websites moeten groener worden - maar hoe?

1. hosting

Intussen sluiten veel hostingproviders zich hierbij aan en vertrouwen zij op hernieuwbare energiebronnen. Want één ding is duidelijk: webhosting verbruikt energie en veroorzaakt een aanzienlijke hoeveelheid CO2-uitstoot. Bij RAIDBOXES zijn duurzaamheid en klimaatbescherming geen holle frasen, maar een integraal onderdeel van de bedrijfscultuur.

Groene hosting voor WordPress bij RAIDBOXES

Als u een website of een onlinewinkel runt, verbruikt u veel middelen. RAIDBOXES gaat dit tegen - met klimaatpositieve hosting voor WordPress en WooCommerce.

U kunt gemakkelijk bepalen of uw website "groen" is met behulp van deze tool van The Green Web Foundation. Als het resultaat negatief is, moet u van hostingprovider veranderen. U kunt hier een vergelijking zien. 

De Green Web Foundation
RAIDBOXES vertrouwt op duurzame, gecertificeerde groene stroom uit waterkracht.

2. ontwerp

Het juiste ontwerp kan onnodig energieverbruik voorkomen, bijvoorbeeld als uw website niet in de eerste plaats onnodige en ongewenste inhoud laadt. Hoe kun je design en duurzaamheid combineren en hulpbronnen besparen?

Mobile First

Op Mobile First optimaliseert u uw inhoud vanaf het begin voor smartphonegebruik. Geoptimaliseerde pagina's hoeven geen oversized media te laden op mobiele apparaten. Zij zijn zo geprogrammeerd dat desktopstijlen niet hoeven te worden overschreven, maar rechtstreeks zijn ontworpen voor het kleinste toestel.

gebruikerservaring

Ik heb u al eerder verteld over de voordelen van een goed geplande bruikbaarheid. Een goed functionerende gebruikerservaring helpt u en uw klanten om uw website duurzamer te maken. U minimaliseert ongewenste omwegen van uw gebruikers. Want in het ideale geval worden alleen de pagina's geladen die de gebruiker daadwerkelijk wil bezoeken. Als u het aantal ongewenste klikken vermindert, verstuurt u minder gegevensverzoeken en verbruikt u dus minder energie.

Aantal pagina's

Ook hier kunt u werken aan uw duurzaamheid terwijl u de website plant. In het algemeen geldt: hoe minder pagina's moeten worden geladen, hoe minder gegevensverzoeken zullen worden verzonden. Behalve dat het de navigatie op uw site vergemakkelijkt, is het ook vanuit ecologisch oogpunt zinvol om de inhoud te combineren en het aantal pagina's te verminderen.

Wij moeten media zoals beelden, animaties en video's bewuster en doelgerichter gebruiken. Hebben alle afbeeldingen, video's, iconen en animaties die u voor uw site hebt gepland echt een toegevoegde waarde? Of kun je zonder sommige van hen?

3. ontwikkeling

Pagespeed

Pagespeed maakt al lang deel uit van de kleine 1×1 van webdesign. Waarom is het ook goed voor het milieu om aandacht te besteden aan een goede prestatie? Een pagina die sneller laadt is het gevolg van weinig te laden gegevens!

Snellere websites - beter voor het klimaat

Daarom is het des te belangrijker dat u uw website en uw winkel goed optimaliseert. Dit is uw persoonlijke bijdrage aan de bescherming van het klimaat. Leer hier meer over in ons e-book Page Speed & Performance.

Waarom uw pagespeed traag is kan verschillende redenen hebben. Veel hulpmiddelen bieden u niet alleen de analyse, maar ook oplossingen voor betere prestaties.

Voor dit artikel heb ik mijn eigen site aan de tand gevoeld. Zoals u zult zien in mijn zelftest, kan een analyse zelfs volledig tegengesteld uitvallen - afhankelijk van de toepassing waarmee wordt getest. U moet dus bedenken wat uw doelen zijn met de tests.

google vuurtoren
Dit resultaat geeft mij het populaire gereedschap PageSpeed Insights.
vuurtoren
Google Lighthouse test mijn site ook op toegankelijkheid, onder andere.

Hier ter vergelijking de Chrome Developer Tool Google Lighthouse en Google PageSpeed Insights. Beide hulpmiddelen zijn nuttige oriëntatiepunten voor onpage-optimalisatie.

ecograder
Ecograder biedt goede benaderingen voor onpage-optimalisatie.

Ecograder is speciaal ontwikkeld om de duurzaamheid van websites te testen. Persoonlijk vind ik Ecograder het meest gebruiksvriendelijk. De informatie wordt beknopt en begrijpelijk gepresenteerd, de tips voor het verbeteren van de pagespeed zijn nuttig.

Ook de website Carbon Calculator toetst voornamelijk op duurzaamheid. Ik vind de picturale weergave van het resultaat positief. De vergelijkingen met minder abstracte meeteenheden maken het gemakkelijker om zich iets meer bewust te worden van de omvang van iemands werk.

Ik vind de service van Website Carbon over het algemeen informatief, maar ik mis de individueel afgestemde details zoals ik die ken van de Google-tools en van Ecograder. Bovendien vind ik de vergelijking met andere geteste websites als maatstaf voor professionele projecten en argumentatie ontoereikend.

webpagetest
Het populaire hulpprogramma Webpagetest gaat er zeer diep op in.

Vooral voor ontwikkelaars is Webpagetest een uitstekend hulpmiddel omdat het zeer gedetailleerd te werk gaat. U kunt hier uit verschillende voorinstellingen testen. Van "Eenvoudige Testen" tot "Geavanceerde Instellingen", die u de mogelijkheid geven om verschillende onderdelen van uw website uit te sluiten, of toe te voegen via code snippet, en tegelijkertijd een Google Lighthouse Rapport te leveren, tot het vergelijken van twee websites, "alles" is hier mogelijk. De resultaten worden ook technisch tot in het kleinste detail uitgesplitst. Deze website wordt daarom gebruikt voor geavanceerde tests, terwijl Google en Co. hun analyse wat algemener maken.

Afbeeldingen en andere media

Om de aangeboden inhoud te heroverwegen, heb ik al eerder aan de orde gesteld. Nu is het zaak de beelden optimaal te integreren. 

Tinypng werkt wonderwel om beelden te comprimeren - en meestal zonder merkbaar kwaliteitsverlies. U kunt hetzelfde resultaat bereiken met Photoshop en de instelling "Export for Web". Als u uw afbeeldingen al hebt geïntegreerd in een CMS, zoals WordPress , kunt u de resolutie achteraf nog optimaliseren met een Plugin, zoals Smush.

Als je veel afbeeldingen of iconen hebt, kun je CSS sprites gebruiken. Zij werken vergelijkbaar met sprites in computerspelontwikkeling. Hier worden afbeeldingen eenmaal per sprite sheet geïntegreerd. Daarna bepaalt CSS onder welke coördinaten welke afbeelding zich bevindt. Meer over dit onderwerp is hier te vinden.

Sprite sheets zijn meerdere afbeeldingen/iconen die in een enkel bestand zijn samengevoegd. Ontwerpers groeperen hun beelden vaak thematisch. Op basis van de bijbehorende x- en y-coördinaten worden de bladen dienovereenkomstig verdeeld en opgenomen. Op die manier wordt één enkel document geladen dat verschillende visuele componenten weergeeft.

Lazy Load is een andere variant voor het optimaal laden van afbeeldingen. Hier worden afbeeldingen geladen wanneer de bezoeker ze nodig heeft. Voor WordPress zijn er nu ook talloze (gratis en betaalde) Plugins.

WordPress

Natuurlijk vragen ook wij ons af wanneer ecologische benaderingen van bedrijven authentiek zijn: Bestaat er eigenlijk wel een duurzaam internet? Hoe "groen" kan WordPress echt zijn? In het artikel WordPress en duurzaamheid vindt u een actuele stand van zaken van de discussie in de Duitstalige WP-gemeenschap.

Duurzaam WordPress : Maak er deel van uit

RAIDBOXES heeft zich vanaf het begin ingezet voor een duurzaam WordPress . Zie o.a. onze tips over WordPress & duurzaamheid en over groene online winkels. Wil je zelf meer verantwoordelijkheid nemen? Lees dan ons artikel Green Hosting voor WordPress .

Welke bijdrage kunnen wij leveren aan duurzaam, efficiënt webdesign? Wat zijn de belangrijkste hefbomen in het dagelijks ontwerp om hulpbronnen te besparen? Weinig Plugins en een lichtgewicht Theme zijn hier de beste tips.

Gemiddelde WordPress websites komen op ongeveer 600 KB. Door de juiste Themes te kiezen en rekening te houden met de eerder toegelichte aanpak, kunt u 50 procent of meer besparen. Een kleine selectie van geteste Themes vindt u hier.

Als uw website al in de lucht is en overschakelen naar Themes voorlopig niet aan de orde is, kunt u uw WordPress prestaties verbeteren met behulp van deze 10 tweaks.

Hoe overtuigt u uw klanten om deel te nemen

 Eigenlijk zouden de volgende trefwoorden al voldoende moeten zijn om uw klanten te overtuigen van duurzaam webdesign: 

  • Verbeterde gebruiksvriendelijkheid en gebruikerservaring,
  • duidelijke en gemakkelijk te begrijpen ontwerpen, 
  • betere SEO rankings, 
  • kortere laadtijd en 
  • Mobiel-geoptimaliseerde pagina's. 

Als u nog meer argumenten nodig hebt, bieden verschillende stichtingen ook zogenaamde badges aan, die u op de pagina's van uw klanten kunt integreren.

Als u een hostingprovider kiest die duurzame, gecertificeerde groene stroom gebruikt, kan deze badge worden meegeleverd:

WebsiteCarbon biedt bijvoorbeeld ook een badge aan die u op uw pagina's kunt integreren om aan te tonen dat uw inhoud duurzaam en ecologisch is opgebouwd.

Conclusie, meer extreme benaderingen en leesmateriaal

Tijdens mijn onderzoek naar dit onderwerp, kwam ik talloze statistieken tegen. Het versturen van een e-mail heeft dezelfde impact op ons milieu als het gebruik van een plastic zak. Boeken zijn vaak milieuvriendelijker dan e-boeken. Muziekalbums kopen is beter voor onze middelen dan ze streamen. De lijst is eindeloos. Bovenal schudden deze statistieken onze gangbare opvatting dat digitaal ook "groen" betekent, door elkaar.

Afgezien van het feit dat wij als webdesigners en -ontwikkelaars natuurlijk een grote rol spelen in hoe het web zich in de toekomst zal ontwikkelen, kunnen we ook bij onszelf beginnen en wat bewuster met het internet omgaan.

Zoek uit welke van uw apps groen zijn en welke dringend aan een schoonmaakbeurt toe zijn: Met de ClickClean tool van Greenpeace kun je een interessant overzicht krijgen van je (favoriete) apps en erachter komen hoe ecologisch waardevol ze zijn.

Bijdragen die meer bewustzijn creëren voor een groenere toekomst: 

  • Dus Jack Lenox heeft een gebouwd WordPress -Theme die slechts 7 KB licht is. 
  • Brad Frost moedigt ons op zijn blog DeathToBullshit aan om het zonder te stellen, maar met een humoristische noot. 
  • Heydon Pickering geeft codeertips over hoe je je site slanker kunt maken.

We mogen ook de positieve effecten van het internet op ons milieu niet vergeten. Het gebruik van videoconferenties bespaart ons bijvoorbeeld reizen. Vooral in de afgelopen maanden zou iedereen zich bewust moeten zijn geworden van de manier waarop we met behulp van internet het gebruik van vervoermiddelen kunnen vermijden en zo de CO2-uitstoot kunnen verminderen. 

Bovendien hebben we kantoorruimte die kan worden ingekrompen dankzij thuiskantoren. Bovendien biedt het netwerk ons de mogelijkheid om onze krachten met anderen te bundelen: We kunnen bijvoorbeeld gebruik maken van autodeelplatforms en "homestays" zoals AirBnB boeken, die milieuvriendelijker zijn dan hotels.

Het internet maakt het ook veel gemakkelijker om informatie over duurzaamheid en milieubescherming te verspreiden. Het aanbieden en kopen van milieuvriendelijke producten (waartoe we anders misschien minder toegang zouden hebben) behoren natuurlijk ook tot de positieve effecten van de digitale industrie - om er maar een paar te noemen.

Als u zich verder in het onderwerp wilt verdiepen, raad ik u de website sustainablewebdesign.org aan als uitgangspunt. In duidelijke paragrafen worden hier de belangrijkste punten toegelicht en worden mogelijke technische oplossingen voor de uitvoering ervan geboden.

Sustainable Web Design: Welke vragen heb je voor Sonja?

Voel je vrij om de commentaarfunctie te gebruiken. Wilt u op de hoogte blijven van nieuwe artikelen over webdesign en -ontwikkeling? Volg ons dan op Twitter, Facebook of via onze nieuwsbrief.

Na haar studie Game Design en Creative Writing in het groene Auckland heeft Sonja Hoffmann zich gespecialiseerd in web- en app-desgign en de ontwikkeling daarvan. Haar focus ligt op gamification en het verkennen van gebruikersmotivatie en ervaring, gekoppeld aan haar passie en nieuwsgierigheid voor technologische trends.

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.