Duurzaam webdesign: Hoe ontwerp je duurzame websites?

Sonja Hoffmann Bijgewerkt op 21.10.2020
7 Min.
Sustainable webdesign
Laatst bijgewerkt op 21.10.2020

Wat betekent "Duurzaam Webdesign" precies? Hoe weet u hoe ecologisch uw site is? Hoe kunt u uw website(s) duurzamer maken en wat zijn de voordelen voor uw klanten? De antwoorden op deze vragen en enkele belangrijke hulpmiddelen die ik voor u heb verzameld in dit artikel.

Feiten over het machtswellustige internet

Wat ons digitale energieverbruik kost

Volgens Website koolstof het internet verbruikt 416,2 terawattuur (TWh) per jaar. Dat is ongeveer evenveel als Duitsland alleen verbruikt. Als het internet een land was, zou het zesde grootste elektriciteitsverbruik ter wereld.

Maar hoe kan dat eigenlijk? Zijn we niet extra digitaal gegaan om onze omgeving te beschermen? De werkelijkheid ziet er hier een beetje anders uit: Helaas betekent digitaal niet automatisch groen. Van server farms tot datacenters en het eigenlijke eindapparaat - alles gebruikt energie om te functioneren.

Een gemiddelde website produceert naar schatting 1,76 gram CO2. Met 10.000 bezoekers per maand, krijg je 211 kg CO2 per jaar - voor een enkele pagina! 

Heeft u er ooit over nagedacht hoeveel middelen er nodig zijn voor uw website? Gegarandeerd meer dan je denkt! Elke aanvraag die uw website stuurt, wordt ontvangen, verwerkt, geretourneerd en indien nodig ergens opgeslagen. Zo komt er veel bij elkaar.

Onze websites moeten groener worden - maar hoe?

1. hosting

Ondertussen doen veel hostingproviders mee en richten ze zich op hernieuwbare energieën. Want één ding is duidelijk: Webhosting verslindt energie en veroorzaakt een aanzienlijke CO2-uitstoot. Duurzaamheid en klimaatbescherming RAIDBOXES is geen loze kreet, maar een integraal onderdeel van onze bedrijfscultuur.

Groene Hosting voor WordPress bij RAIDBOXES

Als u een website of een online shop runt, verbruikt u veel middelen. RAIDBOXES controles tegen het - met klimaatvriendelijke hosting voor WordPress en WooCommerce.

Of uw website "groen" is, kunt u gemakkelijk te weten komen met behulp van de hulp dit hulpmiddel van The Green Web Foundation. Als het resultaat negatief is, is het raadzaam om van hostingprovider te veranderen. U kunt een vergelijking maken hier inzien. 

De Groene Web Stichting
RAIDBOXES is afhankelijk van duurzame, gecertificeerde groene stroom uit waterkracht.

2. ontwerp

Het juiste ontwerp kan onnodig energieverbruik voorkomen, bijvoorbeeld als uw website helemaal geen onnodige en ongewenste inhoud laadt. Hoe kunt u design en duurzaamheid combineren en middelen besparen?

Mobile First

Met Mobile First u optimaliseert u uw content voor het gebruik van smartphones vanaf het begin. Geoptimaliseerde sites hoeven geen overmaatse media te laden op mobiele apparaten. Ze zijn zo geprogrammeerd dat bureaubladstijlen niet overschreven hoeven te worden, maar direct voor het kleinste apparaat zijn ontworpen.

gebruikersbeleving

Over de voordelen van een goed geplande bruikbaarheid heb ik je verteld eerder gemeld. Een goed functionerende gebruikerservaring helpt u en uw klanten om uw website duurzamer te maken. U minimaliseert ongewenste omwegen van uw gebruikers. Idealiter worden alleen die pagina's geladen die de gebruiker daadwerkelijk wil bezoeken. Als u ongewenste kliks vermindert, verstuurt u minder gegevensaanvragen en verbruikt u dus minder energie.

Aantal pagina's

Hier kunt u ook werken aan uw duurzaamheid tijdens het plannen van de website. In het algemeen geldt dat hoe minder pagina's er hoeven te worden geladen, hoe minder gegevensverzoeken er worden verstuurd. Afgezien van het feit dat dit de navigatie van uw site vergemakkelijkt, is het ook vanuit ecologisch oogpunt zinvol om de inhoud samen te vatten en het aantal pagina's te verminderen.

We zouden bewuster en specifieker gebruik moeten maken van media zoals foto's, eventuele animaties en video's. Hebben alle foto's, video's, iconen en animaties die u voor uw site hebt gepland echt een toegevoegde waarde? Of kan je zonder een paar van hen?

3. ontwikkeling

Pagespeed

Pagespeed maakt al lang deel uit van de kleine 1×1 van het webontwerp. 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 gegevens die moeten worden geladen!

Snellere websites - beter voor het klimaat

Des te belangrijker is het dat je je website en je winkel goed optimaliseert. Dit is jouw persoonlijke bijdrage aan de bescherming van het klimaat. Je kunt hier meer over te weten komen in ons e-book Page Speed & Performance.

Waarom uw paginasnelheid traag is, kan verschillende redenen hebben. Veel tools bieden u niet alleen een analyse, maar ook oplossingen voor betere prestaties.

Voor dit artikel heb ik mijn eigen site aan de tand gevoeld. Zoals u ziet in mijn zelftest kan een analyse zelfs volledig het tegenovergestelde uitvallen - afhankelijk van de toepassing waarmee getest wordt. Dus je moet nadenken over wat je wilt bereiken met de tests.

google vuurtoren
Dit resultaat wordt geleverd door de populaire tool PageSpeed Insights.
vuurtoren
Google Lighthouse test mijn site onder andere op toegankelijkheid.

Hier ter vergelijking de Chrome Developer Tool Google Lighthouse en Google PageSpeed Insights. Beide tools zijn nuttige referentiepunten voor de optimalisatie van de pagina.

ecograaf
Ecograder biedt goede benaderingen voor onpage-optimalisatie.

Ecograder werd speciaal gecreëerd om de duurzaamheid van websites te testen. Persoonlijk vind ik Ecograder het meest gebruiksvriendelijk. De informatie is beknopt en gemakkelijk te begrijpen, de tips voor het verbeteren van de snelheid van de pagina zijn nuttig.

Ook met de Website Koolstofcalculator wordt vooral getest op duurzaamheid. Ik vind de picturale weergave van het resultaat positief. De vergelijkingen met minder abstracte meeteenheden maken het gemakkelijker om iets meer bewust te worden van de omvang van zijn werk.

Ik vind de service van Website Carbon over het algemeen informatief, maar ik mis de individueel op maat gemaakte details zoals ik die ken van Google Tools en Ecograder. Verder vind ik de vergelijking met andere geteste websites als maatstaf voor professionele projecten en argumentatie onvoldoende.

webpaginatest
De populaire tool Webpagetest gaat erg diep.

Speciaal voor ontwikkelaars is Webpagetest een uitstekend hulpmiddel, want het gaat tot in de kleinste details. U kunt hier testen vanuit verschillende voorinstellingen. Van "Simple Testing" tot "Advanced Settings", waarmee u verschillende onderdelen van uw website kunt uitsluiten of toevoegen via een code snippet, en tegelijkertijd een Google Lighthouse Report kunt opnemen, tot aan de vergelijkingstest van twee websites, "alles" is hier mogelijk. Zelfs de resultaten worden technisch tot in het kleinste detail uitgesplitst. Deze website wordt daarom gebruikt voor geavanceerde tests, terwijl Google en Co. meer algemeen zijn in hun analyse.

Beelden en andere media

Ik heb al eerder gezegd dat ik de aangeboden inhoud moet heroverwegen. Nu gaat het erom de foto's op een optimale manier te integreren. 

Tinypng werkt geweldig voor het comprimeren van beelden - en meestal zonder merkbaar kwaliteitsverlies. U kunt hetzelfde resultaat bereiken met Photoshop en de instelling "Export for Web". Als u uw foto's bijvoorbeeld al in een CMS heeft geïntegreerdWordPress , kunt u de resolutie achteraf optimaliseren met bijvoorbeeld een Pluginsmush.

Als je veel afbeeldingen of pictogrammen hebt, kun je CSS sprites gebruiken. Ze werken vergelijkbaar met sprites in de ontwikkeling van computerspellen. Hier worden de beelden één keer per spriteblad geïntegreerd. Vervolgens wordt CSS gebruikt om te bepalen onder welke coördinaten elk beeld zich bevindt. U kunt meer over dit onderwerp vinden hier.

Sprite vellen zijn meerdere afbeeldingen/iconen die worden samengevoegd tot één bestand. Vaak groeperen ontwerpers hun beelden thematisch. Op basis van de corresponderende x- en y-coördinaten worden de platen verdeeld en geïntegreerd. Op deze manier wordt één enkel document geladen, dat verschillende visuele componenten afspeelt.

Lazy Load is een andere variant voor het optimaal laden van beelden. Hier worden de beelden geladen wanneer de bezoeker ze nodig heeft. Ook WordPress hiervoor zijn er talloze (gratis en betaalde) Pluginsversies.

WordPress

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

DuurzaamheidWordPress : Maak er deel van uit

RAIDBOXES is van meet af aan verplicht om duurzaam WordPress een. Zie onder andere onze tips over WordPress & Duurzaamheid en ook om Groene online winkels. Wil je zelf meer verantwoordelijkheid nemen? Lees dan onze bijdrage Green Hosting voor WordPress door.

Welke bijdrage kunnen we leveren aan een duurzaam en efficiënt webdesign? Wat zijn de belangrijkste hefbomen in het dagelijkse ontwerp om middelen te besparen? Weinig Plugins en één lichtgewicht Theme zijn hier de beste tips.

Gemiddelde WordPress pagina's komen tot ongeveer 600 KB. Door de juiste Themes aanpak te kiezen en rekening te houden met de eerder beschreven aanpak, kunt u 50 procent of meer besparen. U vindt een kleine selectie van geteste Themes exemplaren hier.

Als uw website al in gebruik is en de verandering van een Themes website onmogelijk is, kunt u uw WordPress Verbeter de prestaties met behulp van deze 10 stelschroeven.

Hoe u uw klanten overtuigt om deel te nemen

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

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

Als u nog verdere argumenten nodig heeft, bieden verschillende stichtingen ook zogenaamde badges aan, die u kunt integreren op de websites van uw klanten.

Bij de keuze van een hostingprovider die gebruik maakt van duurzame, gecertificeerde groene stroom, kan deze badge worden geïntegreerd:

Bijvoorbeeld, ook WebsiteKoolstof een badge die u kunt integreren in uw pagina's om te laten zien dat uw inhoud duurzaam en ecologisch is.

Conclusie, meer extreme benaderingen en leesstof

Tijdens mijn onderzoek naar dit onderwerp stuitte ik op talloze statistieken. Het versturen van een e-mail heeft hetzelfde effect op onze omgeving als het gebruik van een plastic zak. Boeken zijn daarom vaak milieuvriendelijker dan e-boeken. Het kopen van muziekalbums is beter voor onze bronnen dan het streamen ervan. De lijst is eindeloos. Bovenal schudden deze statistieken ons eerdere algemene begrip dat digitaal ook "groen" betekent, aan het wankelen.

Naast 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 iets bewuster gebruik maken van het internet.

Zoek uit welke van uw apps groen zijn en welke dringend moeten worden schoongemaakt: Met de tool Klik opClean Van Greenpeace krijgt u een interessant overzicht van uw (favoriete) toepassingen en leert u hoe ecologisch waardevol ze zijn.

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

  • Dus Jack Lenox heeft een WordPress -Theme die slechts 7 KB licht is. 
  • Brad Frost moedigt ons aan op zijn blog DeathToBullshit met een humoristische draai om juist dat ding af te schaffen. 
  • Heydon Pickering geeft Coderingstips hoe je je kant slanker kan maken.

We mogen ook de positieve effecten van het internet op ons milieu niet vergeten. Het gebruik van videoconferencing bespaart ons bijvoorbeeld reizen. Met name in de afgelopen maanden had iedereen zich moeten realiseren hoe het internet ons kan helpen om het gebruik van vervoer te vermijden en zo de CO2-uitstoot te verminderen. 

Daarnaast is er kantoorruimte die dankzij het thuiskantoor kan worden verkleind. Bovendien biedt het netwerk ons de mogelijkheid om de krachten te bundelen met anderen: Zo kunnen we bijvoorbeeld gebruik maken van car sharing-platforms 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 aankopen van milieuvriendelijke producten (waartoe we anders misschien minder toegang zouden hebben) is natuurlijk ook een van 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 aan sustainablewebdesign.org als uitgangspunt. In overzichtelijke paragrafen worden hier de belangrijkste punten toegelicht en worden mogelijke technische oplossingen voor de implementatie ervan aangeboden.

Duurzaam webdesign: Welke vragen heeft u voor Sonja?

Voel je vrij om de commentaarfunctie te gebruiken. Wilt u op de hoogte blijven van nieuwe bijdragen aan webdesign en -ontwikkeling? Volg ons dan op TwitterFacebook 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.

Gerelateerde artikelen

Commentaar op dit artikel

Schrijf een opmerking

Je e-mail adres wordt niet gepubliceerd. Verplichte velden zijn met * gemarkeerd.